最近在搞微信公众号开发，进行到网页开发部分被坑了一天，最坑的问题就是invalid signature，而网上大部分解答这个问题的都没有说清楚，都直接丢文档。博主认为这样很不好。本文是博主结合自身遇到的问题所写，整个流程跟问题都很详细，虽然排版可能有点不好。但是绝对对遇到类似问题的朋友有所帮助。请认真看下去
一、绑定JS接口安全域名
生产号绑定方法：登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
测试号绑定方法：进入测试号管理页面，找到JS接口安全域名项绑定
JS接口安全域名官方说法是：开发者可在该域名下调用微信开放的JS接口
域名格式：如果你的项目域名是,那么JS接口安全域名为test.domain.com。切记！
域名绑定失败或者域名不存在会报错误：invalid url domain
二、引入微信js文件
引入方法：在需要调用JS接口的页面引入JS文件，用script标签引入即可
JS文件路径：（支持https）
三、通过wx.config接口注入权限验证
1、每个需要使用jssdk的页面都要使用config接口注入配置信息，wx.config调用方法如下：
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳，精确到秒 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [] // 必填，需要使用的JS接口列表，例如：['chooseImage','previewImage','uploadImage'] })
其中appId,timestamp,nonceStr,signature必须从后台获取
四、后台生成并返回前端所需参数
1、jsapi_ticket
jsapi_ticket是公众号用于调用js接口的临时票据。有效期7200秒，跟公众号普通access_token一样，必须全局缓存起来，因为这个ticket获取次数有限，超过次数将无法使用。建议设置缓存时间为7198秒，因为当请求微信端生成jsapi_ticket返回给后台保存这个动作需要时间，如果设置7200秒，实际上最后一两秒时，缓存里面还存在，但实际在微信那边已经过期了，再拿这个ticket会出错。生成jsapi_ticket如下：
(1)获取普通access_token(GET请求):
(2)用第一步获取的access_token使用GET请求获取jsapi_ticket
正确获取信息如下：
{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 }
2、生成签名（signature）
签名规则：
1、参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。
2、对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序，sort()即可）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串（string）。
3、使用sha1加密拼接成的字符串string。
注意：字段名和字段值都要使用原值，不要进行url转义
参与的字段示例：
noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value
拼接完成的字符串：
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
使用sha1加密后的signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
3、签名生成完后将appId、timestamp、nonceStr、signature一起返回到前端。格式示例：
{ appId:appId, timestamp:timestamp, nonceStr: noncestr, signature: signature }
前端拿到值后，写入到wx.config中相应字段即可
注意：
1、前端wx.config配置中的nonceStr字段名称的's'是大写。但是后台生成签名的noncestr字段的‘s'是小写，千万要注意，博主在这里浪费了不少时间。囧囧
2、时间戳(timestamp)值要记住精确到秒，不是毫秒。
3、生成签名的url(使用jssdk的页面地址，这个页面地址可以在浏览器访问)，包含“？”号后面的所有参数，不包含“#”号后面的值。
如果是静默授权或者授权页面同意授权后跳转到的页面，页面路径会添加两个参数：code和state。
即授权后跳转页面为，则完整路径为
?code=kdijafdhjaikeiu20kaiela&state=STATE。
那么生成签名的url必须为授权后跳转页面的完整路径。前端获取这个路径：location.href.split('#')[0]
注意注意：这里有个大坑。。如果前端使用ajax(使用jquery)获取wx.config配置所需的几个参数的值，可以这样做：