移动端微信支付

需求: 移动端打开网页可以直接点击支付唤起微信支付
主要分两种情况，一种是微信内打开网页链接，一种是手机其他浏览器打开网页链接

微信内置浏览器打开网页链接 （JSAPI支付）

相关配置可参考 官方文档介绍
前后端开发可参考 官方API

1. 授权

后端下单是需要支付者信息的，所以需要用户先通过微信的授权，来获取code

// 我在页面初始化的时候，会判断有没有code，如果没有code，我会执行下面的逻辑来获取code

// 微信 appId
const appId = 'wx11ef22edf21639f9'
// 回调地址 注意需要 https 并且 encodeURIComponent
const redirect_url = 'https://www.xxxxx.com'
const final_url = encodeURIComponent(redirect_url)
const openUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${final_url}&response_type=code&scope=snsapi_userinfo#wechat_redirect`
window.open(openUrl, '_self')

2. 调用后端接口生成订单

我这里直接将code传递给后端来生成订单，同时后端会返回给我微信支付所需要的参数

// 调用后端的接口来生成订单
const res = await postApi<IOrderCreated>('/xx/xx/xx')

// 执行微信支付
WeixinJSBridge.invoke(
      'getBrandWCPayRequest',
      {
        appId: res.app_id, // 公众号ID，由商户传入
        timeStamp: res.timestamp, // 时间戳，自1970年以来的秒数
        nonceStr: res.nonce_str, // 随机串
        package: res.package,
        signType: 'RSA', // 微信签名方式：
        paySign: res.pay_sign,
      },
      async function (res: any) {
        // 执行支付成功的回调
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          // 调用后端接口
          await getStatus(res.oid)
          window.open('https://www.xxxxx.com', '_self')
        }
      }
    )

手机其他浏览器打开网页链接（H5支付）

1. 调用后端接口拿到打开微信支付所需要的url

// 调用后端的接口来获取url
const res = await postApi<IOrderCreated>('/xx/xx/xx')
// 回调地址 注意需要 https 并且 encodeURIComponent
const redirect_url = 'https://www.xxxxx.com'
const final_url = encodeURIComponent(redirect_url)
const url = res.wx_url + `&redirect_url=${encodeURIComponent(final_url)}`
window.open(url, '_blank')

2. 回调回来之后，代码不会触发自动查单

也就是说在vue里面的页面初始化生命周期里面的代码都没有执行
解决方案：参考官方文档添加二次查单的弹窗, 点击才去查询订单是否支付完成。

3. IOS其他的浏览器H5支付后会 自动打开safari浏览器打开回调地址

问题：这样会导致之前用户是登录状态，但是safari打开后就不是登录状态了。导致查询订单失败
解决方案：我这边是把 token 放在回调地址中，然后当用户点击查询订单的时候，通过回调地址中的 token 去调用查询用户信息的接口，再把相应的用户信息设置进去。 最后再执行查询订单接口。