一、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开发者和微信公众平台提供了很多方便的接口，使得应用的开发变得更加容易和高效。
