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