微信支付web开发遇到的一些坑

一、本地环境

支付测试需要外网

      方法1、ngrok 内网穿透工具,由于ngrok是国外产品，访问比较慢，建议使用NATAPP(基于ngrok高速内网穿透的服务)https://natapp.cn/

      方法2、 QQ浏览器9.0以上版本，打开应用中心，搜索“微信调试工具”并安装插件，直接输入端口点击启动服务，然后就可以在外网访问了。

---

二、相关的域名设置

      1、支付目录设置

经过反复测试，发现微信公众平台-微信支付-开发配置 中测试授权目录 一定要配置到最后一层

      2、授权回调权限域名设置

公众平台–》开发–》接口权限–》网页授权获取用户基本信息–》修改 输入域名即可（只需输入 www.XXX.com.cn）

      3、JS接口安全域名设置

公众平台–》设置–》功能设置–》JS接口安全域名。 同上，只需输入www.XXX.com.cn

---

三、各种坑及解决方案

      1、error: invalid signature

wx.config({
         debug: false, // 开启调试模式
         appId: weixin.appid, // 必填，公众号的唯一标识
         timestamp: weixin.timeStamp, // 必填，生成签名的时间戳
         nonceStr: weixin.nonceStr, // 必填，生成签名的随机串
         signature: weixin.signature,// 必填，签名，见附录1
         jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

以上代码是通过config接口注入权限验证配置,当弹出error:invalid signature错误时,很明显是signature错误, signature 的值是用多个参数 sha1 加密的结果,其中特别需要注意的是access_token是通过appid + appsecert来获取的，不是用户的access_token

      2、”errMsg”:”chooseWXPay:fail”

//调用支付页面
wx.ready(function () {
            // config信息验证后会执行ready方法
            wx.chooseWXPay({
                   timestamp: weixin.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                   nonceStr: weixin.nonceStr, // 支付签名随机串，不长于 32 位
                   package: weixin.pageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                   signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                   paySign: weixin.paySign, // 支付签名
                   success: function (res) {
                       // 支付成功后的回调函数
                       alert("pay success");
                   },
                   cancel: function (res) {　　　　　　　　　　　　　　// 支付取消回调函数
                        alert('cencel pay');
                   },
                   fail: function (res) {　　　　　　　　　　　　　　// 支付失败回调函数
                            alert('pay fail');
                            alert(JSON.stringify(res));
                        }
                    });
});

这个问题除了除了注意前面的支付授权目录外，一定注意一下签名是否有误,详情请参考https://mp.weixin.qq.com/wiki/home/index.html

---

参考链接:http://www.mobile-open.com/2016/105072.html