Vue调用小程序的微信支付

实现思路:

通过H5调用小程序的方法跳转到小程序的一个新的支付页面,并传相应的需要支付的参数过去,支付页面直接调起支付,成功后返回原先的页面

步骤一: 获取JSSDK授权

传送门: vue获取微信JSSDK授权

步骤二: 统一下单之后,提交支付跳转到小程序的支付页面

统一下单: 调用下单接口,去后台提交订单,然后将返回的订单信息保存下来.

在vue里面,调用miniProgram.navigateTo()跳转到小程序支付页面 -- webPay.wxml.

//order.vue
//用encodeURIComponent编码一下,不然有些符号传过去有问题,会出错
let options = encodeURIComponent(JSON.stringify(options))
this.$wx.miniProgram.navigateTo({
  url: '/pages/webPay/webPay?wxPayOptions=' + options
})

跳转到小程序新的页面,在onLoad里面直接调用小程序支付,将参数传过去即可,支付成功或失败的相应回调做你想做的事,为所欲为,哈哈哈哈

//webPay.js
onLoad: function(options){
    //解码原先的参数
    let {
      timeStamp,
      nonceStr,
      packageInfo,
      signType,
      paySign,
      classId,
    } = JSON.parse(decodeURIComponent(options.wxPayOptions));
    //调起微信支付
    wx.requestPayment({
      timeStamp,
      nonceStr,
      package: packageInfo,
      signType,
      paySign,
      success: (res) => {
        wx.redirectTo({
          url: '/pages/webviewpage/webviewpage?classId='+classId,
        });
      },
      fail: err=>{ ... }
    });
}

最后在webviewpage的页面跳转路径改为要去的路径即可

总结:

写的时候感觉好像还写了挺多,这上面咋就都没啥呢,尴尬.