var
WeixinApi = (
function
() {
return
{
ready :wxJsBridgeReady,
shareToTimeline :weixinShareTimeline,
shareToWeibo :weixinShareWeibo,
shareToFriend :weixinSendAppMessage,
showOptionMenu :showOptionMenu,
hideOptionMenu :hideOptionMenu,
showToolbar :showToolbar,
hideToolbar :hideToolbar,
getNetworkType :getNetworkType,
imagePreview :imagePreview
};
});
|
下面,我们先来看一下这些API都应该怎么使用,先从最简单的入手。
1、假如我希望一打开网页后,就隐藏掉右上角的PopUp菜单入口,并且隐藏掉浏览器下方的工具栏,同时还要获得当前的网络状态,那么,我们的代码可以这样来写:
WeixinApi.ready(
function
(Api){
Api.hideOptionMenu();
Api.hideToolbar();
Api.getNetworkType(
function
(network){
});
});
|
如示例代码中的注释所示,所有的功能执行必须放在 WeixinApi.ready 方法中执行,就好比你用jQuery的时候,通常都需要使用 jQuery(document).ready(function(){ }) 一样。为什么要这样做?相信不用我解释大家都能明白,因为我们必须要保证在执行这些方法的时候,WeixinJsBridge API已经被加入到WebView上了!
2、再来看一个有关分享的例子,假如用户在阅读我的文章(或在使用我的产品)的过程中,发现它很有意思或有价值,一般都会将其收藏或分享(给好友、朋友圈、微博等)出去,那现在我就希望能监测到用户的分享行为,比如:自定义用户可分享的内容、甚至是在用户分享之、分享被取消、分享失败、分享成功、以及整个分享操作过程结束,我们都去做点儿什么。那么,这个代码我们可以这样来写:
WeixinApi.ready(
function
(Api){
var
wxData = {
"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
() {
},
cancel:
function
(resp) {
},
fail:
function
(resp) {
},
confirm:
function
(resp) {
},
all:
function
(resp) {
}
};
Api.shareToFriend(wxData, wxCallbacks);
Api.shareToTimeline(wxData, wxCallbacks);
Api.shareToWeibo(wxData, wxCallbacks);
});
|
3、当然,如果你的业务需求相当复杂,比如,你的产品就是一个微信网页游戏(类似“”),你希望用户分享出去的数据是一个网页截屏、或者需要将用户当前的游戏状态回传到服务器动态生成可分享的内容;那么这种情况我们又该怎么做呢?来看下面这个示例代码吧:
WeixinApi.ready(
function
(Api){
var
wxCallbacks = {
async :
true
,
ready:
function
() {
var
self =
this
;
$.post(yourServerUrl,yourPostData,
function
(responseData){
var
wxData = responseData;
self.dataLoaded(wxData);
});
}
};
Api.shareToFriend({}, wxCallbacks);
});
|
唯一的区别就是在wxCallbacks中,增加了配置项async为true,表示这个分享过程是异步调用的,其实就是指的ready方法异步执行,在这种情况下,我们需要在ready方法中显式地调用wxCallbacks的dataLoaded方法,以保证分享过程能继续往下执行。也许你会发现,这个wxCallbacks中,根本就没有配置dataLoaded方法啊!是的,当async为true时,WeixinApi中我会自动对其进行初始化,dataLoaded方法需要一个参数,表示需要分享出去的数据!
4、当然,如果你非要去配置dataLoaded方法,也是没有问题的,你的配置也会被执行,不会被覆盖,执行顺序是:用户配置优先。
上面是直接给出使用方法,也许你现在开始关心每个方法的参数列表是什么样的了?我们以分享到朋友圈的方法为例,来看看参数都有哪些配置项:
WeixinApi.shareToTimeline(data,callbacks);
|
分享给微信好友以及分享到腾讯微博的参数列表都一样,这里就不罗列了。
5、如果你的文章中有很多图片,那么,点击图片直接调起微信客户端自带的图片播放组件,那必然是一件好事;对此,你可以这样来做:
WeixinApi.ready(
function
(Api){
var
srcList = [];
$.each($(
'img'
),
function
(i,item){
if
(item.src) {
srcList.push(item.src);
$(item).click(
function
(e){
Api.imagePreview(
this
.src,srcList);
});
}
});
});
|
就这么一段儿简单的代码,一切都搞定了!不过,需要指出的是,Api.imagePreview的参数是会进行强检测的:
function
imagePreview(curSrc,srcList) ;
|