手机端微信支付流程

官方文档
1、准备工作

• 公众号后台需要配置网页授权域名,
• 微信支付后台JSAPI支付需要配置授权目录

2、上面的准备还需要根据你的支付类型进行配置，具体的还得看官方文档，
3、微信支付类型一共分7种：手机微信里面打开直接支付的jsApi、手机浏览器打开h5界面吊起手机微信支付的H5支付、PC端浏览器打开显示张收款二维码的Native支付，另外还有小程序支付、app集成sdk，需要硬件支持的付款码支付和人脸支付。下面主要讨论的是前三种。

• jsApi

开发流程

1、先使用网页授权获得code值
let redirectURI = encodeURIComponent(URIString)     // url需要encode
window.location = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + response.data.data.jsapiAppId + '&redirect_uri=' + redirectURI + '&response_type=code&scope=snsapi_base&state=WXPaySTATE#wechat_redirect'
[注]网页授权分两种形式，i.弹窗授权snsapi_userinfo ii.静默授权snsapi_base，上面链接代码执行以后浏览器的地址改变，会将得到的code值反馈在地址中，也即code的值。
2、通过code值向后台获取配置信息，包括appId、timeStamp、nonceStr、package等信息
(需要注意的是这些参数的大小写，别搞错了。)
3、上述步骤拿到参数后就可以直接调用jsApi的方法发起付款请求

[注]：因h5页面在手机上打开的场景有两种：a.微信 b.手机浏览器，在发起付款请求的时候需要判断浏览器的类型，可以通过下面的方式：

let ua = navigator.userAgent.toLowerCase();
let isWeixin = ua.indexOf('micromessenger') != -1; 

另外支付的api最好是封装一下：

export function jsSDK (params) {
// 这部分的代码是因为在实际的使用过程中发现jsApi的执行存在异步性，有时并不能获取WeixinJSBridge属性
  if (typeof window.WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(params) }, false)
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', function () { onBridgeReady(params) })
      document.attachEvent('onWeixinJSBridgeReady', function () { onBridgeReady(params) })
    }
  } else {
    onBridgeReady(params)
  }
}
function onBridgeReady (params) {
  window.WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      'appId': params.appId, // 公众号名称，由商户传入
      'timeStamp': params.timeStamp, // 时间戳，自1970年以来的秒数
      'nonceStr': params.nonceStr, // 随机串
      'package': params.package,
      'signType': params.signType, // 微信签名方式：
      'paySign': params.paySign // 微信签名
    },
    function (res) {
      location.href = params.Url // 支付成功跳转路径
    }
  )
}

• native
  这个比较简单，前端只需要传订单id给后台，然后后台返回一个base64的图片资源，显示出来即可。
• H5支付
  这个其实也比较简单，前端将数据回传给后台后，后端返回一个mweb_url地址，前端需要window.top.location.href = mweb_url即可，此处需要再真机中调试，否则会出现referer为空的报错。

需要说明的是：调试过程中需要更改hosts，其中打开链接跳转的那个比较头疼，最好是使用微信推荐的沙盒测试接口。

目前就上面的这些，后面如果还有后续业务再做总结。