最近在做微信公眾號開發，進行到網頁開發部分被坑了兩天時間，一直遇到的問題就是invalid signature，而網頁上的大部分解決這個問題都是把流程再走一遍，很尷尬，耽誤了好長時間。接下來是我總結的我在使用微信JSSDK的整個流程和問題。
一、綁定JS接口安全域名
1.生產號綁定方法：登錄微信公眾平臺進入“公眾號設置”的“功能設置”里面填寫“JS接口安全域名”。
2.測試號綁定方法：進入測試號管理頁面，找到JS接口安全域名項綁定。
JS接口安全域名官方法是：開發者可在該域名下調用微信開放的JS接口。
域名格式：如果你的域名是：http://91shou.com，那么JS接口安全域名為91shou.com。切記！
綁定的時候域名一定是CPU備案過的，微信為了驗證域名是你們自己的，還需要在域名下放入一個指定的文件，不一定非得是根目錄下，在你存放文件的那個目錄下就可以了，當然你的安全域名也要寫到這個文件，
例如：91shou.com/tg-background
二、引入微信JS文件
在需要調用JS接口的頁面引入JS文件
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
三、通過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在微信公眾平臺>開發>基本配置下就可以看到。這里有關簽名的三個參數非常重要，需要從后臺獲取！
jsApiList，JS接口參考下一篇~
四、后臺生成并返回前端所需要的參數
1.jsapi_ticket
jsapi_ticket是公眾號用于調用js接口的臨時票據。有效期7200秒，跟公眾號普通access_token一樣，必須全局緩存起來，因為這個ticket獲取次數有限，超過次數將無法使用。建議設置緩存時間要小于7200秒，因為當請求微信端生成jsapi_ticket返回給后臺保存這個動作需要時間，如果設置7200秒，實際上最后一兩秒時，緩存里面還存在，但實際在微信那邊已經過期了，再拿這個ticket會出錯。生成jsapi_ticket如下：
⑴首先要獲取access_token(GET請求)
直接訪問這個鏈接，把已有的值填上去，
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
⑵用第一步獲取的access_token使用GET請求獲取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
返回的信息是一段json，里面有一個值是jsapi_ticken。我獲取到jsapi_ticken之后就直接給后臺了，后臺生成簽名之后會將AppID，timestamp、nonceStr、signature一起返回到前端。前端拿到值之后，寫入wx.config中相應的字段即可。還有幾點需要注意：1.前端wx.config配置中的字段名稱里有大寫，而后臺生成簽名返回的字段都是小寫。2.時間戳是精確到秒，不是毫秒。
五、接口處理驗證
1.通過ready接口處理成功驗證
wx.ready(function(){
})
config信息驗證后會執行ready方法，所有接口都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則需把相關接口放在ready函數中調用來確保正確執行；對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
2.通過error接口處理失敗驗證
wx.ready(function(){
})
config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的的debug查看。
六、判斷當前客戶端版本是否支持JS接口
wx.checkJsApi({
// 需要檢測的JS接口列表，所有JS接口列表參考下一篇,
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'],
success: function(res) {
console.log('支持');
// 以鍵值對的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
七、調用接口
接口太多，參考下一篇哦！
八、常見的一些錯誤
- invalid url domain:
js接口安全域名錯誤。可以看看第一項 - invalid signature:
要么是jsapi_ticket錯誤，要么是簽名算法問題，要么是算法的參數有問題，注意noncestr中的's'是小寫的。如果都是對的。那就是前端傳的url有問題了 - permission denied:
這個問題一般是沒有接口權限的問題，有的接口是要認證之后才可以使用，測試號不會有這個問題。
到這一步還沒有結束，接下來還有一個更重要的問題：二次分享失敗！不顯示縮略圖和描述。
首先二次分享失敗的原因：
微信在二次分享之后會給該鏈接自動加上form以及isappinstalled這兩個參數證明該鏈接是二次分享過來的，就因為有了這兩個參數，才會導致二次分享失敗。
解決方法：
在二次分享之前就將這兩個參數去掉然后強制跳轉刷新到不帶微信參數的頁面。
以下是我開發的完整代碼：
$(function(){
var url = location.href.split('#')[0];
$.ajax({
type:'post',
url:"${ctx}/sp/merchantsJoinApi/qianming",
data:{url:url},
dataType:'json',
success:function(data){
//第二步：通過config接口注入權限驗證配置
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: 'wxe75a19668de1b089', // 必填，公眾號的唯一標識
timestamp: data.timestamp, // 必填，生成簽名的時間戳
nonceStr: data.noncestr, // 必填，生成簽名的隨機串
signature: data.signature,// 必填，簽名
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});
//第三步：通過ready接口處理成功驗證
wx.ready(function(){
console.log("成功");
//獲取“分享給朋友“按鈕點擊狀態及自定義分享內容接口
wx.onMenuShareAppMessage({
title: '${products.shareTitle}', // 分享標題
desc: '${products.shareDescribe}', // 分享描述
link: 'http://xxxxx.com/xbdz-background/sp/productsTmaaApi/itemPropagandaIndex', // 分享鏈接
imgUrl: 'http://xxxxx.bkt.clouddn.com/jyhj_wx_fx.jpg', // 分享圖標
type: 'link', // 分享類型,music、video或link，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
success: function () {
//用戶成功分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
//獲取”分享到朋友圈“按鈕點擊狀態及自定義分享內容接口
wx.onMenuShareTimeline({
title: '${products.shareTitle}', // 分享標題
link: 'http://xxxxx.com/xbdz-background/sp/productsTmaaApi/itemPropagandaIndex', // 分享鏈接
imgUrl: 'http://xxxxx.bkt.clouddn.com/jyhj_wx_fx.jpg', // 分享圖標
success: function () {
// 用戶確認分享后執行的回調函數
},
cancel: function () {
// 用戶取消分享后執行的回調函數
}
});
});
//第四步：通過error接口處理失敗驗證
wx.error(function(res){
console.log("失敗");
});
//判斷當前客戶端版本是否支持JS接口
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
success: function(res) {
console.log('支持');
// 以鍵值對的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
}
});
});
