Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Introduction to WeixinJSBridge, the private interface of WeChat's built-in browser_javascript skills

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

WBOY
Release： 2016-05-16 15:57:46
Original
1920 people have browsed it

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:




WeChat interface test

<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</a>", //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</a>", //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> });</p> <p> <br> alert("Called successfully! Now you can share it with friends or circle of friends through the button in the upper right corner!");<br> <br> }<br> <br> function hideMenu(){<br> WeixinJSBridge.call('hideOptionMenu');<br> }<br> <br> function showMenu(){<br> WeixinJSBridge.call('showOptionMenu'); <br> }<br> <br> function hideTool(){<br> WeixinJSBridge.call('hideToolbar');<br> }<br> <br> function showTool(){<br> WeixinJSBridge.call('showToolbar');<br> }<br> </p> <p> if(document.addEventListener){<br> document.addEventListener('WeixinJSBridgeReady', sendMessage, false); <br> }else if(document.attachEvent){<br> document.attachEvent('WeixinJSBridgeReady' , sendMessage); <br> document.attachEvent('onWeixinJSBridgeReady' , sendMessage); <br> }<br> <br> //Determine whether the web page is called in WeChat<br> var ua = navigator.userAgent.toLowerCase();<br> if(ua.match(/MicroMessenger/i)=="micromessenger") {<br> } else {<br> alert("The call failed, please use WeChat to scan and scan the QR code below to open the webpage!");<br> }<br> </p> <p></script>



To share, please click the upper right corner














Related labels：
WeChat Browser
source：php.cn
Previous article：JS DIV method to achieve the effect of switching layers when the mouse passes over it_javascript skills Next article：Summary of javascript string and array conversion_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
The query and formula form the entire table, with new columns, where the new columns are formulas involving other conditional column values EDIT: The formula should be the "value" column - the "value" column wi...
From 2024-04-06 21:23:40
0
2
530
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
Trouble getting specific statistics (Stats) from PokeAPI using Axios and Node.js I have a problem, I'm trying to use the PokemonAPI, but when I try to access the attack, H...
From 2024-04-06 18:46:35
0
1
464
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template