微信H5开发wx.config授权invalid signature

微信H5（公众号）开发过程中，遇到了wx.config失败的情况，造成的原因在此记录一下，也为各位提个醒。

打开wx.config的debug选项，会在配置后弹框提示配置结果，如果提示errMsg：config ok，这是正确的，有同事以为errMsg就是错了，其实是不正确的。关键要看后面的提示。

一、一般来说“invalid signature”出现的情况比较多，会影响的因素也比较多，官网也给出了解决方案，参考官方

概述 | 微信开放文档

我将以自己的理解总结下：

1. 需要在公众号的开发者账号下设置js接口安全域名，只填域名即可，不用带http://或https://。
2. 生成signature的方式最好由后台提供接口，需要传递url参数。如果前端路由是hash模式，需要传递“#”之前的内容，如果是history模式，传递当前路径的全路径即可。encodeURIComponent(location.href.split('#')[0]) 就可满足。注意如果前端转码，则接口一定要解码。wx.config在进入系统后执行一次即可，无需每个页面都config。
3. wx.config中个别属性要注意大小写，如nonceStr，timestamp等。
4. 确保2中的url是动态获取的，官网也在【6】中提及，有同事配置时其他都正确，就是把config的url固定写死了，也会配置失败。
5. 像操作菜单项的功能，一定要在测试环境中运行检查，不要在开发环境下，而且一定要把测试地址发到（随便的）公众号下，通过点击公众号下的地址测试才可能看到效果。
6. 如果以上都没问题，尝试验证signature是否正确，看看接口的逻辑是不是写错了。

二、还有“permission denied”的情况，最好是检查一下config下jsApiList参数和官网提供api名称是否一致。

如果是invalid signature 后又提示的 permission denied，那属于没config成功，参考【一】中的思路检查即可。