微信WeixinJSBridge的接口使用

以下都要包含weixinApi.js(见底部git里的js文件)

1)、分享

WeixinApi.ready(function(Api) {

    // 微信分享的数据
var wxData = {
"appId": "", // 服务号可以填写appId
"imgUrl" : 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
"link" : 'http://www.baidufe.com',
"desc" : '大家好,我是Alien,Web前端&Android客户端码农,喜欢技术上的瞎倒腾!欢迎多交流',
"title" : "大家好,我是赵先烈"
}; // 分享的回调
var wxCallbacks = {
// 分享操作开始之前
ready : function() {
// 你可以在这里对分享的数据进行重组
alert("准备分享");
},
// 分享被用户自动取消
cancel : function(resp) {
// 你可以在你的页面上给用户一个小Tip,为什么要取消呢?
alert("分享被取消");
},
// 分享失败了
fail : function(resp) {
// 分享失败了,是不是可以告诉用户:不要紧,可能是网络问题,一会儿再试试?
alert("分享失败");
},
// 分享成功
confirm : function(resp) {
// 分享成功了,我们是不是可以做一些分享统计呢?
//window.location.href='http://192.168.1.128:8080/wwyj/test.html';
alert("分享成功");
},
// 整个分享过程结束
all : function(resp) {
// 如果你做的是一个鼓励用户进行分享的产品,在这里是不是可以给用户一些反馈了?
alert("分享结束");
}
}; // 用户点开右上角popup菜单后,点击分享给好友,会执行下面这个代码
Api.shareToFriend(wxData, wxCallbacks); // 点击分享到朋友圈,会执行下面这个代码
Api.shareToTimeline(wxData, wxCallbacks); // 点击分享到腾讯微博,会执行下面这个代码
Api.shareToWeibo(wxData, wxCallbacks);
});

2)、隐藏右上角option menu入口

WeixinApi.ready(function(Api) {
// 隐藏
Api.hideOptionMenu(); // 显示
// Api.showOptionMenu();
});

3)、隐藏底部工具栏

WeixinApi.ready(function(Api) {
// 隐藏
Api.hideToolbar(); // 显示
// Api.showToolbar();
});

4)、获取当前的网络类型

WeixinApi.ready(function(Api) {
Api.getNetworkType(function(network){
/**
* network取值:
*
* network_type:wifi wifi网络
* network_type:edge 非wifi,包含3G/2G
* network_type:fail 网络断开连接
* network_type:wwan 2g或者3g
*/
});
});

5)、调起客户端图片播放组件

WeixinApi.ready(function(Api) {
// 需要播放的图片src list
var srcList = [src1, src2, ..., srcN];
// 选一个作为当前需要展示的图片src
var curSrc = src1;
// 调起
Api.imagePreview(curSrc, srcList);
});

调起客户端图片播放组件,还有一种更屌的方法,不需要依赖这个WeixinApi,直接a标签实现就行,具体格式:

<a href="weixin://viewimage/`YourImageURL`">AnyThing</a>

我们可以用A标签来嵌套这个img,具体Demo如下:

<a href="weixin://viewimage/http://www.baidu.com/img/bdlogo.gif">
<img src="http://www.baidu.com/img/bdlogo.gif">
</a>
<a href="weixin://viewimage/http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
<img src="http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
</a>

6)、关掉当前微信公众页面窗口

WeixinApi.ready(function(Api) {
// 关闭窗口
Api.closeWindow();
});

以上都经过我的测试,完全可以使用哦。

Git:https://github.com/lx65978930

检测微信WeixinJsBridge其他接口

  /**
* 检测微信JsAPI
* @param callback
*/
function detectWeixinApi(callback){
if(typeof window.WeixinJSBridge == 'undefined' || typeof window.WeixinJSBridge.invoke == 'undefined'){
setTimeout(function(){
detectWeixinApi(callback);
},200);
}else{
callback();
}
} detectWeixinApi(function(){
var html = [];
for(var key in window.WeixinJSBridge) {
var js = 'WeixinJSBridge.' + key + ' = ' + window.WeixinJSBridge[key].toString();
js = js_beautify(js); // 美化一下,看着舒服些
html.push('<pre class="brush:js;toolbar:false;">' + js + '</pre>')
} document.getElementById('WeixinJsApi').innerHTML = html.join(''); // 代码高亮
SyntaxHighlighter.highlight();
});
上一篇:C#基础:事件(一) 【转】


下一篇:springboot整合druid连接池、mybatis实现多数据源动态切换