微信呼叫jssdk在網頁端實現呼叫掃一掃，java+jsp

轉自：http://blog.csdn.net/u011327333/article/details/50439462

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

微信官方技術文件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檔案

如需使用搖一搖周邊功能，請引入 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我們只需要做一點小改變。 [javascript] view plain copy

<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語言來獲取的。具體如下：

[javascript] view plain copy

<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
*
*/
publicclass JsSignUtil {
publicstatic String accessToken = null;
publicstatic 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
*/
privatestatic String byteToHex(finalbyte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash)
{
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
/**
* 產生隨機串--由程式自己隨機產生
相關推薦

微信呼叫jssdk在網頁端實現呼叫掃一掃，java+jsp

轉自：http://blog.csdn.net/u011327333/article/details/50439462 這篇文章以講解的方式，幫助大家來理解微信官方的文件，同時給出呼叫掃一掃的例子。微信官方技術文件jssdk：http://mp.weixin.qq.

微信網頁開發的一些感想，順便附上微信中呼叫掃一掃史上最簡便的方法 5行程式碼實現H5掃一掃 HTML5掃一掃最簡便的辦法

呼叫範例完整程式碼下載： csdn的這個博文寫的有點囉嗦，建議移步這裡：在網頁上點一個按鈕或者連結呼叫微信掃一掃然後返回結果我們繼續處理，很多人應該都會有這樣的需求，不過微信對這個空子比較嚴格，需要你的網頁有簽名，而簽名生成需要有一個微信公眾號的appk

呼叫微信OAuth2.0網頁授權介面實現使用者資訊的繫結

在微信網頁開發中，可以通過OAuth2.0網頁授權機制，來獲取使用者基本資訊，進而實現自己的業務邏輯。微信官方文件關於網頁授權回撥域名的說明 1、在微信公眾號請求使用者網頁授權之前，開發者需要先到公眾平臺官網中的“開發 - 介面許可權 - 網頁服務 -

微信JSSDK開發，呼叫微信掃一掃 JAVA & jsp前端 & js實現

// 微信JSSDK的AccessToken請求URL地址 ublic final static String weixin_jssdk_acceToken_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type

JAVA實現呼叫微信js-sdk掃一掃

喜歡的朋友可以關注下。已經很久沒有給大家分享一片技術文章了，今天抽了點時間來，給大家說一說如何呼叫微信提供的掃一掃介面。前提：需要申請一個公眾號：申請公眾號需要的資料我就不說了，去申請微信會提示需要哪些。準備appid（公眾號的id） AppSecret （

利用微信JSSDK呼叫微信掃一掃功能

1. 確保有調起微信掃一掃介面許可權，測試號可能不行； 2. 匯入相關JS <script type="text/javascript" http://test.com/zepto_touch.js"></script> <script t

微信開發獲取Accesstoken和jsapi_ticket配置jssdk,呼叫微信掃一掃

public static String[] getSign(String jsapi_ticket) throws NoSuchAlgorithmException { String[] data= new String[10]; Long timestamp= System.current

微信呼叫掃一掃的步驟(ASP實現方式)

1.微信服務號（或公眾號）需要通過認證 2.點選“公眾號設定”-“功能設定”，在“JS介面安全域名”處填寫上域名，二級域名也可以的，注意該域名必須是備案過的，否則無效。 3.開始寫程式碼上傳到上述設定的安全域名下面。例如設定的安全域名是test.bzzs

呼叫微信掃碼實現掃一掃簽到

1、首先生成二維碼 include('phpqrcode.php'); $url_code = "";//掃碼之後的業務邏輯層$level = 0; //容錯級別$size = 9; //生成圖片的大小$margin = 4; //二維碼周圍邊框空白區域間距值$sav

微信公眾平臺網頁開發實戰--3.利用JSSDK在網頁中獲取地理位置（HTML5+jQuery）

fff .html 1.4 style minimum log fill rdquo 位置復制一份JSSDK環境，創建一份index.html文件，結構如圖7.1所示。圖7.1 7.1節文件結構在location.js中，封裝“getLoc

java實現微信小程序服務端(登錄)

value ssi 讀取 ive ping 我們不存在 @param 感受　　　　　　　　　　　　　　　　　　　　　　　　　　　　java實現微信小程序服務端　　　微信小程序如今被廣泛使用，微信小程序按照微信官網的定義來說就是：　　　微信小程序是一種全新的連接用

微信公眾號和微信瀏覽器中網頁實現下拉重新整理

原生JS實現微信公眾號或網頁使用下拉載入和上拉重新整理微信瀏覽器開啟網頁顯示網址安全資訊，導致下拉重新整理用不了。解決辦法,網上很多辦法，也找了很久，但是最新的很多用不了。後來自己根據網上的一些資料，造了個輪子。先看看效果，是不是親想要的，可以跳過，以免浪費寶貴時間。用微信開啟以下網址瀏

微信JS支付程式碼_前端呼叫微信支付介面

轉自：http://dditblog.com/itshare_553.html 跟大家分享一段微信支付的js程式碼片段、V3版的微信支付沒有paySignKey引數、基本上是直接複製就可以使用了、改一改自己的引數就好了、話不多說、直接上程式碼支付按鈕的點選事件

【微信小程式】c# 實現獲取openid、session_key 服務端

c#寫一個獲取微信小程式 openid和session_key 的方法。。 1，微信小程式端 // 登入 wx.login({ success: res => { // 傳送 res.code 到後臺換取 openId, sessionKey,

微信公眾號介面呼叫JS-SDK（vue專案，以掃一掃為例）

該方法需引入微信js-sdk ，先npm安裝 //在一個地方呼叫this.weixin()方法，比如說按鈕 //寫掃一掃方法 weixin() { var that = this; var url=''; var params =

微信中curl返回false-curl呼叫微信建立自定義選單返回false

我在微信建立選單欄的時候出現了curl返回結果false，我查了後才發現多了空格，為了以後不犯錯，記錄一下： $url = ' https://api.weixin.qq.com/cgi-bin/menu/create?access_token='.$accessToken; 在這行程式碼中

小程式，呼叫微信掃一掃功能

微信小程式呼叫掃一掃，將所得的資訊展示到頁面中 wxml檔案： <view bindtap='scancode'> <text class='texts'>(點選掃一掃) </text> </view> <vi

教你如何實現從手機瀏覽器跳轉微信、手機網頁跳轉微信，外部連結微信跳轉！

這篇文章主要介紹瞭如何在手機瀏覽器wap網頁中點選連結跳轉到微信介面,需要的朋友可以參考下先說第一種，最簡單的喚起微信協議，weixin://主流瀏覽器都支援，app加個瀏覽器功能就可以使用weixin:// 。用途不大，只能開啟微信，不能攜帶任何引數。方法

小程式webview呼叫微信掃一掃的“曲折”思路

自上一篇遇到webview中沒有返回按鈕之後，雖然跳出坑了。解決方案：《小程式webview跳轉頁面後沒有返回按鈕完美解決方案》但是，小程式踩坑之路並沒有結束。在公眾號網頁中通過配置APPID和app

php 微信呼叫掃一掃

類庫程式碼: <?phpclass JSSDK { private $appId; private $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->a