公众号H5中wx.config()踩坑

Posted 2023-05-03

参考技术A

微信公众号H5在配置微信参数的时候提示 config:fail,Error: 系统错误错误码63002,invalid signature ，表示签名有问题。签名的影响因素很多，但对于前端，最大的影响因素就是url参数要给对。url参数需要注意的两个点：

1.需要公众号安全域名配置

[公众号平台 => 设置与开发 => 公众号设置 => 功能设置 => JS接口安全域名]

注意配置的时候不需要加http和结尾斜杠！

2.url 不能写死，哈希部分不要，其他的包括参数全部都要传给后端。

签名这种是后端给的，但是前端也可以通过一些其他的方式自己算出签名：
1.从[公众号平台 => 设置与开发 => 开发 => 基本配置]获取开发者ID(AppID)和开发者密码(AppSecret)

2.通过微信公众平台接口调试工具（ https://mp.weixin.qq.com/debug/cgi-bin/apiinfo ）获取access_token

3.获取jsapi_ticket（ https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi ）

4.使用微信 JS 接口签名校验工具（ https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign ）计算签名

最后生成的签名和其他参数在wx.config()中调试即可。

JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

微信公众号支付功能

需要的js
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>


wx.config({
                                debug: true, // 开启调试模式
                                appId: data.data.appId, // 公众号的唯一标识
                                timeStamp: data.data.timeStamp, // 生成签名的时间戳
                                nonceStr: data.data.nonceStr, // 生成签名的随机串
                                signature: data.data.paySign, // 签名
                                jsApiList: [‘chooseWXPay‘] // 填入需要使用的JS接口列表，这里是先声明我们要用到支付的JS接口
                            });    


function onBridgeReady() {
                WeixinJSBridge.invoke(
                    ‘getBrandWCPayRequest‘, {
                        "appId": appId, //公众号名称，由商户传入     
                        "timeStamp": timestamp, //时间戳，自1970年以来的秒数     
                        "nonceStr": nonceStr, //随机串     
                        "package": package,
                        "signType": signType, //微信签名方式：     
                        "paySign": signature //微信签名 
                    },
                    function(res) {

                        if(res.err_msg == "get_brand_wcpay_request:ok") {
                            alert(‘支付成功‘);

                            //支付成功后跳转的页面
                        } else if(res.err_msg == "get_brand_wcpay_request:cancel") {
                            alert(‘支付取消‘);

                        } else if(res.err_msg == "get_brand_wcpay_request:fail") {
                            alert(‘支付失败‘);
                            WeixinJSBridge.call(‘closeWindow‘);
                        } //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。

                    });
            }