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

  关于微信内置浏览器私有接口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‘);//显示右上角三个点按钮。
  }

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

上一篇:微信小程序WebSocket相关问题说明


下一篇:重磅|微信公众号交易已有官方流程 附帐号迁移流程指引