世外天堂 > 微信JS-SDK和WeixinJSBridge的区别

微信JS-SDK和WeixinJSBridge的区别

2022-06-15

JSSDK, 微信支付

官方解释
使用 WeixinJSBridge 预览图片

1
2
3
4
5
6
7
8
9
10
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 调用图片预览组件

1
2
3
4
5
6
7
8
9
10
11
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 拉起微信支付

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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") {
       //支付成功
    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
       //支付取消
    } else if (res.err_msg == "get_brand_wcpay_request:fail") {
       //支付失败
    }
    // 使用以上方式判断前端返回,微信团队郑重提示：
    //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 拉起微信支付

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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}})
  }
});