微信内置浏览器私有接口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 文件夹选择框的两种解决方案
Jul 01 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
什么是MVC,好东西啊
2007/05/03 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
Python实现的栈(Stack)
2018/01/26 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Python如何在DataFrame增加数值
2020/02/14 Python
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
历史学专业推荐信
2013/11/06 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
工作自我评价怎么写
2014/01/29 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
活动倡议书范文
2014/05/13 职场文书
辞职信的写法
2015/02/27 职场文书
安全教育培训心得体会
2016/01/15 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL