微信内置浏览器私有接口WeixinJSBridge介绍
作者：bea
微信网页进入，右上角有三个小点，没错，我们用到的就是它！我们只要通过将小点列表下的按钮进行自定义，就可以随心所欲的分享我们自己的内容了。 注意：（WeixinJSBridge只能在微信内打开的网页有效） 按钮一之------发送给好友 代码如下: function sendMessage(){ WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("发送给好友"); }); }
微信网页进入，右上角有三个小点，没错，我们用到的就是它！我们只要通过将小点列表下的按钮进行自定义，就可以随心所欲的分享我们自己的内容了。
注意：（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":"http://", //分享附带链接地址 "desc":"极客标签--http://", //分享内容介绍 "title":"发现 极客标签 - 做最棒的极客知识分享平台" }, function(res){/*** 回调函数，最好设置为空 ***/ }); }); WeixinJSBridge.on('menu:share:timeline', function(argv){ WeixinJSBridge.invoke('shareTimeline',{ "appid":"", //appid 设置空就好了。 "img_url":"", //分享时所带的图片路径 "img_width":"120", //图片宽度 "img_height":"120", //图片高度 "link":"http://", //分享附带链接地址 "desc":"极客标签--http://", //分享内容介绍 "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事件取消和阻止冒泡
- javascript事件冒泡和事件捕获详解
- 解析javascript中鼠标滚轮事件
- JS中字符串trim()使用示例
- JSON字符串和对象之间的转换详解
- Js和JQuery获取鼠标指针坐标的实现代码分享
- Javascript实现飞动广告效果的方法
- javascript自定义右键弹出菜单实现方法
- JS+DIV实现鼠标划过切换层效果的方法
- JavaScript实现仿网易通行证表单验证
- js+cookies实现悬浮购物车的方法
- 手机开发必备技巧：javascript及CSS功能代码分享
- JS和css实现检测移动设备方向的变化并判断横竖屏幕
- jquery 构造函数在表单提交过程中修改数据
- js实现鼠标划过给div加透明度的方法
- javascript实现youku的视频代码自适应宽度
- 微信WeixinJSBridge API使用实例
- jquery.validate使用时遇到的问题