微信内置浏览器私有接口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');

即可关闭浏览器回到公众号会话窗口。

上一篇 微信支付JSSDK接入方式
下一篇 微信JS-SDK使用步骤
目录
文章列表
1 关于 JOIN 耐心总结,学不会你打我系列
关于 JOIN 耐心总结,学不会你打我系列
2
Vue中使用highlight.js
Vue中使用highlight.js
3
Flutter更新showDialog中的内容
Flutter更新showDialog中的内容
4
React Native文件系统与文件上传下载组件react-native-fs(适配Android & iOS)
React Native文件系统与文件上传下载组件react-native-fs(适配Android & iOS)
5
Vue过滤器
Vue过滤器
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。