網(wǎng)站搜索框使用微信掃碼功能
背景
客戶要求可以直接識(shí)別標(biāo)簽二維碼對(duì)某些儀器設(shè)備進(jìn)行管理,類(lèi)似于淘寶搜索框可以直接拍照搜索商品一樣。前面已經(jīng)做了一個(gè)網(wǎng)頁(yè)調(diào)用攝像頭識(shí)別二維碼的功能,此功能有兩個(gè)缺陷:
- 識(shí)別需要先拍照,不能直接識(shí)別
- 識(shí)別率低,尤其是拍照抖動(dòng),二維碼內(nèi)容稍微多一點(diǎn)或二維碼小一點(diǎn)就識(shí)別不了。
以上兩點(diǎn)相加就相當(dāng)不好用了。
使用微信掃碼
鑒于我們的系統(tǒng)已經(jīng)集成到了微信公眾號(hào),所以準(zhǔn)備調(diào)用微信掃碼(只有在微信內(nèi)打開(kāi)的頁(yè)面才能使用微信掃碼)。
參照官方文檔
綁定域名
打開(kāi)公眾號(hào)設(shè)置
選擇功能設(shè)置
添加JS接口安全域名,注意你添加的域名目錄下面上次圖中微信指定的文件,如果文件沒(méi)在根目錄,域名需要填寫(xiě)到子目錄
引入JS文件
使用vs2019創(chuàng)建默認(rèn)的asp.net mvc項(xiàng)目
在index.cshtml頁(yè)面中使用的頁(yè)面引用js
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
前端主要代碼
$(function () { /** * 判斷是否微信內(nèi)部打開(kāi)頁(yè)面 * */ function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1 if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } /** * 只有微信內(nèi)部頁(yè)面打開(kāi)才能用 * */ if (isWeiXin()) { $.ajax({ type: "post", url: "/Home/GetSingDataAsync", data: { "url": location.href.split('#')[0] }, dataType: "json", success: function (data) { alert(JSON.stringify(data)); wx.config({ debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId: data.appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: data.timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: data.nonceStr, // 必填,生成簽名的隨機(jī)串 signature: data.signature,// 必填,簽名,見(jiàn)附錄1 jsApiList: [ 'checkJsApi', 'startRecord', 'stopRecord', 'translateVoice', 'scanQRCode',// 微信掃一掃接口 'openCard' ] // 必填,需要使用的JS接口列表,所有JS接口列表見(jiàn)附錄2 }); wx.error(function (res) { alert("出錯(cuò)了:" + res.errMsg);//這個(gè)地方的好處就是wx.config配置錯(cuò)誤,會(huì)彈出窗口哪里錯(cuò)誤,然后根據(jù)微信文檔查詢即可。 }); wx.ready(function () { wx.checkJsApi({ jsApiList: ['scanQRCode'], success: function (res) { //掃描二維碼 wx.scanQRCode({ needResult: 1, // 默認(rèn)為0,掃描結(jié)果由微信處理,1則直接返回掃描結(jié)果, scanType: ["qrCode"], // 可以指定掃二維碼還是一維碼,默認(rèn)二者都有 success: function (res) { var result = res.resultStr; // 當(dāng)needResult 為 1 時(shí),掃碼返回的結(jié)果 alert(result);//因?yàn)槲疫@邊是掃描后有個(gè)鏈接,然后跳轉(zhuǎn)到該頁(yè)面 }, error: function () { console.log('123'); } }); } }); }); }, error: function (url) { alert("An error occurred!"); } }); } else { alert("請(qǐng)使用微信打開(kāi)"); } })
后端代碼
public class HomeController : Controller { //把APPID和APP_SECRET換成你自己的 private const string APPID = "******"; private const string APP_SECRET = "******"; //為了調(diào)試方便我這里第一次把Token和Ticket獲取到之后就寫(xiě)死了,應(yīng)該寫(xiě)入緩存(7200s過(guò)期) private static string Token = "24_cQsz9scwyXLnPaAes5JlfHTfuQ2e3Iw5L8JyWfUpQiMnTk4IToOTZ7dP0Fv190ZHTy5ST--jeuDzYwoUj_hvhSHDX288YYLYVcrmvMzRPwld8ccTTzWGNTKZz53jYKDy5f8U1E886msDPsrwORGbAJABET"; private static string Ticket = "HoagFKDcsGMVCIY2vOjf9qZA_fkPP3enjnT58qu16hzZN-3kwAP0NK6jgQM0jyAc0sK8cxaGkT9_DSgp6cHCpw"; public ActionResult Index() { return View(); } public ActionResult About() { ViewBag.Message = "Your application description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } public async Task GetToken() { await GetTicketAsync(); } //獲取token和ticket private async Task<string> GetTicketAsync() { var tokenUrl = $"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={APPID}&secret={APP_SECRET}"; var client = new System.Net.WebClient(); client.Encoding = Encoding.UTF8; client.Headers.Add("Content-Type", "Application/x-www-form-urlencoded"); var responseData = client.UploadData(tokenUrl, "POST", new byte[0]); var responseText = Encoding.UTF8.GetString(responseData); var token = JsonConvert.DeserializeAnonymousType(responseText, new { access_token = "", expires_in = "" }); Token = token.access_token; var ticketUrl = $"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={Token}&type=jsapi"; var ticResponseData = client.UploadData(ticketUrl, "POST", new byte[0]); var ticResponseText = Encoding.UTF8.GetString(ticResponseData); var ticket = JsonConvert.DeserializeAnonymousType(ticResponseText, new { errcode = "", errmsg = "", ticket = "", expires_in = "" }); Ticket = ticket.ticket; return ""; } //獲取簽名字符串 public async Task<string> GetSingDataAsync(string url) { var sign = new SignData(); sign.appId = APPID; sign.nonceStr = Create_nonce_str(); sign.timestamp = Create_timestamp(); //var url = Request.Url.AbsoluteUri; if (url.IndexOf('#') > 0) { url = url.Substring(0, url.IndexOf('#')); } sign.url = url; var string1 = "jsapi_ticket=" + Ticket + "&noncestr=" + sign.nonceStr + "×tamp=" + sign.timestamp + "&url=" + sign.url; //var string1 = GetTestSign(); var sha1 = SHA1.Create(); sign.signature = ByteToHex(sha1.ComputeHash(Encoding.UTF8.GetBytes(string1))); return JsonConvert.SerializeObject(sign); } //測(cè)試簽名字符串,和微信官方提供的一樣,用來(lái)測(cè)試簽名方法是否正確 private string GetTestSign() { var nonceStr = "Wm3WZYTPz0wzccnW"; var ticket = "sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg"; var timestamp = "1414587457"; var url = "http://mp.weixin.qq.com?params=value"; var string1 = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url=" + url; return string1; } /// <summary> /// 隨機(jī)字符串 /// </summary> /// <returns></returns> private string Create_nonce_str() { return Guid.NewGuid().ToString().Substring(0, 8); } /// <summary> /// 時(shí)間戳 /// </summary> /// <returns></returns> private string Create_timestamp() { return (DateTime.Now.Ticks / 100000000).ToString(); } private string ByteToHex(byte[] hash) { var sb = new StringBuilder(); foreach (var b in hash) { sb.Append(b.ToString("x2")); } return sb.ToString(); } }
代碼已上傳github
總結(jié)
以上所述是小編給大家介紹的網(wǎng)站搜索框使用微信掃碼功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- jQuery實(shí)現(xiàn)的類(lèi)似淘寶網(wǎng)站搜索框樣式代碼分享
- java實(shí)現(xiàn)網(wǎng)站微信掃碼支付
- php實(shí)現(xiàn)微信原生支付(掃碼支付)功能
- 自定義PC微信掃碼登錄樣式寫(xiě)法
- 詳解JAVA后端實(shí)現(xiàn)統(tǒng)一掃碼支付:微信篇
- php實(shí)現(xiàn)微信掃碼自動(dòng)登陸與注冊(cè)功能
- PC 端微信掃碼注冊(cè)和登錄實(shí)例
- .NET微信開(kāi)發(fā)之PC 端微信掃碼注冊(cè)和登錄功能實(shí)現(xiàn)
- 分享微信掃碼支付開(kāi)發(fā)遇到問(wèn)題及解決方案-附Ecshop微信支付插件
相關(guān)文章
聊聊Flare應(yīng)用前后端性能優(yōu)化問(wèn)題
這篇文章主要介紹了Flare應(yīng)用前后端性能優(yōu)化,制作?flare?的過(guò)程,其實(shí)也是?flame?性能調(diào)優(yōu)的過(guò)程。不過(guò)在解決問(wèn)題之前,我們首先得能定位問(wèn)題有哪些,帶著這些問(wèn)題一起通過(guò)本文學(xué)習(xí)吧2022-02-02Trie樹(shù)_字典樹(shù)(字符串排序)簡(jiǎn)介及實(shí)現(xiàn)
有時(shí),我們會(huì)碰到對(duì)字符串的排序,若采用一些經(jīng)典的排序算法,則時(shí)間復(fù)雜度一般為O(n*lgn),但若采用Trie樹(shù),則時(shí)間復(fù)雜度僅為O(n)2014-03-03UTC時(shí)間、GMT時(shí)間、本地時(shí)間、Unix時(shí)間戳的具體使用
本文主要介紹了UTC時(shí)間、GMT時(shí)間、本地時(shí)間、Unix時(shí)間戳的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09C++/QT/Python/MATLAB獲取文件行數(shù)的示例詳解
這篇文章主要為大家學(xué)習(xí)介紹了如何利用C++、QT、Python、MATLAB分別實(shí)現(xiàn)獲取文件行數(shù)的功能,文中的示例代碼講解詳細(xì),需要的可以參考一下2023-08-08從學(xué)習(xí)到接單賺錢(qián) 十大網(wǎng)絡(luò)技術(shù)人員推薦收藏的網(wǎng)站
這篇文章主要介紹了從學(xué)習(xí)到接單賺錢(qián) 十大網(wǎng)絡(luò)技術(shù)人員推薦收藏的網(wǎng)站,需要的朋友可以參考下2015-08-08百度HI QQ和MSN 阿里旺旺貿(mào)易通MSN在線客服在線聊天代碼
有時(shí)候業(yè)務(wù)需要,需要讓客戶更方便的與我們溝通,就可以參考下面的代碼。2010-04-04基于Python和Java實(shí)現(xiàn)單詞計(jì)數(shù)(Word Count)
Spark框架也是MapReduce-like模型,采用“分治-聚合”策略來(lái)對(duì)數(shù)據(jù)分布進(jìn)行分布并行處理,本文就來(lái)利用Spark實(shí)現(xiàn)單詞統(tǒng)計(jì)的功能,需要的可以參考一下2023-05-05