微信支付

普通浏览器中调起微信支付的话，是无需微信授权
微信内嵌浏览器调起微信支付的话，是需要用户微信授权

最近项目比较多用到支付，所以来谈一谈支付中需要注意的问题，我们首先来看微信支付，如果是在微信环境下想要调起微信支付的话，第一步需要的是微信授权，那么如何实现微信授权呢。在我的项目中，是需要将当前页面发送给后端，后端返回一个URL 这个URL其实就是我需要授权的页面，另外URL上还拼接了code值。下一步操作，就是我从URL上取下来这个code值作为请求参数去请求接口获得openId。这个就是微信授权的一些相关操作。

 wechatAllow(){
      let wx = navigator.userAgent.toLowerCase()
      if (wx.match(/MicroMessenger/i) == 'micromessenger') {
        if (localStorage.getItem(openid)) {   //浏览器已经有openid的话就说明之前授权过，就无需重复授权
          return
        } else {
          let code = getUrlKey('code')
          if (code) {
            let userInfo = await wechatUserInfo({ code })     //根据code 请求OpenId
            localStorage.getItem(openid,userInfo.openid)      //缓存起来
            this.$store.commit('user/SET_WX', userInfo.openid)  
          } else {
            let params = {
              url: encodeURIComponent(window.location.href),
              scope: 'snsapi_userinfo',
            }
            let res = await wechat(params)
            if (res.auth_url) {
              window.open(res.auth_url, '_self')
            }
          }
        }
      } else {
        return
      }
    }

这个就是微信授权的过程啦，是不是比想象中的简单呢其实就是访问接口和信息存储的过程。完成了微信授权呢，下一步就来看看微信支付吧

payHandle(){
    let wx = navigator.userAgent.toLowerCase()
        if (wx.match(/MicroMessenger/i) == 'micromessenger') {
          Object.assign(data.searchForm, { open_id: getWeixiInfo() })
          Object.assign(data.searchForm, { source: 'wechat' })
          submitOrder(data.searchForm).then(resData => {
            // eslint-disable-next-line no-undef
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest',
              {
                appId: resData.content.appId, //公众号名称，由商户传入
                timeStamp: resData.content.timeStamp, //时间戳，自1970年以来的秒数
                nonceStr: resData.content.nonceStr, //随机串
                package: resData.content.package,
                signType: resData.content.signType, //微信签名方式：
                paySign: resData.content.paySign, //微信签名
              },
              function(res) {
                if (res.err_msg == 'get_brand_wcpay_request:ok') {
                  console.log('支付成功')
                } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                   console.log('支付失败')
                } else {
                  console.log('支付失败!')
                }
              }
            )
          })
        } else {
          Object.assign(data.searchForm, { source: 'h5' })
          submitOrder(data.searchForm).then(res => {
            window.open(res.content, '_self')
          })
        }
}

剖析了代码之后，微信支付就围绕着授权和微信配置的一些相关问题。如果是H5的项目的话，微信支付就是以上的步骤，如果是uni的项目的话是有些差别的。可以在uni官网上了解支付的相关流程 uniapp.dcloud.io/api/plugins…

支付宝支付

支付宝支付的话是不需要支付宝授权的相对于比较简单但是在微信环境内不支持支付宝支付

 submitOrder(this.form).then(resData => {  //将请求返回的resData里面的content（一般是支付参数）在页面打开就可以调起支付
    const div = document.createElement('div')
    div.id = 'payDiv'  
    div.innerHTML = resData.content
    document.body.appendChild(div)
    document
      .getElementById('payDiv')
      .getElementsByTagName('form')[0]
      .submit()
  })

以上的支付就是我在项目中接触到的一些支付需求和实现，如有不足欢迎补充~

移动端中应该如何接入支付

微信支付

支付宝支付