H5微信支付 - 技术栈

书接上回，前段时间有写支付相关的业务，埋点vue前端埋点可，自然必不可少，就拿出来做以分享，便于下次摘抄哈哈，当然技术"装"到肚子里就是自己的 --- 莎士笔亚曾经说过。

看标题，没错这次咱看看 h5微信支付的接入先看下微信官方大大怎么说：

css 复制代码

  H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，
商户发起本服务呼起微信客户端进行支付。 主要用于触屏版的手机浏览器请求微信支付的场景。可以
方便的从外部浏览器唤起微信支付。

请看官方给出的H5支付接入前准备，不着急慢慢消化，如果准备好可跳过直接掠过。

大致流程如下，当然这是微信小程序官网提供的支付流程，大概看下有个初步印象。

网页授权微信登录：

详细可阅读网页授权 | 微信开放文档

唤起微信支付的前提是要

引导用户进入授权页面同意授权，获取code
通过code换取网页授权access_token（与基础支持中的access_token不同）
如果需要，开发者可以刷新网页授权access_token，避免过期
通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

perl 复制代码

https://open.weixin.qq.com/connect/oauth2/authorize?
appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STA
TE#wechat_redirect

redirect_uri这个参数就是需要重定向的链接，
什么是重定向：就是当自己的项目页面，执行【微信登录】需要跳转到微信的页面，然后微信根据你传的
redirect_uri里面的值，等待微信获取code执行登录成功之后，再跳转回来的页面链接

注意⚠️：在项目中会有很多地方校验是否授权登录，所以我们都会封装一个专门的函数过于判断,重定向的链接需要使用encodeURIComponent加密，重定向的链接需要将其父级目录，在微信支付平台的开发配置中添加一下链接，举例重定向链接是//www/父级/子级,在微信支付的开发配置中可以添加链接为：//www/父级/

完整的链接是 https://open.weixin.qq.com/connect/oauth2/authorize? erinfo&state=123#wechat_redirect

scss 复制代码

   ```
   // 献丑了各位
 function  fn(_that, routeUrl) {
  return new Promise((resolve, reject) => {
// 判断当前在什么环境
if (isAPP) {
  if (getToken()) {
    resolve()
  } else {
    _that.$Toast('请重新登录')
  }
} else {
  if (_that.$route.query.schoolId) {
   * 校验本地存储的school_id和正确的school_id是否一致
    checkAndSetSchoolId(_that.$route.query.schoolId)
  }
  // 有code 直接请求
  if (!storage.getItem('wxInfo') && _that.$route.query.code) {
  // 走登录流程
    _toHandleLogin(_that, resolve)
  } else {
    // 去登陆
    judgeLogin(resolve, routeUrl)
  }
}
  }).catch(error => {
    throw error
  })
}
   
   ```

在这之前需要自行和服务端处理生成订单的单号，需要注意的还有用户生成了订单，但是没有支付这个点，一般都是固定时间内然后重新生成新的订单，在这之前还需要判断用户是否已有生成订单。

支付固定代码块：

kotlin 复制代码

    /**
     * @message: 微信支付
     * @Return:
     */
    openWeXinpay () {
         // h5 支付
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        this.onBridgeReady()
      }
    },
    onBridgeReady () {
      /* eslint-disable */
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: this.payData.appId, // 公众号ID，由商户传入
          timeStamp: this.payData.timeStamp, // 时间戳，自1970年以来的秒数
          nonceStr: this.payData.nonceStr, // 随机串
          package: this.payData.package,
          signType: this.payData.signType, // 微信签名方式：
          paySign: this.payData.paySign,
        },
        function(res) {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            // this.$router.push('/')
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }
        },
      )
    },

支付完成之后，还涉及到完成回调页面，返回链接，及是否开启商家小票等等系列问题。