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

所属分类: 网络编程 / JavaScript 阅读数: 843
收藏 0 赞 0 分享

微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了。

注意:(WeixinJSBridge只能在微信内打开的网页有效)

按钮一之------发送给好友

复制代码 代码如下:

function sendMessage(){
 
 WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("发送给好友"); });
 
}

这样,只要在某处调用 sendMessage  函数就可以改变发送好友的按钮响应了,再点击,便会弹出“发送给好友字符串”,是不是很简单。

分享函数

复制代码 代码如下:

WeixinJSBridge.invoke('sendAppMessage',{
    "appid":"",                                              //appid 设置空就好了。
    "img_url":  imgUrl,                                   //分享时所带的图片路径
    "img_width": "120",                            //图片宽度
    "img_height": "120",                            //图片高度
    "link":url,                                               //分享附带链接地址
    "desc":"我是一个介绍",                            //分享内容介绍
    "title":"标题,再简单不过了。"
   }, function(res){/*** 回调函数,最好设置为空 ***/});

注意,如果将这个微信私有函数单独拿出来调用,道理上是讲的通,但是!第一次打开页面直接调用它的话,无论如何是没有任何反映的,必须要手动,点一下右上角分享给好友按钮,待弹出一次通讯录之后,返回来在直接使用,就没有任何问题,似乎内部初始化什么东西一样。所以建议直接嵌入到上面那个 绑定方法中。

如下:

复制代码 代码如下:

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){/*** 回调函数,最好设置为空 ***/
 
    });
 
   });
}


这样,你在点击发送给好友按钮,就可以直接弹出通讯录选择 ‘单个' 好友进行分享。

同理,分享到朋友圈也是调用 invoke 私有函数,只是按钮绑定名称不同而已。

复制代码 代码如下:

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){/*** 回调函数,最好设置为空 ***/});
 
 });  
 
  });
 
}

注意,on绑定的是 “menu:share:timeline” 不是 "menu:share:appmessage"。invoke里面也是。

还一个微博分享,我没试过,不知道有没有用,想玩的试试,一切分享都是调用当前微信帐号分享。

复制代码 代码如下:

WeixinJSBridge.on('menu:share:weibo', function(argv){
   WeixinJSBridge.invoke('shareWeibo',{
   "content":dataForWeixin.title+' '+dataForWeixin.url,
   "url":dataForWeixin.url
   }, function(res){});
});


如果微信浏览器内部尚未初始化,所有的接口都会是undefined。为了避免进去马上就调用出错,获取微信初始化完成响应事件,初始化完成调用sendMessage进行绑定。

如下:

复制代码 代码如下:

if(document.addEventListener){
 document.addEventListener('WeixinJSBridgeReady', sendMessage, false);  }else if(document.attachEvent){
 document.attachEvent('WeixinJSBridgeReady'   , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage);  }

下面还有几个小功能:

复制代码 代码如下:

WeixinJSBridge.call('hideToolbar');                        //隐藏右下面工具栏
 
WeixinJSBridge.call('showToolbar'); //显示右下面工具栏
 
WeixinJSBridge.call('hideOptionMenu');                //隐藏右上角三个点按钮。
 
WeixinJSBridge.call('showOptionMenu');              //显示右上角三个点按钮。
 


我是一个菜鸟,写完了,写的不好,请大家多多包含!


完整测试代码(用微信打开):

复制代码 代码如下:

<!docType html>
<html>
<head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

<title>微信接口测试</title>

<script>
 function sendMessage(){
  WeixinJSBridge.on('menu:share:appmessage', function(argv){
   WeixinJSBridge.invoke('sendAppMessage',{
 
   "appid":"",          //appid 设置空就好了。
   "img_url":"",         //分享时所带的图片路径
   "img_width":"120",         //图片宽度
   "img_height":"120",        //图片高度
   "link":"https://www.jb51.net",      //分享附带链接地址
   "desc":"极客标签--https://www.jb51.net",    //分享内容介绍
   "title":"发现 极客标签 - 做最棒的极客知识分享平台"
   }, function(res){/*** 回调函数,最好设置为空 ***/
 
   });
  });
  
  WeixinJSBridge.on('menu:share:timeline', function(argv){
 
   WeixinJSBridge.invoke('shareTimeline',{
 
   "appid":"",          //appid 设置空就好了。
   "img_url":"",         //分享时所带的图片路径
   "img_width":"120",         //图片宽度
   "img_height":"120",        //图片高度
   "link":"https://www.jb51.net",      //分享附带链接地址
   "desc":"极客标签--https://www.jb51.net",    //分享内容介绍
   "title":"发现 极客标签 - 做最棒的极客知识分享平台"
   }, function(res){/*** 回调函数,最好设置为空 ***/
   });
 
  });

  
  alert("调用成功!现在可以通过右上角按钮分享给朋友或者朋友圈!");
  
 }
 
 function hideMenu(){
  WeixinJSBridge.call('hideOptionMenu');
 }
 
 function showMenu(){
  WeixinJSBridge.call('showOptionMenu'); 
 }
 
 function hideTool(){
  WeixinJSBridge.call('hideToolbar');
 }
 
 function showTool(){
  WeixinJSBridge.call('showToolbar');
 }
 

 if(document.addEventListener){
  document.addEventListener('WeixinJSBridgeReady', sendMessage, false);
 }else if(document.attachEvent){
  document.attachEvent('WeixinJSBridgeReady' , sendMessage); 
  document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
 }
 
 //判断网页是否在微信中被调用
 var ua = navigator.userAgent.toLowerCase();
 if(ua.match(/MicroMessenger/i)=="micromessenger") {
  } else {
  alert("调用失败,请用微信扫一扫,扫描下面二维码打开网页!");
 }
 

</script>

</head>

<body>
 <center>
 <h2>分享请点击右上角</h2>
 <button onclick="hideMenu()" style="width:100px;height:100px;font-size:16px;">隐藏右上角三个点</button> <br /><br />
 <button onclick="showMenu()" style="width:100px;height:100px;font-size:16px;">显示右上角三个点</button> <br /><br />
 <button onclick="hideTool()" style="width:100px;height:100px;font-size:16px;">隐藏下面导条</button>   <br /><br />
 <button onclick="showTool()" style="width:100px;height:100px;font-size:16px;">显示下面导条</button>    <br /><br />
 </center>
</body>

</html>

更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多