关于wx.config报错 invalid url domain 及 invalid signature 错误原因及解决方式

wx.config的初始化配置

wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.data.signature,// 必填，签名
            jsApiList: [
                 "checkJsApi",] // 必填，需要使用的JS接口列表
                });

1、 invalid url domain （错误的url）

当报错 invalid url domain时，错误原因就是url并没有在公众号设置里正确设置。

appid 是否正确（查看在微信公众平台-> 登陆公众号后台 -> 基本配置-> 开发者ID（AppID））
域名绑定是否正确（查看在微信公众平台-> 登陆公众号后台 -> 公众号设置-> 功能设置 -> JS接口安全域名）

注意：在域名绑定时，请确定绑定域名与你H5进行wx.config发起域名一致，http与https一致

2、 invalid signature （错误的签名）

当报错 invalid signature 时，错误原因是生成签名的url与当前页面的url不一致，一定要重点检查。

例如：url带参数这种情况是一定会失败的，解决方法需要前端和后端转码处理！！！

http://admin.com/?code=xxxxxx&stat=#/xxx

遇到这个报错就是url地址不一致，在调用接口获取签名时我们通过 location.href.split('#')[0] 来获取当前url地址。

vue中路由有history和hash两种模式；在history模式下，理想的设计方案是，当进入到需要用到JS-SDK组件时，获取以下当前url（也就是通过 location.href.split(‘#’)[0]获得到的地址）传递到服务端进行签名。

在我们获取当前地址传递的时候有时需要进行 encodeURIComponent(window.location.href.split('#')[0]) 编码，有的时候又不需要，因为浏览器获取时会帮我们编码，所以根据情况而定。

但是IOS获取的url并不是调用微信js的时候所在页面的地址，而是进入到网站第一个页面的地址，所以我们需要在需要获取url的页面重新刷新获取,或者将进入页面时先将当前url记录下来，到授权页面时将记录的url传递给服务端进行签名。（此方法也可用于url在ios系统中拼了参数）