微信内置浏览器私有接口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 相关文章推荐
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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生成自己的LOG文件
2006/10/09 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
js实现简单扫雷
2020/11/27 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
教师实习自我鉴定
2013/12/18 职场文书
五一家具促销方案
2014/01/10 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
大学生工作自荐书
2014/06/16 职场文书
新文化运动的基本口号
2014/06/21 职场文书
培训后的感想
2015/08/07 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Navicat连接MySQL错误描述分析
2021/06/02 MySQL