微信公眾號開發之微信JSSDK
阿新 • • 發佈：2018-11-22
概述
微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。
通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力， 為微信使用者提供更優質的網頁體驗。
此文件面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。
JSSDK使用步驟
步驟一：繫結域名
先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。
備註：登入後可在“開發者中心”檢視對應的介面許可權。
步驟二：引入JS檔案
在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）： http://res.wx.qq.com/open/js/jweixin-1.0.0.js
備註：支援使用 AMD/CMD 標準模組載入方法載入
步驟三：通過config介面注入許可權驗證配置
所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫（同一個url僅需呼叫一次，對於變化url的SPA的web app可在每次url變化時進行呼叫,目前Android微信客 戶端不支援pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
wx.config({
debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
步驟四：通過ready介面處理成功驗證
wx.ready(function(){
// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
});
步驟五：通過error介面處理失敗驗證
wx.error(function(res){
// config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
});
介面呼叫說明
所有介面通過wx物件(也可使用jWeixin物件)來呼叫，引數是一個物件，除了每個介面本身需要傳的引數之外，還有以下通用引數：
-
- success：介面呼叫成功時執行的回撥函式。
- fail：介面呼叫失敗時執行的回撥函式。
- complete：介面呼叫完成時執行的回撥函式，無論成功或失敗都會執行。
- cancel：使用者點選取消時的回撥函式，僅部分有使用者取消操作的api才會用到。
- trigger: 監聽Menu中的按鈕點選時觸發的方法，該方法僅支援Menu中的相關介面。
備註：不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。
以上幾個函式都帶有一個引數，型別為物件，其中除了每個介面本身返回的資料之外，還有一個通用屬性errMsg，其值格式如下：
- 呼叫成功時："xxx:ok" ，其中xxx為呼叫的介面名
- 使用者取消時："xxx:cancel"，其中xxx為呼叫的介面名
- 呼叫失敗時：其值為具體錯誤資訊
1 /// <summary>
2 /// 微信引數準備
3 /// </summary>
4 private void WxSdkPramas(bool isShare)
5 {
6 var jsSdk = new JSSDKHelper();
7 //獲取時間戳
8 var timestamp = JSSDKHelper.GetTimestamp();
9 //獲取隨機碼
10 var nonceStr = JSSDKHelper.GetNoncestr();
11 var appId = WeiXinAppId;
12 var appSecret = WeiXinAppSecret;
13 //獲取票證
14 var jsTicket = JsApiTicketContainer.TryGetTicket(appId, appSecret);
15 //獲取簽名
16 var signature = jsSdk.GetSignature(jsTicket, nonceStr, timestamp, Request.Url.AbsoluteUri);
17
18 ViewData["AppId"] = appId;
ViewData["Timestamp"] = timestamp;
21 ViewData["NonceStr"] = nonceStr;
22 ViewData["Signature"] = signature;
23 }
下面是js相關程式碼：
1 <head>
2 <meta name="viewport" content="width=device-width" />
3 <title>公眾號JSSDK演示</title>
4 <script src="~/Scripts/jquery-1.7.1.min.js"></script>
5 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
6 <script>
7 wx.config({
8 debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
9 appId: '@ViewData["AppId"]', // 必填，公眾號的唯一標識
10 timestamp: '@ViewData["Timestamp"]', // 必填，生成簽名的時間戳
11 nonceStr: '@ViewData["NonceStr"]', // 必填，生成簽名的隨機串
12 signature: '@ViewData["Signature"]',// 必填，簽名
13 jsApiList: [
14 "checkJsApi",
15 'onMenuShareTimeline',
16 'onMenuShareAppMessage',
17 'onMenuShareQQ',
18 'onMenuShareWeibo',
19 'hideMenuItems',
20 'showMenuItems',
21 'hideAllNonBaseMenuItem',
22 'showAllNonBaseMenuItem',
23 'translateVoice',
24 'startRecord',
25 'stopRecord',
26 'onRecordEnd',
27 'playVoice',
28 'pauseVoice',
29 'stopVoice',
30 'uploadVoice',
31 'downloadVoice',
32 'chooseImage',
33 'previewImage',
34 'uploadImage',
35 'downloadImage',
36 'getNetworkType',
37 'openLocation',
38 'getLocation',
39 'hideOptionMenu',
40 'showOptionMenu',
41 'closeWindow',
42 'scanQRCode',
43 'chooseWXPay',
44 'openProductSpecificView',
45 'addCard',
46 'chooseCard',
47 'openCard'
48 ] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2。詳見：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
49 });
50
51 wx.error(function (res) {
52 console.log(res);
53 alert('驗證失敗');
54 });
55
56 wx.ready(function () {
57 var url = 'http://weixin.senparc.com';
58 var link = url + '@(Request.Url.PathAndQuery)';
59 var imgUrl = url + '/images/v2/ewm_01.png';
60
61 //轉發到朋友圈
62 wx.onMenuShareTimeline({
63 title: 'JSSDK朋友圈轉發測試',
64 link: link,
65 imgUrl: imgUrl,
66 success: function () {
67 alert('轉發成功！');
68 },
69 cancel: function () {
70 alert('轉發失敗！');
71 }
72 });
73 //轉發給朋友
74 wx.onMenuShareAppMessage({
75 title: 'JSSDK朋友圈轉發測試',
76 desc: '轉發給朋友',
77 link: link,
78 imgUrl: imgUrl,
79 type: 'link',
80 dataUrl: '',
81 success: function () {
82 alert('轉發成功！');
83 },
84 cancel: function () {
85 alert('轉發失敗！');
86 }
87 });
88 });
89 </script>
90
91 </head>
上面用到的Helper:
1 public class JSSDKHelper
2 {
3 public JSSDKHelper()
4 {
5 Parameters = new Hashtable();
6 }
7
8 protected Hashtable Parameters;
9
10 /// <summary>
11 /// 設定引數值
12 /// </summary>
13 /// <param name="parameter"></param>
14 /// <param name="parameterValue"></param>
15 private void SetParameter(string parameter, string parameterValue)
16 {
17 if (!string.IsNullOrEmpty(parameter))
18 {
19 if (Parameters.Contains(parameter))
20 {
21 Parameters.Remove(parameter);
22 }
23
24 Parameters.Add(parameter, parameterValue);
25 }
26 }
27
28 private void ClearParameter()
29 {
30 Parameters.Clear();
31 }
32
33 /// <summary>
34 /// 獲取隨機字串
35 /// </summary>
36 /// <returns></returns>
37 public static string GetNoncestr()
38 {
39 Random random = new Random();
40 return MD5Util.GetMD5(random.Next(1000).ToString(), "GBK");
41 }
42
43 /// <summary>
44 /// 獲取時間戳
45 /// </summary>
46 /// <returns></returns>
47 public static string GetTimestamp()
48 {
49 TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
50 return Convert.ToInt64(ts.TotalSeconds).ToString();
51 }
52
53 /// <summary>
54 /// sha1加密
55 /// </summary>
56 /// <returns></returns>
57 private string CreateSha1()
58 {
59 StringBuilder sb = new StringBuilder();
60 ArrayList akeys = new ArrayList(Parameters.Keys);
61 akeys.Sort();
62
63 foreach (string k in akeys)
64 {
65 string v = (string)Parameters[k];
66
67 if (sb.Length == 0)
68 {
69 sb.Append(k + "=" + v);
70 }
71 else
72 {
73 sb.Append("&" + k + "=" + v);
74 }
75 }
76 return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower();
77 }
78
79 /// <summary>
80 /// 生成cardSign的加密方法
81 /// </summary>
82 /// <returns></returns>
83 private string CreateCardSha1()
84 {
85 StringBuilder sb = new StringBuilder();
86 ArrayList akeys = new ArrayList(Parameters.Keys);
87 akeys.Sort();
88
89 foreach (string k in akeys)
90 {
91 string v = (string)Parameters[k];
92
93 sb.Append(v);
94 }
95 return SHA1UtilHelper.GetSha1(sb.ToString()).ToString().ToLower();
96 }
97
98 /// <summary>
99 /// 獲取JS-SDK許可權驗證的簽名Signature
100 /// </summary>
101 /// <param name="ticket"></param>
102 /// <param name="noncestr"></param>
103 /// <param name="timestamp"></param>
104 /// <param name="url"></param>
105 /// <returns></returns>
106 public string GetSignature(string ticket, string noncestr, string timestamp, string url)
107 {
108 //清空Parameters
109 ClearParameter();
110
111 SetParameter("jsapi_ticket", ticket);
112 SetParameter("noncestr", noncestr);
113 SetParameter("timestamp", timestamp);
114 SetParameter("url", url);
115
116 return CreateSha1();
117 }
118
119 /// <summary>
120 /// 獲取位置簽名AddrSign
121 /// </summary>
122 /// <param name="appId"></param>
123 /// <param name="appSecret"></param>
124 /// <param name="noncestr"></param>
125 /// <param name="timestamp"></param>
126 /// <param name="url"></param>
127 /// <returns></returns>
128 public string GetAddrSign(string appId, string appSecret, string noncestr, string timestamp, string url)
129 {
130 //清空Parameters
131 ClearParameter();
132
133 var accessToken = AccessTokenContainer.TryGetToken(appId, appSecret);
134 SetParameter("appId", appId);
135 SetParameter("noncestr", noncestr);
136 SetParameter("timestamp", timestamp);
137 SetParameter("url", url);
138 SetParameter("accesstoken", accessToken);
139
140 return CreateSha1();
141 }
142
143 /// <summary>
144 /// 獲取卡券簽名CardSign
145 /// </summary>
146 /// <param name="appId"></param>
147 /// <param name="appSecret"></param>
148 /// <param name="locationId"></param>
149 /// <param name="noncestr"></param>
150 /// <param name="timestamp"></param>
151 /// <param name="cardId"></param>
152 /// <param name="cardType"></param>
153 /// <returns></returns>
154 public string GetCardSign(string appId, string appSecret, string locationId, string noncestr, string timestamp, string cardId, string cardType)
155 {
156 //清空Parameters
157 ClearParameter();
158
159 SetParameter("appId", appId);
160 SetParameter("appsecret", appSecret);
161 SetParameter("location_id", locationId);
162 SetParameter("nonce_str", noncestr);
163 SetParameter("times_tamp", timestamp);
164 SetParameter("card_id", cardId);
165 SetParameter("card_type", cardType);
166
167 return CreateCardSha1();
168 }
169 }