微信内置浏览器私有接口WinXinJsBridge介绍

Posted 2020-09-02

　　关于微信内置浏览器私有接口WeiXinJsBridge，只是之前接触过的一个微信公众号项目中遇到过，不过并没有深入研究过，可以说并没有了解过。。。

　　刚好今天无意中看到了这方面的知识，就补习一下，弥补一下自己短缺的js知识，虽然只是了解了一点，但是还是先记录下来，一方面增强自己的记忆，另一方面，顺便练练手，不至于将来使用的时候，找到了地方。下面进入正题。

　　看了这个微信浏览器私有接口WeiXinJsBridge，大致总结了一下几个小的有用的知识点：

　　1、分享给好友。

　　2、分享到朋友圈。

　　3、分享到微博。

　　4、隐藏下方工具栏。

　　5、隐藏微信右上角分享按钮（三个小圆点）。

　　要在微信页面中调用这个接口，就要熟悉WeiXinJsBridge的标准吧。

　　一、首先介绍一下三个分享功能的分享函数吧。

　　

1 function sendMessage(){
2     WeixinJSBridge.on(‘menu:share:appmessage‘, function(argv){
3         alert("发送给好友");
4     });
5 }

 

　　只要在需要进行分享的位置处，调用此函数，就可以完成分享功能。

　　二、分享函数介绍完了，那么分享给好友，朋友圈，微博有什么区别呢？自然是有区别的，不过这三种分享功能的代码都是在分享函数内部实现的。

　　　　1、分享给好友。

 1 function sendMessage(){
 2     WeixinJSBridge.on(‘menu:share:appmessage‘, function(argv){
 3 
 4         WeixinJSBridge.invoke(‘sendAppMessage‘,{
 5 
 6             "appid":"", //appid 设置空就好了。
 7             "img_url": imgUrl, //分享时所带的图片路径
 8             "img_width": "120", //图片宽度
 9             "img_height": "120", //图片高度
10             "link":url, //分享附带链接地址
11             "desc":"我是一个介绍", //分享内容介绍
12             "title":"标题，再简单不过了。"
13         }, function(res){
14             /*** 回调函数，最好设置为空 ***/
15 
16         }); 
17     });
18 }          

 　　　　2、分享到朋友圈。

　　

 1 function sendMessage(){
 2 
 3     WeixinJSBridge.on(‘menu:share:timeline‘, function(argv){
 4 
 5         WeixinJSBridge.invoke(‘shareTimeline‘,{
 6 
 7             "appid":"", //appid 设置空就好了。
 8             "img_url": imgUrl, //分享时所带的图片路径
 9             "img_width": "120", //图片宽度
10             "img_height": "120", //图片高度
11             "link":url, //分享附带链接地址
12             "desc":"我是一个介绍", //分享内容介绍
13             "title":"标题，再简单不过了。"
14         }, function(res){
15             /*** 回调函数，最好设置为空 ***/});
16 
17         }); 
18     });
19 }    

　　　　3、分享到微博。

　　

 1 function sendMessage(){
 2 
 3     WeixinJSBridge.on(‘menu:share:weibo‘, function(argv){
 4 
 5         WeixinJSBridge.invoke(‘shareWeibo‘,{
 6             "content":dataForWeixin.title+‘ ‘+dataForWeixin.url,
 7             "url":dataForWeixin.url
 8         }, function(res){
 9             /*** 回调函数，最好设置为空 ***/
10 
11         });
12     });
13 }            

　　观察以上三个分享功能的代码，可以看出三个功能代码的不同之处在于，1（‘menu:share:weibo‘）2（WeixinJSBridge.invoke(‘shareWeibo‘,{}）这两个标红位置的不同。使用的时候请注意。

　　注意：如果微信浏览器内部尚未初始化，所有的接口都会是undefined。为了避免进去马上就调用出错，获取微信初始化完成响应事件，初始化完成调用sendMessage进行绑定。

　　

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

　　上边的代码必不可少。

　　剩下的两个功能代码如下：

　　function hideMenu(){
　　　　WeixinJSBridge.call(‘hideOptionMenu‘); //隐藏右下面工具栏
　　}

　　function showMenu(){
　　　　WeixinJSBridge.call(‘showOptionMenu‘); //显示右下面工具栏
　　}

　　function hideTool(){
　　　　WeixinJSBridge.call(‘hideToolbar‘);//隐藏右上角三个点按钮。
　　}

　　function showTool(){
　　　　WeixinJSBridge.call(‘showToolbar‘);//显示右上角三个点按钮。
　　}