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}×tamp={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項目中了
ASP.NET MVC做的微信WEBAPP中調用微信JSSDK掃一掃