微信公眾平台JS接口-WeixinJSBridge全面解析

一、WeixinJSBridge簡介

WeixinJSBridge其實就是微信公眾平台上的JS接口，它提供了許多功能，包括支付、分享、音頻、地理位置等，方便web開發者和微信公眾平台的商戶實現更多的功能。

其實，在微信公眾平台創建公眾號後，開發者就可以使用WeixinJSBridge了。如果不使用該接口，開發者將無法使用微信公眾平台的提供的其他JS接口。

下面，將對WeixinJSBridge進行詳細的講解。

二、WeixinJSBridge的通信機制

首先，當頁面加載時，WeixinJSBridge會將所有的接口注入到頁面中。開發者只需要將需要使用的接口按需調用即可。

當用戶在微信公眾號內打開網頁時，微信客戶端會注入WeixinJSBridge類，由用戶觸發事件，最終觸發JSBridge的回調。因此，在開發過程中，開發者需要注意異步執行的問題。

為了更加清晰的理解WeixinJSBridge的通信機制，下面給出一個Demo代碼：

document.addEventListener('WeixinJSBridgeReady', function() {
WeixinJSBridge.invoke(
'getNetworkType',
{},
function(res){
alert(res.err_msg);
}
);
}, false);

該代碼是從微信公眾平台官方API手冊上的示例代碼。當微信客戶端準備好WeixinJSBridge之後，就會觸發WeixinJSBridgeReady事件，然後就可以正常調用 WeixinJSBridge 其他接口了。

三、WeixinJSBridge的API介紹

1.分享接口

分享接口是WeixinJSBridge中廣泛使用的一個接口，常用於分享網頁、圖片等內容到朋友圈或者給指定好友發送消息。

下面是分享接口的使用示例代碼：

var shareData = {
title: '分享標題',
desc: '分享描述',
link: '分享鏈接',
imgUrl: '分享圖標'
}
WeixinJSBridge.invoke('shareTimeline', shareData, function(res) {
WeixinJSBridge.log(res.err_msg);
});

其中，分享數據對象（shareData）包括分享的標題、描述、鏈接以及圖片鏈接地址。然後，通過調用WeixinJSBridge.invoke方法觸發分享操作。

2.支付接口

微信公眾平台中的支付功能也是WeixinJSBridge接口中使用最廣泛的一個功能。開發者只需要設置好價格、訂單號、支付完成後的回調地址等參數即可完成微信支付。

下面是支付接口的使用示例代碼：

WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b",     //公眾號名稱，由商戶傳入
"timeStamp":"1395712654",         //時間戳，自1970年以來的秒數
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5",         //微信簽名方式：
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名
}, function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
//使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
}
});

上述示例代碼中，需要設置的參數包括公眾號名稱、時間戳、隨機串、預支付訂單號、簽名類型以及微信簽名等信息。

3.選擇圖片接口

對於需要發送圖片的應用，開發者也可以使用WeixinJSBridge提供的圖片選擇接口。通過該接口，用戶可以選擇手機中的照片，然後在網頁端實現上傳等操作。

下面是選擇圖片接口的使用示例代碼：

WeixinJSBridge.invoke('chooseImage', {
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera']
}, function(res) {
if (res.err_msg == "chooseImage:ok") {
var localIds = res.localIds;
}
});

需要設置的參數包括選擇圖片數量、圖片尺寸、圖片來源等信息。

四、WeixinJSBridge開發要點

1. 註冊事件監聽

在使用WeixinJSBridge之前，先要確保WeixinJSBridgeReady事件已經觸發。通常情況下，可以通過document.addEventListener()方法來監聽WeixinJSBridgeReady事件。

下面是代碼示例：

document.addEventListener('WeixinJSBridgeReady', function() {
// WeixinJSBridge 注入成功
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {});
}, false);

2.異步調用

在WeixinJSBridge中，很多接口都是異步調用的。在調用接口之後，需要以回調函數的形式接收返回值。

下面是代碼示例：

WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
// 獲取返回結果
alert(JSON.stringify(e));
});

3.判斷接口是否可用

有些微信JS接口只在特定版本的微信客戶端中有效。通常情況下，需要對接口進行判斷，以免在不支持該接口的客戶端上調用導致卡頓或崩潰。

下面是判斷接口是否可用的代碼示例：

if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}
else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}
else {
onBridgeReady();
}

function onBridgeReady() {
// 調用 WeixinJSBridge 接口
}

五、結語

通過本文介紹，我們了解了WeixinJSBridge的背景和使用方法，以及一些開發要點。WeixinJSBridge為web開發者和微信公眾平台提供了很多方便的接口，使得應用的開發變得更加容易和高效。