微信内置浏览器私有接口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 相关文章推荐
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
jQuery操作cookie
Aug 08 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
js下弹出窗口的变通
2007/04/18 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
python实现决策树
2017/12/21 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
六一儿童节活动策划方案
2014/01/27 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
2014年度考核工作总结
2014/12/24 职场文书
单位实习鉴定评语
2015/01/04 职场文书
写给医生的感谢信
2015/01/22 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android