微信公众号H5支付（前端部分）笔记

说明

本文试图说明的是在微信环境中、前端部分调起H5支付的场景，需要区别于一般H5浏览器中调起和纯公众号内调起的场景。
前期准备：公众号支付开发步骤
文档地址：微信内H5调起支付
请自行区别于：H5支付

步骤

1. 开发之前：

参考资料：公众号支付介绍

首先需要一个类型为服务号（政府或媒体订阅号）并完成微信认证的公众号；
提交资料为这个公众号申请一个商户账号，并通过审核；
用申请商户账号的微信登录微信商户平台，
账户设置->API安全，依次下载安装安全控件和操作证书。
注意：每次安装后需要重启浏览器重新登录。另外在Mac系统上，仅支持使用Safari，不能使用Chrome。
用申请商户账号的微信登录微信商户平台，产品中心->我的产品，开通“公众号支付”功能。
请记录公众号的appId、appSecret，商户账号的mch_id（纯数字）、API密钥key。

2. 微信中的安全域名设置：

在微信公众号中，公众号设置->功能设置->网页授权域名，需要加入支付页面的域名。格式类似：“wechat.meiyue.com”，不需要协议名，不需要斜杠结尾，不需要二级目录。
在商户平台中，产品中心->开发配置->支付配置->公众号支付->支付授权目录，需要添加支付页面的域名。格式类似：“http://wechat.meiyue.com/”，需要选择协议，需要以斜杠结尾，不需要二级目录。这一设置更新后在10分钟内生效。

3. 流程整理

为了获得公众号的授权，微信要求不能直接将网址发给用户，而要发出一个经过公众号处理的网址，而真实网址则作为redire_url发出。微信规定的网址为：
```
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${true_url}&response_type=code&scope=${'snsapi_userinfo'}&state=${STATE}#wechat_redirect`
```
其中：
- true_url：支付页面的实际地址；
- scope：如果仅需要用户的open_id，可以使用snsapi_base静默授权，否则使用snsapi_userinfo；
- state：可选参数，可以带到实际网页中的参数，需要进行URI转码。希望获取?order_id=123，需要写成state=${encodeURIComponent('order_id=123')}，实际页面拿到的字符为：&state=order_id%3D123，然后需要在页面自行提取。
用户点击微信重定向网址后，经过确认授权或静默授权，跳转到实际支付页面，同时获取到公众号提供的CODE。网址格式类似于：
```
'http://wechat.meiyue.com/meiyue/weChatPay.html?code=081OfePZ0VzkRZ15uNRZ0MRaPZ0OfePI&state=order_id%3D123'
// `${true_url}?code=${CODE}&state=${STATE}`
```
一堆请求的流程说明：
在页面中，需要用code请求用户的open_id，再用open_id交给服务器发起订单或查询订单，换取订单信息prepay_id。
（实际操作中，因为open_id请求prepay_id的行为只能由服务器发起，所以这里的处理是前端向服务器发送code，由服务器进行请求，最后返回订单信息。）
参考资料：微信网页授权
如果不需要用户的具体信息（用户名头像什么的），到文档第三步就OK了。
页面中的处理：weChatPay.html
如果不使用微信环境，则需要在页面中引入微信JS-SDK脚本，自行配置config，然后才能使用微信提供的接口。
而在当前场景中，微信浏览器中已经注入了相关代码，直接使用就好：

wechatPay.html中的示例代码

// 后端提供的订单信息：
let data = {...}

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
          "appId": data.appid, //公众号名称，由商户传入 ok
          "timeStamp": data.timestamp, //时间戳，自1970年以来的秒数 ok    
          "nonceStr": data.noncestr, //随机串     
          "package": "prepay_id=" + data.prepayid,
          "signType": "MD5", //微信签名方式    
          "paySign": data.sign //微信签名 
        },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        console.log('支付成功！')
      } 
   }); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

遇到的问题：

1. 关于微信开发者工具

网页跳转可以使用微信开发者工具测试，但是最后的调起支付方法不能测。控制台报错：errMsg:"chooseWXPay:fail, the permission value is offline verifying"，翻译过来是不能离线授权。这很正常，微信开发者工具没有钱包。

2. 支付签名错误

需要检查的地方有：

前后端使用的参数名大小写是否一致？
公众号支付中使用驼峰写法（appId），而H5中使用小写（appid）。
使用的信息是否一致？
一个公众号可以注册多个商户号，请检查基本信息是否一致。
后端计算的签名是否正确？
微信支付接口签名校验工具
 微信公众平台支付接口调试工具

3. 当前页面的URL未注册

肯定是授权域名、安全域名什么的写错了，请返回上文中的“ 2. 微信中的安全域名设置”。当然也有可能是配错了公众号或商户号。