前端調用微信掃一掃

時間 2019-11-16

標籤前端調用微信一掃简体版

原文原文鏈接

前端頁面調用微信掃一掃功能。。。首先瀏覽器環境爲微信內置瀏覽器，才能夠調用微信掃一掃。php

首先須要引用微信的JS ： <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>html

<head>
    <meta charset="UTF-8"/>
    <title>掃描二維碼</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=Yes" />
    <script src="~/js/jquery1.7.2.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>

微信JS，是須要配置 wx.config的咱們在加載JS的時候配置前端

<script>
    $(document).ready(function () {
      

        wx.config({
            debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            appId: '@ViewBag.AppID', // 必填，公衆號的惟一標識
            timestamp: @ViewBag.timestamp, // 必填，生成簽名的時間戳    <%= Html.Encode(ViewData["timestamp" ]) %>
            nonceStr: '@ViewBag.nonceStr', // 必填，生成簽名的隨機串
            signature:'@ViewBag.signature', // 必填，簽名
            jsApiList: ['scanQRCode'] // 必填，須要使用的JS接口列表, 這裏只須要調用掃一掃
        });

       
     });
 
</script>

講一下 timestamp，nonceStr，signature這三個參數，怎麼得到。。jquery

timestamp：時間戳直接去當前時間戳就行。注意：這個時間戳與簽名是對應的，用同一時間，不能timestamp用了 datetime.now，簽名（signature）又從新取了 datetime.now。會形成簽名錯誤。算法

nonceStr：自定義的字符串做用是生成簽名api

signature：簽名由timestamp，nonceStr按照微信的的固定規則來生成：微信規則見附錄1，下面引用如下微信開發文檔的原文：瀏覽器

JS-SDK使用權限簽名算法

jsapi_ticket緩存

生成簽名以前必須先了解一下jsapi_ticket，jsapi_ticket是企業號號用於調用微信JS接口的臨時票據。正常狀況下，jsapi_ticket的有效期爲7200秒，經過access_token來獲取。因爲獲取jsapi_ticket的api調用次數很是有限，頻繁刷新jsapi_ticket會致使api調用受限，影響自身業務，開發者必須在本身的服務全局緩存jsapi_ticket。安全

參考如下文檔獲取access_token（有效期7200秒，開發者必須在本身的服務全局緩存access_token）：http://qydev.weixin.qq.com/wiki/index.php?title=%E4%B8%BB%E5%8A%A8%E8%B0%83%E7%94%A8
用第一步拿到的access_token 採用http GET方式請求得到jsapi_ticket（有效期7200秒，開發者必須在本身的服務全局緩存jsapi_ticket）：https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKE

成功返回以下JSON：服務器

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

得到jsapi_ticket以後，就能夠生成JS-SDK權限驗證的簽名了。

簽名算法

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

即signature=sha1(string1)。示例

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com

步驟1. 對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com

步驟2. 對string1進行sha1簽名，獲得signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
簽名用的url必須是調用JS接口頁面的完整URL。
出於安全考慮，開發者必須在服務器端實現簽名的邏輯。

測試框架爲MVC ,貼出我本身的HTML：

@{
    ViewBag.Title = "WxTest";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>掃描二維碼</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=Yes" />
    <script src="~/js/jquery1.7.2.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
<input type="button" class="test" value="微信掃一掃"/>
</body>
</html>
<script>
    $(document).ready(function () {
      

        wx.config({
            debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
            appId: '@ViewBag.AppID', // 必填，公衆號的惟一標識
            timestamp: @ViewBag.timestamp, // 必填，生成簽名的時間戳    <%= Html.Encode(ViewData["timestamp" ]) %>
            nonceStr: '@ViewBag.nonceStr', // 必填，生成簽名的隨機串
            signature:'@ViewBag.signature', // 必填，簽名
            jsApiList: ['scanQRCode'] // 必填，須要使用的JS接口列表, 這裏只須要調用掃一掃
        });

       
        $(".test").click(function () {
            var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') !== -1;
            if (!isWeixin) {
                alert('請用微信打開鏈接，纔可以使用掃一掃');
            }

            wx.scanQRCode({
                needResult: 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
                scanType: ["qrCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
                success: function (res) {
                    // 掃碼成功，跳轉到二維碼指定頁面（res.resultStr爲掃碼返回的結果）            
                    //  location.href = res.resultStr;
                    var scan = res.resultStr;
                    alert(scan);

                },
                error: function (res) {
                    if (res.errMsg.indexOf('function_not_exist') > 0) {
                        alert('當前版本太低，請進行升級');
                    }
                }
            });
        });
     });
 
</script>

其中，判斷瀏覽器的環境：

var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') !== -1;
            if (!isWeixin) {
                alert('請用微信打開鏈接，纔可以使用掃一掃');
            }

用手機微信打開後：