微信JS-SDK和WeixinJSBridge的区别
编辑于 2021-05-26 16:30:36 阅读 7220
官方解释
使用 WeixinJSBridge 预览图片
WeixinJSBridge.invoke('imagePreview', {
current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
urls: [ // 所有图片的URL列表,数组格式
'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
]
}, function(res) {
console.log(res.err_msg)
})
实际上,微信官方是没有对外暴露过如此调用的,此类 API 最初是提供给腾讯内部一些业务使用,很多外部开发者发现了之后,依葫芦画瓢地使用了,逐渐成为微信中网页的事实标准。2015年初,微信发布了一整套网页开发工具包,称之为 JS-SDK,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户,让所有开发者都可以使用到微信的原生能力,去完成一些之前做不到或者难以做到的事情。
同样是调用原生的浏览图片,使用 JS-SDK 调用图片预览组件
wx.previewImage({
current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
urls: [ // 所有图片的URL列表,数组格式
'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
],
success: function(res) {
console.log(res)
}
})
JS-SDK是对之前的 WeixinJSBridge 的一个包装,以及新能力的释放
其他
使用 WeixinJSBridge 拉起微信支付
onBridgeReady(field) {
WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": field.appId, //公众号ID,由商户传入
"timeStamp": field.timeStamp.toString(), //时间戳,自1970年以来的秒数
"nonceStr": field.nonceStr, //随机串
"package": field.package,
"signType": field.signType, //微信签名方式:
"paySign": field.paySign, //微信签名
},
function (res) {
// if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
// }
console.log(res);
this.$router.push({path: '/order/waiting', query: {pay_no: field.pay_no}})
});
},
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(field), false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(field));
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(field));
}
} else {
this.onBridgeReady(field);
}
使用 JS-SDK 拉起微信支付
wx.chooseWXPay({
timestamp: field.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: field.nonceStr, // 支付签名随机串,不长于 32 位
package: field.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: field.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: field.paySign, // 支付签名
success: function (res) {
// 支付成功后的回调函数
console.log(res);
this.$router.push({path: '/order/waiting', query: {pay_no: field.pay_no}})
},
// 支付取消回调函数
cancel: function (res) {
console.log(res)
alert('用户取消支付~')
},
fail: function (res) {
console.log(res);
this.$router.push({path: '/order/waiting', query: {pay_no: field.pay_no}})
}
});
参考:
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#小程序简介 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4