微信内置浏览器私有接口WeixinJSBridge介绍
微信浏览器私有接口WeiXinJsBridge,大致有以下几个有用的知识点:
- 分享给好友
- 分享到朋友圈
- 分享到微博
- 隐藏下方工具栏
- 隐藏微信右上角分享按钮(三个小圆点)
- 关闭浏览器回到公众号对话窗口
WeiXinJsBridge的分享函数
WeiXinJsBridge的分享函数分为分享给好友,分享到朋友圈,分享到微博,但是这三种分享都是在下面在个函数内部实现的。
function sendMessage() {
WeixinJSBridge.on('menu:share:appmessage', function(argv) {
alert("发送给好友");
});
}
只要在需要进行分享的位置处,调用此函数,就可以完成分享功能。
分享给好友(menu:share:appmessage)
function sendMessage() {
WeixinJSBridge.on('menu:share:appmessage', function(argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"appid": "", //appid 设置空即可
"img_url": imgUrl, //分享时所带的图片路径
"img_width": "120", //图片宽度
"img_height": "120", //图片高度
"link": url, //分享附带链接地址
"desc": "我是一个介绍", //分享内容介绍
"title": "标题,再简单不过了"
}, function(res) {
/*** 回调函数,最好设置为空 ***/
});
});
}
分享到朋友圈(menu:share:timeline)
function sendMessage() {
WeixinJSBridge.on('menu:share:timeline', function(argv) {
WeixinJSBridge.invoke('shareTimeline', {
"appid": "", //appid 设置空即可
"img_url": imgUrl, //分享时所带的图片路径
"img_width": "120", //图片宽度
"img_height": "120", //图片高度
"link": url, //分享附带链接地址
"desc": "我是一个介绍", //分享内容介绍
"title": "标题,再简单不过了"
}, function(res) {
/*** 回调函数,最好设置为空 ***/});
});
});
}
分享到微博(menu:share:weibo)
function sendMessage() {
WeixinJSBridge.on('menu:share:weibo', function(argv) {
WeixinJSBridge.invoke('shareWeibo', {
"content": dataForWeixin.title+' '+dataForWeixin.url,
"url": dataForWeixin.url
}, function(res) {
/*** 回调函数,最好设置为空 ***/
});
});
}
三个分享功能主要是监听的接口不同
- 分享给好友(menu:share:appmessage):
invoke('sendAppMessage');
- 分享到朋友圈(menu:share:timeline):
invoke('shareTimeline');
- 分享到微博(menu:share:weibo):
invoke('shareWeibo');
注意:如果微信浏览器内部尚未初始化,所有的接口都会是undefined。为了避免进去马上就调用出错,获取微信初始化完成响应事件,初始化完成调用sendMessage进行绑定。
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', sendMessage, false);
} else if(document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady' , sendMessage);
document.attachEvent('onWeixinJSBridgeReady', sendMessage);
}
WeixinJSBridge的隐藏函数
WeixinJSBridge.call('hideToolbar');
//隐藏右下面工具栏WeixinJSBridge.call('showToolbar');
//显示右下面工具栏WeixinJSBridge.call('hideOptionMenu');
//隐藏右上角三个点按钮WeixinJSBridge.call('showOptionMenu');
//显示右上角三个点按钮
WeixinJSBridge的关闭函数
使用场景:页面操作结束,需要关闭当前浏览器,回到公众号对话窗口。
例如:某项目需求支持用户将openId和手机号进行绑定和解绑定,在执行完解绑定后关闭当前微信浏览器回到公众号对话窗口。
完成页面操作后,在适当的时机调用微信提供的方法:
WeixinJSBridge.call('closeWindow');
即可关闭浏览器回到公众号会话窗口。
版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/25/introduction-to-wechat-built-in-browser-private-interface-weixinjsbridge/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论