网站搜索框使用微信扫码功能

背景

客户要求可以直接识别标签二维码来管理一些仪器设备，类似淘宝搜索框，可以直接拍照，搜索商品。已经制作了一个网页来调用摄像机来识别二维码。该功能有两个缺陷：

识别需要先拍照，但识别率低，尤其是在图片抖动、二维码内容多一点或者二维码小一点的时候。以上两点加起来相当没用。

用微信扫码

由于我们的系统已经集成到微信微信官方账号中，我们准备调用微信扫码(只有在微信中打开的页面才能使用微信扫码)。参考官方文件

绑定域名

打开微信官方账号设置

选择功能设置

添加JS接口安全域名，注意你添加的域名目录下最后一张图片中微信指定的文件。如果文件不在根目录中，则需要在子目录中填写域名

导入JS文件

使用vs2019创建默认的ASP.NET MVC项目

index.cshtml页面中使用的页面引用js

脚本src=' http :3358 RES . wx . QQ.com/open/js/jweixin-1 . 1 . 0 . js '/脚本前端主代码

$(function () {/** *判断页面是否在微信内部打开* */function为weixin(){ var ua=window . navigator . user agent . to lower case()；console . log(ua)；//Mozilla/5.0(iphone；cpu iphone os 9_1像MAC OS x)apple WebKit/601 . 1 . 46(khtml，像gecko)版本/9.0 mobile/13b 143 safari/601.1 if(ua . match(/micro messenger/I)==' micro messenger '){ return true；} else { return false}}/* * *只能使用* */if (isweixin ()) {$。Ajax ({type:' post '，url3360'/home/getsingdataasync '，data : { ' URL ' : location . href . split(' # ')[0]}，dataType: 'json '，success : function(data){ alert(JSON . stringify(data))；wx . config({ debug 3360 true，//开启调试模式，所有被调用API的返回值都会在客户端告警时发出。要查看传入的参数，可以在pc端打开，参数信息会通过log打印出来，只在pc端打印。AppId: data.appId，//必选，微信官方账号唯一标识，timestamp3360data。timestamp，//必选，生成签名的时间戳，noncestr3360data。noncestr，//必选。生成随机签名字符串signature re : data . signature，//必选。签名见附录1 jsapi list: ['检查jsapi '，'开始记录'，'停止记录'，'翻译语音'，'扫描二维码'。//微信扫描接口‘openCard’]//必选，需要使用的JS接口列表，所有JS接口列表见附件2)；wx . error(function(RES){ alert(' error ':RES . errmsg)；//这个地方的好处是wx.config配置不正确，会弹出一个窗口，哪里不对，然后可以根据微信文档进行查询。});wx . ready(function(){ wx . checkjsapi({ jsapi list :[' scan QR code ']，success 3360 function(RES){//扫描QR code ({needresult : 1，//默认值为0，扫描结果由微信处理，1将直接返回扫描结果，scantype3360[' QR code '])。//可以指定是扫描二维码还是一维码。默认情况下，两者都有success 3360函数(RES){ var result=RES . result str；needResult为1时，扫码返回的结果为alert(结果)；//因为我扫描后有链接，然后跳转到这个页面}，错误： function(){ console . log(' 123 ')；} });} });});}，error:函数(url) { alert('出现错误！');} });} else {alert('请用微信打开')；}})后端代码

公共类家庭控制器：控制器{ //把应用编号和APP_SECRET换成你自己的私人警察字符串APPID=' * * * * *私有常量字符串APP _ SECRET=' * * * * *//为了调试方便我这里第一次把代币和票获取到之后就写死了，应该写入缓存(7200s过期)私有静态字符串token=' 24 _ cqsz 9 scwyxlnpaa5 jlfhtfuq2e 3i w5l 8 jywfupqintk 4 itootz 7 DP 0 Fv 190 zhty5st-jeuDzYwoUj _ hvhshdx 288 yyvvcvmzrpwld8 ccttzwgntkzz 53 jykkd 5 F8 u1e 886 msdprworgbajabet '；私有静态字符串ticket=' hoagfkdcsgmvci 2 OJ F9 qza _ fkpp 3 enjnt58 qu 16 hzzn-3k WAP 0nk 6 jgqm 0 jyac 0 sk8 cxagkt9 _ dsgp 6 chcpw '；public ActionResult Index(){ return View()；}公共行动结果关于(){ viewpag .消息='您的应用程序描述页；返回视图();}公共行动结果联系人(){ viewpag .消息='您的联系页面；返回视图();}公共异步任务GetToken(){ await GetTicketAsync()；} //获取代币和票证私有async TaskString getTicketAsync(){ var token URL=$ ' https://API。微信。QQ。com/CGI-bin/token？grant _ type=client _ credential APPID={ APP id } SECRET={ APP _ SECRET } '；风险值客户端=新系统净。WebClient()；客户。编码=编码UTF8 .客户。标题。添加('内容类型','应用程序/x-www-form-URL编码')；var responseData=客户端上传数据(令牌Url，' POST '，新字节[0]);var responseText=编码. UTF8。GetString(响应Ta)；var token=JsonConvert .反序列化匿名用户类型(responseText，new { access_token=' '，expires _ in=' ' })；Token=token.access _ tokenvar票证URL=$ ' https://API。微信。QQ。com/CGI-bin/ticket/getticket？access _ Token={ Token }类型=jsapi '；var ticResponseData=客户端上传数据(标签，“开机自检”，新字节[0]);var ticResponseText=编码. UTF8。GetString(ticresponseDa)；var ticket=JsonConvert .反序列化匿名用户类型(ticResponseText，new { errcode=' '，errmsg=' '，ticket=' '，expires _ in=' ' })；票返回"";} //获取签名字符串公共异步任务字符串GetSingDataAsync(字符串URL){ var sign=new sign data()；sign.appId=APPIDsign。非波峰=Create _ nonce _ str()；签名。时间戳=Create _ timestamp()；//var url=请求Url。绝对的(网址.IndexOf('#') 0) { url=url .子字符串(0，网址.IndexOf(' # ')；} sign . URL=URL var string 1=' jsapi _ Ticket=' Ticket ' non estr=' sign。非estr“时间戳=”符号。时间戳“URL=”符号。网址；//var string 1=GetTestSign()；var sha1=SHA1 .create()；sign.signature=ByteToHex(sha1 .编码. UTF8。GetBytes(字符串1)))；返回JsonConvert .SerializeObject(符号);} //测试签名字符串，和微信官方提供的一样，用来测试签名方法是否正确私有字符串GetTestSign(){ var nonceStr=' wm3 wzytpz 0 wzccnw '；var ticket=' sm4 aovdwfpe4 dxk xges 8 vmcpggvi4c 3 vm0 p 37 wvucfvkvay _ 90u 5 H9 nbs ly 3-Sl-hhtdfl 2 fzfy 1 och KP 7 qg '；定义变量时间戳=' 1414587457 ';var url='http://mp.weixin.qq.com？params=value '；var字符串1=' jsapi _ ticket=' ticket ' non estr=' non estr ' timestamp=' timestamp ' URL=' URL；返回string 1 }////摘要///随机字符串////摘要////返回/返回私有字符串create _ nonce _ str(){ 0返回Guid .NewGuid().ToString().子串(0,8);} ///摘要///时间戳////摘要////返回/返回私有字符串create _ timestamp(){ return(DateTime .现在。刻度/100000000)。ToString()；}私有字符串ByteToHex(byte[]hash){ var sb=new StringBuilder()；foreach(散列中的风险值b){ sb .追加(b . ToString(' x2 ')；}归还某人. ToString()；}}代码已上传开源代码库

总结

以上是边肖介绍的网站搜索框，使用微信扫码功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！