微信支付方式

1.浏览器内的微信支付

这个相对微信内部的支付，前端的步骤会少一些。
地址栏的参数一定要经过转码
参数不识别&符号，我们解决的方法是‘，’隔开，依次获取
下单时直接调取后台给的支付接口即可

util.api({
  url: url,
  headers:{
      token: util.getCookie('token')
  },
  data: data,
  type:'post',
  dataType:'json',
  success:function(res){
    if(res.rpco == 200){
      let data = id+','+opt.id+','+encodeURIComponent(token)+','+ encodeURIComponent(res.url);
      //跳转微信
      let redirect_url = 'order_good.html?data='+data;
      util.href(res.url+'&redirect_url='+encodeURI(redirect_url));
      //支付失败重新支付时的跳转地址,由接口返回
      opt.pay_url = res.rpbd.url;
  }
})

微信内部的h5支付
1）在公众平台的相关配置：（一般开发时找PM即可，但不排除PM对这些不懂~那么呵= =，那就等着加班吧）
- 在公众平台配置appid，开通支付功能；
- 公众平台配置商户号，并绑定相应appid，与上面的appid保持一致
- 配置网页授权的回调url（注意这里只需填写域名），也就是获取code之后的redirect_uri地址的域名
- 配置支付的回调页面地址，（注意地址要求是具体页面的上一级目录）
2）根据官方文档获取code
url一定要encode转码
state可以是你想要传的参数,但必须是字母或者数字
scope=snsapi_userinfo，获取用户的头像跟昵称等信息，需要手动授权
scope=snsapi_base，为静默授权用户无感知，但只能得到openid

'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&' + 'redirect_uri=url&response_type=code&scope=snsapi_userinfo&state=1&' +
 'connect_redirect=1#wechat_redirect'

3）根据code获取openid/ 用code换取assess_token，再获取openid
不管那种方法，获取openid都需要存储在服务器端
4）拿到openid之后，调取后端下单的接口（openid为必传参数）
5）调起微信支付，里面的参数是在上一步接口会返回

function onBridgeReady() {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId":  "", //公众号名称，由商户传入     
            "timeStamp": + new Date(), //时间戳，自1970年以来的秒数     
            "nonceStr": "", //随机串     
            "package": "prepay_id=u802345jgfjsdfgsdg888",//一般接口返回时会拼接好
            "signType": "MD5", //微信签名方式：     
            "paySign": "" //微信签名 
        },
        function(res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                callback && callback(res);
            } else {
                Toast('支付失败');
            }
        });
}
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();
}

ps，吐槽一下
微信支付调试会比较坑，无法在微信开发者工具进行调试，更别说浏览器了 👀
不知道大佬们都怎么调试的？讨论讨论 ~
我的调试也是经过跟同事各种研究，最后利用nginx+抓包+手机代理 😂，一步步alert，前进着～～最后，终于支付完成～～

最后编辑于：2019.05.29 19:14:14