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


Posted in Javascript onMay 25, 2015

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

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

注意:(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://3water.com",      //分享附带链接地址

   "desc":"极客标签--https://3water.com",    //分享内容介绍

   "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://3water.com",      //分享附带链接地址

   "desc":"极客标签--https://3water.com",    //分享内容介绍

   "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 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue无限轮播插件代码实例
May 10 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
vue实现放大镜效果
Sep 17 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 #Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 #Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 #Javascript
jquery控制表单输入框显示默认值的方法
May 22 #Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 #Javascript
JavaScript检测鼠标移动方向的方法
May 22 #Javascript
jQuery实现强制cookie过期方法汇总
May 22 #Javascript
You might like
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php实现Mysql简易操作类
2015/10/11 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python中解析json格式文件的方法示例
2017/05/03 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
毕业生自我鉴定
2013/12/04 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
入党思想汇报
2014/01/05 职场文书
计算机专业优秀大学生自我总结
2014/01/21 职场文书
新学期教师寄语
2014/04/02 职场文书
重阳节标语大全
2014/10/07 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python