? ? 首先請閱讀微信JS-SDK說明文檔，了解微信JS的相關說明。?
? ? 根據官方的使用步驟，關鍵的有以下幾步

綁定域名（很關鍵）

引入JS文件（很簡單）

通過config接口注入權限驗證配置（很重要）

通過ready接口處理成功驗證（還沒用到）

通過error接口處理失敗驗證（還沒用到）

步驟一：綁定域名

?

? ? 如果域名綁定有誤，會出現如下錯誤提示?
? ? 錯誤的域名配置示例：

`http://gwchsk.imwork.net/wechat/order/test.html`

? ? 域名配置錯誤的提示信息：?
{“errMsg”:”config:invalid url domain”}

? ? 所以，域名配置的時候一定要注意?
? ? 1. 域名不要以http:開頭?
? ? 2. 域名不要配置到具體的頁面?
? ? 配置成功的提示如下

步驟二：引入JS文件

? ? 一行代碼就可以了

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

• 1

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

? ? 這一步非常重要，也是最關鍵的一步，這一部分?
? ? 先看官方的示例

wx.config({debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: '', // 必填，公眾號的唯一標識timestamp: , // 必填，生成簽名的時間戳nonceStr: '', // 必填，生成簽名的隨機串signature: '',// 必填，簽名，見附錄1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

? ? 這里需要從服務器端網頁面傳遞的參數有timestamp、nonceStr和signature而appId和jsApiList都是固定的，這里直接寫在頁面中。

? ? 首先，編寫服務器端代碼，生成timestamp、nonceStr和signature。?
? ? 在生成timestamp、nonceStr和signature的時候有兩個參數需要獲取?
? ? 一個是access_token，另一個是jsapi_ticket。

? ? access_token的獲取需要AppId和AppSecret，獲取地址如下，發送GET請求

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

• 1

? ??通過HttpClient發送http請求就可以獲取到access_token

? ? 得到access_token之后，采用http GET方式請求獲得jsapi_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

• 1

? ? 注意，access_token和jsapi_ticket得有效期為7200秒，開發者必須在自己的服務全局緩存

? ? 獲得jsapi_ticket之后，就可以生成JS-SDK權限驗證的簽名了。

簽名算法

簽名生成規則如下：參與簽名的字段包括noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其后面部分） 。對所有待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數名均為小寫字符。對string1作sha1加密，字段名和字段值都采用原始值，不進行URL 轉義。

簽名算法的實現

? ? 最難的就是簽名算法的實現部分，幸好微信給了demo，網上好多人都在找，這里我把簽名算法的實現貼出來，代碼來自微信demo?
?
? ??下載地址?
? ? java代碼如下，做了一點點修改

package com.gwc.wechat.utils.wechat;import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util.Formatter; import java.util.HashMap; import java.util.Map; import java.util.UUID;public class WxJSUtil {public static void main(String[] args) {// 注意 URL 一定要動態獲取，不能 hardcodeString url = "http://gwchsk.imwork.net/wechat/order/test.html";Map<String, String> ret = sign(url);for (Map.Entry entry : ret.entrySet()) {System.out.println(entry.getKey() + "=" + entry.getValue());}};public static Map<String, String> sign(String url) {Map<String, String> ret = new HashMap<String, String>();//這里的jsapi_ticket是獲取的jsapi_ticket。String jsapi_ticket = JSAPITicketTool.getTicket();String nonce_str = create_nonce_str();String timestamp = create_timestamp();String string1;String signature = "";//注意這里參數名必須全部小寫，且必須有序string1 = "jsapi_ticket=" + jsapi_ticket +"&noncestr=" + nonce_str +"&timestamp=" + timestamp +"&url=" + url;// System.out.println(string1);try{MessageDigest crypt = MessageDigest.getInstance("SHA-1");crypt.reset();crypt.update(string1.getBytes("UTF-8"));signature = byteToHex(crypt.digest());}catch (NoSuchAlgorithmException e){e.printStackTrace();}catch (UnsupportedEncodingException e){e.printStackTrace();}ret.put("url", url);ret.put("jsapi_ticket", jsapi_ticket);ret.put("nonceStr", nonce_str);ret.put("timestamp", timestamp);ret.put("signature", signature);return ret;}private static String byteToHex(final byte[] hash) {Formatter formatter = new Formatter();for (byte b : hash){formatter.format("%02x", b);}String result = formatter.toString();formatter.close();return result;}private static String create_nonce_str() {return UUID.randomUUID().toString();}private static String create_timestamp() {return Long.toString(System.currentTimeMillis() / 1000);} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82

? ? Controller的代碼

@Controller @RequestMapping(value = "/order") public class OrderController { @RequestMapping(value = "/test.html", method = RequestMethod.GET)public String testPage(Model model) {String url = Constant.AppURL + "/order/test.html";Map<String, String> ret = WxJSUtil.sign(url);for (Map.Entry entry : ret.entrySet()) {System.out.println(entry.getKey() + "=" + entry.getValue());model.addAttribute(entry.getKey().toString(), entry.getValue());}return "jqueryMobile";} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

? ? 在Controller中將如下參數寫進了jsp頁面

timestamp=1449132293nonceStr=fb4eaa58-6d53-40a8-a8fa-7033e9768a8asignature=7ad32da3f82cb36492de935a60727d3053d33f4b

• 1
• 2
• 3

? ? 其次編寫jsp頁面的代碼?
? ? 在jsp頁面中需要將wx.config重的參數進行配置

wx.config({debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId: '', // 必填，公眾號的唯一標識timestamp: , // 必填，生成簽名的時間戳nonceStr: '', // 必填，生成簽名的隨機串signature: '',// 必填，簽名，見附錄1jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

? ? 在頁面中讀值

<input id="timestamp" type="hidden" value="${timestamp}" /><input id="noncestr" type="hidden" value="${nonceStr}" /><input id="signature" type="hidden" value="${signature}" />

• 1
• 2
• 3

? ? 然后賦值

<script type="text/javascript">$(function() {var timestamp = $("#timestamp").val();//時間戳var nonceStr = $("#noncestr").val();//隨機串var signature = $("#signature").val();//簽名wx.config({debug : true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。appId : 'wx622ca8545e5c354b', // 必填，公眾號的唯一標識timestamp : timestamp, // 必填，生成簽名的時間戳nonceStr : nonceStr, // 必填，生成簽名的隨機串signature : signature,// 必填，簽名，見附錄1jsApiList : [ 'scanQRCode' ]// 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});});</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

? ? 寫一個按鈕和輸入框，將掃描的結果放進輸入框

<input id="id_securityCode_input"> <button id="scanQRCode">掃碼</button>

• 1
• 2

? ? 給按鈕綁定事件，并執行微信掃碼

$("#scanQRCode").click(function() {wx.scanQRCode({// 默認為0，掃描結果由微信處理，1則直接返回掃描結果needResult : 1,desc : 'scanQRCode desc',success : function(res) {//掃碼后獲取結果參數賦值給Inputvar url = res.resultStr;//商品條形碼，取","后面的if(url.indexOf(",")>=0){var tempArray = url.split(',');var tempNum = tempArray[1];$("#id_securityCode_input").val(tempNum);}else{$("#id_securityCode_input").val(url);}}});});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

? ? 運行結果如圖?
? ? 掃一包抽紙

? ? 掃網址

? ? 微信JS-SDK中的掃一掃就基本實現了。

總結

以上是生活随笔為你收集整理的微信公众号开发--微信JS-SDK扫一扫功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。