微信公衆號開發之微信JSSDK

時間 2019-11-18

標籤微信公衆號開發 jssdk 简体版

原文原文鏈接

概述

　　微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。html

　　經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。jquery

　　此文檔面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。web

JSSDK使用步驟

　　步驟一：綁定域名

　　先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。ajax

　　備註：登陸後可在「開發者中心」查看對應的接口權限。api

步驟二：引入JS文件

　　在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js安全

　　備註：支持使用 AMD/CMD 標準模塊加載方法加載微信

步驟三：經過config接口注入權限驗證配置app

　　全部須要使用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對象)來調用，參數是一個對象，除了每一個接口自己須要傳的參數以外，還有如下通用參數：dom

1. success：接口調用成功時執行的回調函數。
2. fail：接口調用失敗時執行的回調函數。
3. complete：接口調用完成時執行的回調函數，不管成功或失敗都會執行。
4. cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操做的api纔會用到。
5. 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     }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。