前端頁面調用微信掃一掃功能。。。首先瀏覽器環境為微信內置瀏覽器，才可以調用微信掃一掃。
首先需要引用 微信的JS ： <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<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這三個參數，怎么獲得。。
timestamp：時間戳 直接去當前時間戳就行。注意：這個時間戳與簽名是對應的，用同一時間，不能timestamp用了 datetime.now，簽名（signature）又重新取了 datetime.now。會造成簽名錯誤。
nonceStr： 自定義的字符串 作用是生成簽名
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×tamp=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('請用微信打開連接，才可使用掃一掃');
}
用手機微信打開后：
點擊效果,掃碼使用效果：
草料生成個二維碼：
掃描后：
OK 獲取到二維碼里的信息啦 是跳轉頁面，還是業務邏輯你都可以自定義啦