整理h5进行微信支付的注意事项

前言

　　微信支付流程比支付宝的复杂的多限制也多，尤其是当你有多个公众号多个openid的时候，如何合理规划是非常重要的一环。我们首先需要在微信公众号申请开通微信支付功能，然后在用户进入我们页面时就触发授权（分为静默授权和手动授权），授权成功之后，拿到openid就可以进行创建订单--支付--页面回调。

 

首先是授权

　　我们刚进入页面的时候需要调后端接口来判断用户之前是否有授权（openid）操作？如果没有的话就触发微信授权，也就是获取openid的接口没有返回openid，此时后端会返回一个url给我们前端，我们拿到这个url，进行 if (wxUrl.value) window.location.href = wxUrl.value 来触发用户的静态或者手动授权，授权成功之后，微信会跳转回我们页面并携带我们需要的code拼接到url上（用户是没有感知到页面跳转），此时我们只需要在页面做参数判断，如果进入该页面时参数携带了?code=***，我们就触发后端的创建openid的api，拿到openid之后，就可以在后面需要进行用户充值的页面进行充值操作，如果用户不充值也没关系，因为openid是永久的，以后客户想充值就不再需要授权行为。

 

其次是充值操作（注意在微信里面的h5调其他充值方式：如支付宝会不成功，需要用浏览器，此时需要隐藏其他充值方式）

　　第一步引入'weixin-js-sdk'，最好单独写一个Index.ts

import wx from 'weixin-js-sdk'

export default {
  // 获取微信支付SDK的签名
  getWxPaySign (params:any) {
    wx.config({
      debug: false,
      appId: params.app_id,
      timestamp: params.time_stamp,
      nonceStr: params.nonce_str,
      signature: params.pay_sign,
      jsApiList: [
        'chooseWXPay'
      ]
    })
  },
  // 发起微信支付
  wxPay (params:any) {
    return new Promise((resolve, reject) => {
      // 调用微信支付
      wx.chooseWXPay({
        timestamp: params.time_stamp,  
        nonceStr: params.nonce_str,  
        package: params.package,  
        signType: params.sign_type,  
        paySign: params.pay_sign,  
        success: (res) => {
          // 支付成功时返回resolve
          resolve(res)
        },
        fail: (err) => {
          // 支付失败时返回reject
          reject(err)
        }
      })
    })
  }
}

　　第二步，在用户创建订单的时候拿到返回的参数，并调用wxPay.getWxPaySign(data) 来获取微信支付SDK的签名

　　第三步，调用wxPay.wxPay

wxPay.wxPay(e).then(() => {
        showToast('支付成功')
    }).catch(() => {
        showToast('支付失败')
    })

　　此时就可以完成充值操作。

 

补充另一种非官方承认的直接在app内嵌h5唤起的微信充值方式

window.location.href = `weixin://wap/pay?${encodeURIComponent(url)}`

　　这种方式和支付宝的 window.location.href = `alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(e.url)}` 非常像，alipays://platformapi/startapp是打开支付宝，而weixin://wap/pay 则是打开微信，但是因为这种方式微信官方不承认有，所以一般情况我们不会用，我查资料是之前微信官方的demo被人查看到这段代码，并成功使用才传出的，但微信官方貌似出于安全角度还是什么的不承认有这种方式。

　　亲测可以唤起微信支付，但由于官方不承认，为了避免风险，我们公司是不让用的。