WeChat에 내장된 browser_javascript 기술의 개인 인터페이스인 WeixinJSBridge 소개
WeChat 웹페이지에 들어가면 오른쪽 상단에 작은 점 3개가 있습니다. 네, 그게 바로 우리가 사용하는 것입니다! 도트 리스트 아래의 버튼을 맞춤 설정하기만 하면 원하는 대로 콘텐츠를 공유할 수 있습니다.
참고: (WeixinJSBridge는 WeChat 내에서 열린 웹페이지에서만 유효합니다.)
버튼 1------친구에게 보내기
함수 sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){ Alert("친구에게 보내기"); });
}
이런 식으로 어딘가에서 sendMessage 함수를 호출하기만 하면 친구에게 보내기 위한 버튼의 응답을 변경할 수 있고, 다시 클릭하면 "친구에게 보내기 문자열"이 뜹니다. 단순한?
공유 기능
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", "appid" ""
"img_url": imgUrl, "ImgUrl" //공유 시 이미지 경로
"img_width": "120", "이미지 너비
"img_height": "120", "이미지 높이
"link":url, "link": url, //첨부된 링크 주소 공유
"desc":"저는 소개입니다", "title": "제목이 이보다 더 간단할 수는 없습니다."
}, 함수(res){/*** 콜백 함수, 비어 있는 상태로 설정하는 것이 좋음 ***/});
은 다음과 같습니다.
함수 sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", "appid" ""
"img_url": imgUrl, "ImgUrl" //공유 시 이미지 경로
"img_width": "120", "이미지 너비
"img_height": "120", "이미지 높이
"link":url, "link": url, //첨부된 링크 주소 공유
"desc":"저는 소개입니다", "title": "제목이 이보다 더 간단할 수는 없습니다."
}, 함수(res){/*** 콜백 함수, 비어 있는 상태로 설정하는 것이 좋음 ***/
});
});
}
이렇게 친구에게 보내기 버튼을 누르면 바로 주소록이 팝업되어 '단일' 친구를 선택해 공유할 수 있습니다.
……//여기서 친구에게 보낸 코드는 생략
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", "appid" ""
"img_url": imgUrl, "ImgUrl" //공유 시 이미지 경로
"img_width": "120", "이미지 너비
"img_height": "120", "이미지 높이
"link":url, "link": url, //첨부된 링크 주소 공유
"desc":"저는 소개입니다", "title": "제목이 이보다 더 간단할 수는 없습니다."
}, 함수(res){/*** 콜백 함수, 비어 있는 상태로 설정하는 것이 좋음 ***/});
})
});
}
on은 "menu:share:appmessage"가 아닌 "menu:share:timeline"에 바인딩됩니다. 호출에서도 마찬가지입니다.
웨이보 공유도 해보지는 않았는데, 플레이하고 싶으시다면 모든 공유는 현재 위챗 계정으로 하면 됩니다.
WeixinJSBridge.on('menu:share:weibo', function(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content":dataForWeixin.title ' ' dataForWeixin.url,
"url":dataForWeixin.url
}, 함수(res){});
});
WeChat 브라우저가 내부적으로 초기화되지 않은 경우 모든 인터페이스가 정의되지 않습니다. 진입 후 바로 호출 오류가 발생하지 않도록 위챗 초기화 완료 응답 이벤트를 획득하고, 초기화 완료 후 바인딩을 위해 sendMessage를 호출합니다.
은 다음과 같습니다.
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false) }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
WeixinJSBridge.call('showToolbar'); //오른쪽 하단 툴바 표시
WeixinJSBridge.call('hideOptionMenu'); // 오른쪽 상단 모서리에 있는 점 3개 버튼을 숨깁니다.
웨이샤
전체 테스트 코드(WeChat으로 열기):
<스크립트>
함수 sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //Appid를 비워 둘 수 있습니다.
"img_url":"", //공유 시 이미지 경로
"img_width":"120", //이미지 너비
"img_height":"120", //이미지 높이
"link":"http://www.jb51.net", //첨부된 링크 주소 공유
"desc":"Geek Tag--http://www.jb51.net", //콘텐츠 공유 소개
"title":"괴짜 태그를 발견하세요 - 최고의 괴짜 지식 공유 플랫폼이 되세요"
}, 함수(res){/*** 콜백 함수, 비어 있는 상태로 설정하는 것이 좋음 ***/
});
});
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //Appid를 비워 둘 수 있습니다.
"img_url":"", //공유 시 이미지 경로
"img_width":"120", //이미지 너비
"img_height":"120", //이미지 높이
"link":"http://www.jb51.net", //첨부된 링크 주소 공유
"desc":"Geek Tag--http://www.jb51.net", //콘텐츠 공유 소개
"title":"괴짜 태그를 발견하세요 - 최고의 괴짜 지식 공유 플랫폼이 되세요"
}, 함수(res){/*** 콜백 함수, 비어 있는 상태로 설정하는 것이 좋음 ***/
});
});
Alert("성공적으로 호출되었습니다! 이제 오른쪽 상단에 있는 버튼을 통해 친구 또는 친구들과 공유할 수 있습니다!");
}
함수 hideMenu(){
WeixinJSBridge.call('hideOptionMenu');
}
함수 showMenu(){
WeixinJSBridge.call('showOptionMenu')
}
함수 hideTool(){
WeixinJSBridge.call('hideToolbar');
}
함수 showTool(){
WeixinJSBridge.call('showToolbar');
}
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false)
}else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage)
document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
}
//WeChat에서 해당 웹페이지가 호출되는지 확인
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
} 그 밖의 {
warning("통화가 실패했습니다. WeChat을 사용하여 아래 QR 코드를 스캔하여 웹페이지를 여세요!");
}
<본문>
공유하려면 오른쪽 상단을 클릭하세요
;br />
br />
;
;