微信公眾號首頁掃一掃功能
阿新 • • 發佈：2018-01-17
charset blog qrcode javascrip clas spa 返回 掃碼 htm
前話： 微信公眾號首頁掃一掃，如果是直接在首頁掃碼，直接跳到掃碼結果，我們開發者不能對掃碼結果做處理，比如不想讓它掃其他的除了自己的規定的二維碼，那麽就要對這個二維碼的掃碼結果做出處理。
入正題 =>> 既然首頁不能做處理，那麽我們就可以做一個靜態頁面，在這個頁面中調起掃一掃的功能，再對掃碼結果做處理。
步驟如下：
1. 首頁把type類型掃一掃功能改為頁面點擊；
1 "button":[ 2 { 3 "name":"掃碼", 4 "sub_button":[ 5 {6 "type":"scancode_push", 7 "name":"掃一掃", 8 "key":"borrow", 9 "sub_button": [ ] 10 } 11 ] 12 } ] 13 14 //==> 上面的代碼改成下面的 15 16 "button":[ 17 { 18 "name":"掃碼", 19"sub_button":[ 20 { 21 "type":"view", 22 "name":"掃一掃", 23 "key":"borrow", 24 "url": "這裏填你要調掃一掃功能的靜態頁面的地址" //例如 http://www.abc.com/userinfo/sao 25 } 26 ] 27 } ]
2. 在點擊跳轉的靜態頁面調起掃一掃
1 //要引入微信的JS-SDK 2 //<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 3 4 <!DOCTYPE html> 5 <html lang="en"> 6 <head> 7 <meta charset="UTF-8"> 8 <title>哆啦Airphone</title> 9 </head> 10 <body> 11 <div onclick="sao()"> 12 <span>掃一掃</span> 13 </div> 14 </body> 15 </html> 16 <script src="/asset/js/jquery-2.1.0.js"></script> 17 <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 18 <script type="text/javascript"> 19 wx.config({ 20 debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 21 appId: "", // 必填，公眾號的唯一標識 22 timestamp: "", // 必填，生成簽名的時間戳 23 nonceStr: "", // 必填，生成簽名的隨機串 24 signature: "",// 必填，簽名，見附錄1 25 jsApiList: [ 26 "scanQRCode" //掃一掃功能這個就可以 27 ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 28 }); 29 wx.ready(function(){ 30 31 }); 32 // config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。 33 wx.scanQRCode({ 34 needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果； 這裏我們要處理掃碼結果，所以一定要設為 1 35 scanType: ["qrCode"], // 可以指定掃二維碼還是一維碼，默認二者都有 36 success: function (res) { 37 var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
38 //在這裏我們就可以對 result 這個掃碼結果做處理了
處理代碼如下。。。
39 } 40 41 }); 42 }); 43 44 </script>
【註】以上微信開發老手請忽略！禮畢。
微信公眾號首頁掃一掃功能