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){/*** 콜백 함수, 비어 있는 상태로 설정하는 것이 좋음 ***/

});

});
}

이렇게 친구에게 보내기 버튼을 누르면 바로 주소록이 팝업되어 '단일' 친구를 선택해 공유할 수 있습니다.

마찬가지로 Moments에 공유하면 Invoke Private 기능도 호출되지만 버튼 바인딩 이름이 다릅니다.

코드 복사 코드는 다음과 같습니다.

함수 sendMessage(){



……//여기서 친구에게 보낸 코드는 생략



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 />
오른쪽 상단에 점 3개 표시 br />
하단 가이드 바 숨기기

;
아래 가이드 바 표시

;