Introduction to WeixinJSBridge, the private interface of WeChat's built-in browser_javascript skills

When entering the WeChat web page, there are three small dots in the upper right corner. Yes, that’s what we use! As long as we customize the buttons under the dot list, we can share our own content as we like.

Note: (WeixinJSBridge is only valid on web pages opened within WeChat)

Button 1------Send to friends

Copy code The code is as follows:

function sendMessage(){

WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("Send to friend"); });

}

In this way, as long as you call the sendMessage function somewhere, you can change the response of the button to send to friends. Click again, and the "Send to friend string" will pop up. Isn't it very simple?

Share function

Copy code The code is as follows:

WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", "appid" ""
"img_url": imgUrl, "ImgUrl" //The image path when sharing
"img_width": "120", "Image width
"img_height": "120", "Image height
"link":url, "link": url, //Share the attached link address
"desc":"I am an introduction",                                                                                                                                 "title":"The title couldn't be simpler."
}, function(res){/*** Callback function, preferably set to empty ***/});

Note that if this WeChat private function is called separately, it makes sense, but! If you call it directly when you open the page for the first time, there will be no reflection anyway. You must manually click the share to friends button in the upper right corner. After the address book pops up once, you can return and use it directly. There will be no problem. It seems that It's the same as initializing something internally. Therefore, it is recommended to embed it directly into the binding method above.

is as follows:

Copy code The code is as follows:

function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){

WeixinJSBridge.invoke('sendAppMessage',{

"appid":"", "appid" ""
"img_url": imgUrl, "ImgUrl" //The image path when sharing
"img_width": "120", "Image width
"img_height": "120", "Image height
"link":url, "link": url, //Share the attached link address
"desc":"I am an introduction",                                                                                                                                 "title":"The title couldn't be simpler."
}, function(res){/*** Callback function, preferably set to empty ***/

});

});
}

In this way, when you click the Send to Friend button, you can directly pop up the address book and select a ‘single’ friend to share.

Similarly, sharing to Moments also calls the invoke private function, but the button binding name is different.

Copy code The code is as follows:

function sendMessage(){



……//Omit the code sent to friends here



WeixinJSBridge.on('menu:share:timeline', function(argv){

WeixinJSBridge.invoke('shareTimeline',{

"appid":"", "appid" ""
"img_url": imgUrl, "ImgUrl" //The image path when sharing
"img_width": "120", "Image width
"img_height": "120", "Image height
"link":url, "link": url, //Share the attached link address
"desc":"I am an introduction",                                                                                                                                 "title":"The title couldn't be simpler."
}, function(res){/*** Callback function, preferably set to empty ***/});

});

});

}

Note that on is bound to "menu:share:timeline" not "menu:share:appmessage". The same is true in invoke.

There is also a Weibo sharing. I have not tried it and I don’t know if it is useful. If you want to play, try it. All sharing is done by calling the current WeChat account.

Copy code The code is as follows:

WeixinJSBridge.on('menu:share:weibo', function(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content":dataForWeixin.title ' ' dataForWeixin.url,
"url":dataForWeixin.url
}, function(res){});
});

If the WeChat browser has not been initialized internally, all interfaces will be undefined. In order to avoid calling errors immediately after entering, obtain the WeChat initialization completion response event, and call sendMessage for binding after the initialization is completed.

is as follows:

Copy code The code is as follows:

if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage); }

There are also a few small functions below:

Copy code The code is as follows:

Weixa
WeixinJSBridge.call('showToolbar'); //Show the lower right toolbar

WeixinJSBridge.call('hideOptionMenu');                                                                                        // Hide the three dot buttons in the upper right corner.

Weixa

I'm a newbie, I've finished writing, and it's not good, so please be considerate!

Complete test code (open with WeChat):

Copy code The code is as follows:

<script><br /> function sendMessage(){<br /> WeixinJSBridge.on('menu:share:appmessage', function(argv){<br /> WeixinJSBridge.invoke('sendAppMessage',{<br /> <br /> "appid":"", //Appid can be set to empty. <br /> "img_url":"", //The image path when sharing <br /> "img_width":"120", //Image width<br /> "img_height":"120", //Image height<br /> "link":"<a href="http://www.jb51.net">http://www.jb51.net", //Share the attached link address<br /> "desc":"Geek Tag--http://www.jb51.net", //Introduction to sharing content<br /> "title":"Discover geek tags - be the best geek knowledge sharing platform"<br /> }, function(res){/*** Callback function, preferably set to empty ***/<br /> <br /> });<br /> });<br /> <br /> WeixinJSBridge.on('menu:share:timeline', function(argv){<br /> <br /> WeixinJSBridge.invoke('shareTimeline',{<br /> <br /> "appid":"", //Appid can be set to empty. <br /> "img_url":"", //The image path when sharing <br /> "img_width":"120", //Image width<br /> "img_height":"120", //Image height<br /> "link":"<a href="http://www.jb51.net">http://www.jb51.net", //Share the attached link address<br /> "desc":"Geek Tag--http://www.jb51.net", //Introduction to sharing content<br /> "title":"Discover geek tags - be the best geek knowledge sharing platform"<br /> }, function(res){/*** Callback function, preferably set to empty ***/<br /> });<br /> <br /> });</script>

alert("Called successfully! Now you can share it with friends or circle of friends through the button in the upper right corner!");

}

function hideMenu(){
WeixinJSBridge.call('hideOptionMenu');
}

function showMenu(){
WeixinJSBridge.call('showOptionMenu');
}

function hideTool(){
WeixinJSBridge.call('hideToolbar');
}

function showTool(){
WeixinJSBridge.call('showToolbar');
}

if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false);
}else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage);
document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
}

//Determine whether the web page is called in WeChat
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
} else {
alert("The call failed, please use WeChat to scan and scan the QR code below to open the webpage!");
}

To share, please click the upper right corner

Hide the three dots in the upper right corner


Show three dots in the upper right corner


Hide the lower guide bar

Show the guide bar below