微信内置浏览器私有接口WeixinJSBridge介绍(转)
微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了。
注意:(WeixinJSBridge只能在微信内打开的网页有效)
按钮一之------发送给好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("发送给好友"); });
}
这样,只要在某处调用 sendMessage 函数就可以改变发送好友的按钮响应了,再点击,便会弹出“发送给好友字符串”,是不是很简单。
分享函数
"appid":"", //appid 设置空就好了。
"img_url": imgUrl, //分享时所带的图片路径
"img_width": "120", //图片宽度
"img_height": "120", //图片高度
"link":url, //分享附带链接地址
"desc":"我是一个介绍", //分享内容介绍
"title":"标题,再简单不过了。"
}, function(res){/*** 回调函数,最好设置为空 ***/});
注意,如果将这个微信私有函数单独拿出来调用,道理上是讲的通,但是!第一次打开页面直接调用它的话,无论如何是没有任何反映的,必须要手动,点一下右上角分享给好友按钮,待弹出一次通讯录之后,返回来在直接使用,就没有任何问题,似乎内部初始化什么东西一样。所以建议直接嵌入到上面那个 绑定方法中。
如下:
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 私有函数,只是按钮绑定名称不同而已。
......//此处省略发送给好友代码
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.invoke('shareWeibo',{
"content":dataForWeixin.title+' '+dataForWeixin.url,
"url":dataForWeixin.url
}, function(res){});
});
如果微信浏览器内部尚未初始化,所有的接口都会是undefined。为了避免进去马上就调用出错,获取微信初始化完成响应事件,初始化完成调用sendMessage进行绑定。
如下:
document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage); }
下面还有几个小功能:
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://www.3lian.net", //分享附带链接地址
"desc":"极客标签--http://www.jb51.net", //分享内容介绍
"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://www.3lian.net", //分享附带链接地址
"desc":"极客标签--http://www.jb51.net", //分享内容介绍
"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>
微信内置浏览器私有接口WeixinJSBridge介绍(转)的更多相关文章
- 微信内置浏览器私有接口WeixinJSBridge介绍
原文地址:http://www.3lian.com/edu/2015/05-25/216227.html 这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友 ...
- 微信内置浏览器私有接口WinXinJsBridge介绍
关于微信内置浏览器私有接口WeiXinJsBridge,只是之前接触过的一个微信公众号项目中遇到过,不过并没有深入研究过,可以说并没有了解过... 刚好今天无意中看到了这方面的知识,就补习一下,弥补一 ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记
微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏
微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface) ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]
原文地址: http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...
- 【微网站开发】之微信内置浏览器API使用
最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般 ...
- 微信内置浏览器的JS API
/**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享 ...
- 微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub
最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp.由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难.写这篇文章总结下,惊醒自己未来不要再犯这样的错误. 问题: 1. 有些比 ...
- ASP.NET MVC Display Mode 移动端视图 配置对微信内置浏览器的识别
最近在捣鼓一个稍微有点low的商城网站,没有计划做app却要求有个wap版,而前端又没有做成响应式,时间WTF,直接利用了asp.net mvc的Display Mode Provider. 使用方式 ...
随机推荐
- windows下配置PHP+Nginx+MySQL完整流程(转)
对于在windows上的php+nginx的配置可能好多同学一次根本都配不正确,于我也是如此,为此我将我成功配置的过程细致的总结如下,希望能帮助搞PHP研究的同学 1.资源准备 MySQL:这个链接不 ...
- [转]SQL Server中临时表与表变量的区别
[转]http://blog.csdn.net/skyremember/archive/2009/03/05/3960687.aspx 我们在数据库中使用表的时候,经常会遇到两种使用表的方法,分别就是 ...
- 【2013Esri全球用户大会精彩案例】Horry Count GIS--南卡罗来那州霍里县企业级应用
行业领域:政府 基于Online的组织机构订阅服务,构建Horry县的地图及应用门户,满足政府和公众的需要.公众可通过移动设备查看公开的地图,包括教育资源分布.选区分布.墓地管理.害虫监控等内容:政府 ...
- android动画特效之解决解决移动后闪烁现象,解决输入法弹出后位置回复原状,解决两个动画叠加
以下代码实现的效果是: BoundOpenView从居中移动到顶部,移动完后,BoundSendView从隐藏变为显示,并从顶部移动BoundOpenView下方20dp处,同时透明度慢慢增加. pr ...
- POJ 1915 经典马步 双向bfs
拿这个经典题目开刀...........可是双向时间优势在这题上的效果不太明显 #include <iostream> #include <algorithm> #includ ...
- ColorMatrixFilter色彩矩阵滤镜(as3)
matrix是一个长度为4*5=20的数组,其构成如下所示: R ,G, B, A, offset [1, 0, 0, 0, 0]); // red [0, 1, 0, 0, 0 ...
- gearman的安装和配置
gearman作为并发任务管理服务,已经越来越多攻城狮在生产环境中使用了.为了日后方便部署到服务器,我写了一个shell. 一般服务器使用稳定的centos,我使用的是centos6.7. 安装she ...
- spark单机部署及样例运行
spark单机运行部署 环境预装 需要预先下载jdk和spark.机器使用centos6.6(推荐).然后依次运行 [root@spark-master root]# cd /root #安装必要的软 ...
- 【终极】Dynamic Web Module 3.0 requires Java 1.6 or newer
今天在用maven+ssm做项目的时候,右键项目properities设置project facet,勾选dynamic WEB module时一直勾不上,网上找了很多教程都不行, 有说在pom.xm ...
- 集合点(lr_rendezvous)
含义: 当通过controller虚拟多个用户执行该脚本时,用户的启动或运行都不一定是同时的.集合点是在脚本的某处设置一个标记,当有虚拟用户运行到这个标记时,停下等待,知道所有用户到达这个标记处,再一 ...