微信内置浏览器WeixinJSBridge接口详解:分享、UI控制与支付
本文详细介绍微信内置浏览器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调用sendApp方法;分享到朋友圈对应监听接口(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');即可关闭浏览器回到公众号会话窗口。
在微信网页中获取用户的网络状态
WeixinJSBridge.invoke('getNetworkType',{},function (e){
// 在这里拿到e.err_msg,这里面就包含了所有的网络类型
alert(e.err_msg);
});
//e.err_msg的取值如下所示:
//network_type:wifi wifi网络
//network_type:edge 非wifi,包含3G/2G
//network_type:fail 网络断开连接
//network_type:wwan 2g或者3g在微信网页中支付
function onBridgeReady(orderId, response) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: response.appId, //公众号ID,由商户传入
timeStamp: response.timeStamp, //时间戳,自1970年以来的秒数
nonceStr: response.nonceStr, //随机串
package: response.packageVal,
signType: response.signType, //微信签名方式:
paySign: response.paySign //微信签名
},
function (res) {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
if (res.err_msg == "get_brand_wcpay_request:ok") {
$api.pay_order(orderId).then(res => {
if (res.code == 1) {
state.assistOne = false;
state.assistTwo = false;
$Toast({
duration: 3000,
message: "支付成功!"
});
emit("get_brand_wcpay");
}
});
}
// 支付过程中用户取消
if (res.err_msg == "get_brand_wcpay_request:cancel") {
}
// 支付失败
if (res.err_msg == "get_brand_wcpay_request:fail") {
}
/**
* 其它
* 1、请检查预支付会话标识prepay_id是否已失效
* 2、请求的appid与下单接口的appid是否一致
* */
if (res.err_msg == "调用支付JSAPI缺少参数:total_fee") {
}
}
);
}
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
}
} else {
onBridgeReady();
}以上就是微信内置浏览器WeixinJSBridge的使用技巧(隐藏右上角按钮,获取用户网络状态,支付等)的详细内容,更多关于微信内置浏览器WeixinJSBridge的使用技巧的资料请关注本站其它相关文章!
Node.js中使用path模块获取文件名
2026-11-05 15:15:15
Node.js中url模块与querystring模块处理查询字符串的区别
2026-11-05 15:04:45
JavaScript(JS)主要用来做什么
2026-11-05 10:10:47
怎么修改Node.js和npm的全局安装路径与缓存目录
2026-11-04 19:48:28
NW.js 常见问题排查:Node 模块加载失败与版本兼容解决
2026-11-04 11:22:45
