ASP.NET MVC作的微信WEBAPP中調用微信JSSDK掃一掃

今天作一個項目，是在微信上用的，微信WEB APP，裏面用到了調用手機攝像頭掃一掃二維碼的功能，記得之前某個項目裏寫有的，可是找不到以前那個項目源碼了，想複製粘貼也複製不了了，只好對着微信的那個開發文檔從新再寫過 ，順便寫個博客，之後碰到相同的問題直接複製博客裏的代碼就好了

如下是顯示在微信上的頁面：

 

如下是頁面的代碼，（用到了MUI）：

 

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

 

<header class="mui-bar mui-bar-nav">

    <h1 class="mui-title">掃碼認證</h1>

</header>

<div class="mui-content">

    <div style="text-align: center; padding:0.5rem; background: white;">

        <img id="img_shaoma" src="/content/images/shaoma.png" style="width:100px;" />

    </div>

    <div style="margin-top:0.5rem;padding:2rem; text-align: center; background:white;">

        <input id="txtyzm" type="text" placeholder="輸入認證碼驗證產品" />

        <button type="button" class="mui-btn mui-btn-success">點擊認證</button>

    </div>

</div>

 

 

 

@section script{

    <script src="/content/js/mui.min.js"></script>

    <script type="text/javascript">

mui.init(); 

    </script>

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <script>

        wx.config({

            debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。

            appId: "@ViewBag.appid", // 必填，企業號的惟一標識，此處填寫企業號corpid

            timestamp: @ViewBag.timestamp, // 必填，生成簽名的時間戳

            nonceStr: "@ViewBag.noncestr", // 必填，生成簽名的隨機串

            signature: "@ViewBag.signature",// 必填，簽名，見附錄1

            jsApiList: ['scanQRCode'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2

        });

 

        wx.ready(function () {

            // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。

            document.getElementById('img_shaoma').addEventListener('tap', function () {

                wx.scanQRCode({

                    needResult: 1, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，

                    scanType: ["qrCode", "barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有

                    success: function (res) {

                        var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果

                       // mui.alert("掃碼結果：" + result);

                        document.getElementById("txtyzm").value = result;

                    }

                });

            })

        });

 

    </script>

}

 

如下是對應的控制器後臺代碼：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Niunan.NiaoRen.Web.Areas.Seller.Controllers

{

    public class ShaoMaController : Controller

    {

        //賣家中心-掃碼頁面

        public ActionResult Index()

        {

            #region 用到微信掃一掃接口須要用的東西

            WxPayAPI.NiunanWXHelper wxhelper = new WxPayAPI.NiunanWXHelper();

            WxPayAPI.WxPayData config_data = wxhelper.GetJSSDKConfig();

            ViewBag.appid = config_data.GetValue("appId");

            ViewBag.timestamp = config_data.GetValue("timestamp");

            ViewBag.noncestr = config_data.GetValue("nonceStr");

            ViewBag.signature = config_data.GetValue("signature"); 

            #endregion

            return View();

        }

    }

}

如下是NiunanWXHelper 的代碼，用到了一些原來微信官方DEMO裏的一些方法，因此建立在了微信官方DEMO的那個項目中：

using LitJson;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Web;

using System.Web.Security;

 

/// <summary>

/// 牛腩本身寫的微信helper

/// https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

/// </summary>

namespace WxPayAPI

{

    public class NiunanWXHelper

    {

        /// <summary>

        ///   返回使用微信JS-SDK接口的配置

        //    appId: @ViewBag.wx_appid, // 必填，企業號的惟一標識，此處填寫企業號corpid

        //    timestamp: @ViewBag.wx_timestamp, // 必填，生成簽名的時間戳

        //    nonceStr: @ViewBag.wx_noncestr, // 必填，生成簽名的隨機串

        //    signature: @ViewBag.wx_signature,// 必填，簽名，見附錄1

        /// </summary>

        /// <returns></returns>

        public WxPayData GetJSSDKConfig()

        {

            string appid = WxPayConfig.APPID;

            string secret = WxPayConfig.APPSECRET;

            string timestamp = WxPayApi.GenerateTimeStamp();

            string noncestr = WxPayApi.GenerateNonceStr();

            string signature = "";

 

            //簽名算法  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

            //1. 獲取AccessToken（有效期7200秒，開發者必須在本身的服務全局緩存access_token）

            string url1 = $"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={appid}&secret={secret}";

            string result = HttpService.Get(url1);

            JsonData jd = JsonMapper.ToObject(result);

            string access_token = (string)jd["access_token"];

 

            //2. 用第一步拿到的access_token 採用http GET方式請求得到jsapi_ticket（有效期7200秒，開發者必須在本身的服務全局緩存jsapi_ticket）

            string url2 = $"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={access_token}&type=jsapi";

            string result2 = HttpService.Get(url2);

            JsonData jd2 = JsonMapper.ToObject(result2);

            string ticket = (string)jd2["ticket"];

 

            //3. 開始簽名

            string now_url = HttpContext.Current.Request.Url.AbsoluteUri;

            string no_jiami = $"jsapi_ticket={ticket}&noncestr={noncestr}&timestamp={timestamp}&url={now_url}";

            //SHA1加密

            signature = FormsAuthentication.HashPasswordForStoringInConfigFile(no_jiami, "SHA1");

 

            WxPayData data = new WxPayData();

            data.SetValue("appId", appid);

            data.SetValue("timestamp", timestamp);

            data.SetValue("nonceStr", noncestr);

            data.SetValue("signature", signature);

 

            Log.Debug(this.GetType().ToString(), "使用微信JS-SDK接口的配置 : " + data.ToPrintStr());

 

            return data;

        }

    }

}

 

從官網下載的DEMO是ASPX的，我把裏面的lib文件夾和business文件夾抽出來放到WXPAYAPI項目中了