网站搜索框使用微信扫码
程序员文章站
2022-03-20 16:53:28
背景 客户要求可以直接识别标签二维码对某些仪器设备进行管理,类似于淘宝搜索框可以直接拍照搜索商品一样。前面已经做了一个 "网页调用摄像头识别二维码的功能" ,此功能有两个缺陷: 识别需要先拍照,不能直接识别 识别率低,尤其是拍照抖动,二维码内容稍微多一点或二维码小一点就识别不了。 以上两点相加就相当 ......
背景
客户要求可以直接识别标签二维码对某些仪器设备进行管理,类似于淘宝搜索框可以直接拍照搜索商品一样。前面已经做了一个,此功能有两个缺陷:
- 识别需要先拍照,不能直接识别
- 识别率低,尤其是拍照抖动,二维码内容稍微多一点或二维码小一点就识别不了。
以上两点相加就相当不好用了。
使用微信扫码
鉴于我们的系统已经集成到了微信公众号,所以准备调用微信扫码(只有在微信内打开的页面才能使用微信扫码)。
参照
绑定域名
打开公众号设置
选择功能设置
添加js接口安全域名,注意你添加的域名目录下面上次图中微信指定的文件,如果文件没在根目录,域名需要填写到子目录
引入js文件
使用vs2019创建默认的asp.net mvc项目
在index.cshtml页面中使用的页面引用js<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
前端主要代码
$(function () { /** * 判断是否微信内部打开页面 * */ 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; } } /** * 只有微信内部页面打开才能用 * */ 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, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appid: data.appid, // 必填,公众号的唯一标识 timestamp: data.timestamp, // 必填,生成签名的时间戳 noncestr: data.noncestr, // 必填,生成签名的随机串 signature: data.signature,// 必填,签名,见附录1 jsapilist: [ 'checkjsapi', 'startrecord', 'stoprecord', 'translatevoice', 'scanqrcode',// 微信扫一扫接口 'opencard' ] // 必填,需要使用的js接口列表,所有js接口列表见附录2 }); wx.error(function (res) { alert("出错了:" + res.errmsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。 }); wx.ready(function () { wx.checkjsapi({ jsapilist: ['scanqrcode'], success: function (res) { //扫描二维码 wx.scanqrcode({ needresult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scantype: ["qrcode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { var result = res.resultstr; // 当needresult 为 1 时,扫码返回的结果 alert(result);//因为我这边是扫描后有个链接,然后跳转到该页面 }, error: function () { console.log('123'); } }); } }); }); }, error: function (url) { alert("an error occurred!"); } }); } else { alert("请使用微信打开"); } })
后端代码
public class homecontroller : controller { //把appid和app_secret换成你自己的 private const string appid = "******"; private const string app_secret = "******"; //为了调试方便我这里第一次把token和ticket获取到之后就写死了,应该写入缓存(7200s过期) 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); } //测试签名字符串,和微信官方提供的一样,用来测试签名方法是否正确 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> /// 随机字符串 /// </summary> /// <returns></returns> private string create_nonce_str() { return guid.newguid().tostring().substring(0, 8); } /// <summary> /// 时间戳 /// </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
上一篇: C# 自定义异常