微信調用jssdk在網頁端實現調用掃一掃，java+jsp

這篇文章以講解的方式，幫助大家來理解微信官方的文檔，同時給出調用掃一掃的例子。

微信官方技術文檔jssdk：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

打開技術文檔，看到一個大目錄，我們只需要關注下面幾部分目錄即可。

圖1

圖2

圖1所示的目錄是使用任何js接口頁面都要配置的。下面結合官方文檔介紹配置方法，其中綠色字體是自己寫的批註，黑色的是複製官方文檔：

JSSDK使用步驟

步驟一：綁定域名

先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。

備註：登錄後可在“開發者中心”查看對應的接口權限。

這裏注意域名不要帶http:// 等前綴。（順便推薦做微信開發測試時，使用花生殼賬號，映射出公網ip。）比如網址：http://test.wicp.net 那麼它的域名就是 test.wicp.net。

步驟二：引入JS文件

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

請注意，如果你的頁面啓用了https，務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否則將無法在iOS9.0以上系統中成功使用JSSDK

如需使用搖一搖周邊功能，請引入 jweixin-1.1.0.js

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

這個就是jsp頁面直接引入即可

步驟三：通過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可以在這裏更新簽名。

});

基礎接口

判斷當前客戶端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
    success: function(res) {
        // 以鍵值對的形式返回，可用的api值true，不可用爲false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

備註：checkJsApi接口是客戶端6.0.2新引入的一個預留接口，第一期開放的接口均可不使用checkJsApi來檢測。

微信掃一掃

調起微信掃一掃接口

wx.scanQRCode({
    needResult: 0, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
    scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
    success: function (res) {
    var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
}
});

前面的官方文檔寫的很詳細，但有人會疑問，具體寫到網頁中是怎麼樣？直接複製就可以嗎？其實大部分直接複製就可以，針對jsp我們只需要做一點小改變。

<script type="text/javascript">
wx.config({
debug: false,
appId: '<%=ret.get("appId")%>',
timestamp:'<%=ret.get("timestamp")%>',
nonceStr:'<%=ret.get("nonceStr")%>',
signature:'<%=ret.get("signature")%>',
jsApiList : [ 'checkJsApi', 'scanQRCode' ]
});//end_config
wx.error(function(res) {
alert("出錯了：" + res.errMsg);
});
wx.ready(function() {
wx.checkJsApi({
jsApiList : ['scanQRCode'],
success : function(res) {
}
});
//掃描二維碼
document.querySelector('#scanQRCode').onclick = function() {
wx.scanQRCode({
needResult : 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
scanType : [ "qrCode", "barCode" ], // 可以指定掃二維碼還是一維碼，默認二者都有
success : function(res) {
var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
document.getElementById("wm_id").value = result;//將掃描的結果賦予到jsp對應值上
alert("掃描成功::掃描碼=" + result);
}
});
};//end_document_scanQRCode
});//end_ready
</script>

wx.config 裏面的各個屬性ret.get("XXX")。是我們需要使用一個<% %>內部的java語言來獲取的。具體如下：

<pre name="code" class="html"><%
Map<String, String> ret = new HashMap<String, String>();
ret = JsSignUtil.sign(url);
%>

其中JsSignUtil 是獲取js ticket的文件。這個文件的雛形，微信官方在jssdk技術文檔底部給了demo，有三個版本，java， php，python。這裏我對它做了一些微調：

package util;
import java.util.UUID;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;
/**
* 官方給的使用js的驗證工具
* @author Administrator
*
*/
public class JsSignUtil {
public static String accessToken = null;
public static Map<String, String> sign(String url) {
accessToken = WeixinUtil.getAccessToken("appid", "appsecret").getToken();
String jsapi_ticket = WeixinUtil.getJsApiTicket(accessToken);
Map<String, String> ret = new HashMap<String, String>();
String nonce_str = create_nonce_str();
String timestamp = create_timestamp();
String string1;
String signature = "";
//注意這裏參數名必須全部小寫，且必須有序
string1 = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
System.out.println("string1="+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);
ret.put("appId", "wxcbba33f6b9ce1286");
System.out.println("1.ticket(原始)="+jsapi_ticket);
System.out.println("2.url="+ret.get("url"));
System.out.println("3.jsapi_ticket（處理後）="+ret.get("jsapi_ticket"));
System.out.println("4.nonceStr="+ret.get("nonceStr"));
System.out.println("5.signature="+ret.get("signature"));
System.out.println("6.timestamp="+ret.get("timestamp"));
return ret;
}
/**
* 隨機加密
* @param hash
* @return
*/
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;
}
/**
* 產生隨機串--由程序自己隨機產生
* @return
*/
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
/**
* 由程序自己獲取當前時間
* @return
*/
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
}

接下來介紹

wx.ready(function(){ wx.XXX});

放在wx.ready 裏面的內容，會等到相關信息全部加載完畢後纔可以被觸發。如果用戶引入的接口是需要點擊纔會調用的，則放不放在裏面都無所謂。比如上面例子的接口是用來檢驗當前配置信息是否合法的，那麼這個功能是不需要用戶來點擊的，當你打開網頁時，自動就會調用該接口，那麼它就必須放在ready裏面。再比如我們打算調用的掃一掃，這個必須（最好是）是用戶進入頁面後點擊某個按鈕才觸發，這麼就不必放到ready裏面。

下面再解釋掃一掃接口的代碼：

//掃描二維碼
document.querySelector('#scanQRCode').onclick = function() {
wx.scanQRCode({
needResult : 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
scanType : [ "qrCode", "barCode" ], // 可以指定掃二維碼還是一維碼，默認二者都有
success : function(res) {
var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
document.getElementById("wm_id").value = result;//將掃描的結果賦予到jsp對應值上
alert("掃描成功::掃描碼=" + result);
}
});
};//end_document_scanQRCode

我們看到官方的文檔只有一個
wx.scanQRCode({ XXX });，我們給他套上一個document.querySelector（）。這個作用就是用戶點擊纔會觸發該事件。如果不套document，直接放在外面那麼一旦進入該網頁，系統就自動調用了接口。
#scanQRCode這個值去掉#後，就是我們按鈕的id，擁有該id的按鈕即可調用接口。這個id是官方給的，不可以自己隨意改。

<button id="scanQRCode" >掃描二維碼</button>

水平有限，如有錯誤，多多指正

微信調用jssdk在網頁端實現調用掃一掃，java+jsp

JSSDK使用步驟

步驟一：綁定域名

步驟二：引入JS文件

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

步驟四：通過ready接口處理成功驗證

步驟五：通過error接口處理失敗驗證

基礎接口

判斷當前客戶端版本是否支持指定JS接口

微信掃一掃

調起微信掃一掃接口

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

nginx 轉發Tomcat應用訪問偶現timed out 原因分析

記一次線上服務器CPU佔用100%問題排查

記一次SQL優化經歷

HttpURLConnection API 使用手冊

十大Intellij IDEA快捷鍵

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結