當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

微信公众号开发--微信JS-SDK扫一扫功能

發布時間：2025/3/16 javascript 13 豆豆

生活随笔收集整理的這篇文章主要介紹了微信公众号开发--微信JS-SDK扫一扫功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

綁定域名（很關鍵）

引入JS文件（很簡單）

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

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

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

步驟一：綁定域名

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

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

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

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

步驟二：引入JS文件

? ? 一行代碼就可以了

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

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

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

? ? 這里需要從服務器端網頁面傳遞的參數有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

? ??通過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

? ? 注意，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);} }

? ? 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";} }

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

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

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

? ? 在頁面中讀值

? ? 然后賦值

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

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

$("#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);}}});});

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

? ? 掃網址

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

總結

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

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