微信中调用扫一扫最简便的方法 5行代码实现H5扫一扫 HTML5扫二维码最简便的办法

微信中调用扫一扫最简便的方法 5行代码实现H5扫一扫 HTML5扫二维码最简便的办法调用方式1(推荐。用redirect_uri参数指定接收结果的页面,可以是自身url):<ahref=”https://www.996315.com/api/scan/?redirect_uri=你的网页完整url”>扫描</a>调用方式2(不推荐):<ahref=”https://www.996315.com/api/scan/”>扫描</a>调用方式3(用js调用。本质和方式1、2一样):<ahref=”javascr

大家好,又见面了,我是你们的朋友全栈君。

直接上代码:

<a href="//996315.com/api/scan/">扫描</a>

<script>
var qr=GetQueryString("qrresult");
if(qr) alert(qr);//放入表单输入框或者发送到后台,具体根据自己的业务做相应的处理

function GetQueryString(name){
    var reg = new RegExp("\\b"+ name +"=([^&]*)");
    var r = location.href.match(reg);
    if (r!=null) return decodeURIComponent(r[1]);
}
</script>

以上保存到htm放到你服务器上然后访问即可。无论是ip还是localhost或者带端口的url都可以调用扫码并获得结果。扫条形码也是可以的。

以下是代码将扫描到的内容放入输入框,例如条形码:

<input type="text" id="sn">
<a href="//996315.com/api/scan/">扫描(Scan)</a>

<script type="text/javascript">
var qr=GetQueryString("qrresult");
if(qr) document.getElementById("sn").value=qr;
 
function GetQueryString(name){
    var reg = new RegExp("\\b"+ name +"=([^&]*)");
    var r = location.href.match(reg);
    if (r!=null) return decodeURIComponent(r[1]);
}
</script>

条形码的话会带上类型,直接以逗号分隔截取下好了:

if(qr) document.getElementById("sn").value=qr.split(",")[1];

如果不想扫码后回调到自身,而是将结果发到指定的url处理(注意目标url处要做好获取qrresult参数的处理工作,参考上面script块的处理),可以使用redirect_uri参数:

<a href="//996315.com/api/scan/?redirect_uri=指定网址">扫描</a>

测试地址1(测试需要在微信里打开):
http://www.jiujiujin.net/testsaoyisao.htm
此项适合在自己网页中加入扫一扫,比如表单中需要录入快递单号。

测试地址2(测试需要在微信里打开):
https://996315.com/api/scan/?redirect_uri=http://www.jiujiujin.net/wuliu.htm
这个适合在微信菜单里设置“扫一扫”,然后url指向到上面这样的网址,其中redirect_uri可以改成您需要接收二维码数据的地址,上面例子是扫描快递单号然后显示物流信息。

测试地址3(测试需要在微信里打开):
此案例是一个防伪查询的应用,扫印刷物的可变防伪码,然后16位数自动上屏。
https://www.chhina3-15.cn/ycmbtest/

点击后扫描下面二维码:

微信中调用扫一扫最简便的方法 5行代码实现H5扫一扫 HTML5扫二维码最简便的办法

上图为一个16位数(例如:1234123412341234)的二维码图片,可到liantu.com自行生成测试

测试地址4(测试需要在微信里打开):
http://www.jiujiujin.net/chakuaidi.htm
下图是应用于通过百度查询快递单号的例子。

微信中调用扫一扫最简便的方法 5行代码实现H5扫一扫 HTML5扫二维码最简便的办法

扫快递单代码如下:

<a href="//996315.com/api/scan/">查快递</a>
<script type="text/javascript">
var qr=getQueryString("qrresult");

if(qr){
	var wl=qr.split("CODE_128,");
	if (wl.length==2){
		location.replace("https://www.baidu.com/s?wd=" + wl[1]);
	}else{
		alert("您扫描的不是快递单号!所以无法为您查询物流。请对准快递单条形码进行扫描!");
	}
}

function getQueryString(name){
	var reg = new RegExp("\\b"+ name +"=([^&]*)");
	var r = location.href.match(reg);
	if (r!=null) return decodeURIComponent(r[1]);
}
</script>

上面保存为sample.htm,这样通过服务器打开的话就可以点击里面的按钮去扫描快递单号,然后通过百度查到物流记录。 如果是想要截图那样直接点击菜单就扫描,那么可以构造个这样的链接设置到菜单里面:
https://www.996315.com/api/scan/?redirect_uri=你的网址路径/sample.htm

测试图片:

微信中调用扫一扫最简便的方法 5行代码实现H5扫一扫 HTML5扫二维码最简便的办法

其他问题摘要:

1.用于vue,地址里含有#导致接口返回的URL丢失部分内容怎么办?

答:这是浏览器自身问题决定的。参数如果有#会被自动隔断,导致目标页面获取不到。
解决方案是:用redirect_uri=方式调用接口,将网址中的#改为%23,有个简便的办法就是通过js的encodeURIComponent函数来一次性编码后放到redirect_uri参数后,代码如下:

<a href="javascript:window.open('//996315.com/api/scan/?redirect_uri=' + encodeURIComponent(location.href), '_self');">Scan</a>

2.提示无法获取URL来路怎么办?

答:经过测试偶尔会发生这样的问题。有些ip等本地地址可能无法自动获得来路,因此如果发生问题建议使用参数redirect_uri来指定跳转的url

3.回调的网址本身有若干个参数,在回调后都丢失了怎么办?

答:接口升级后这个问题一般不会发生了,无须redirect_uri指定也可以。
如果万一还发生那么处理方法还是一样,就是将特殊字符都转义,例如将=和&都转义,可以用encodeURIComponent(location.href)一下子都转义,然后放到redirect_uri=中调用。

ps:旧接口sao315被人非法调用频繁被微信封,已经废掉了,新的接口有限开放。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/144825.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Win知识 – 程序是怎样跑起来的(合集)

    Win知识 – 程序是怎样跑起来的(合集)操作系统的硬件控制功能,通常是通过一些小的函数集合体的形式来提供的。这些函数及调用函数的行为统称为系统调用(systemcall),也就是应用对操作系统(system)的功能进行调用(call)的意思。在前面的程序中用到了time()及printf()等函数,这些函数内部也都使用了系统调用。这里之所以用“内部”这个词,是因为在Windows操作系统中,提供返回当前日期和时刻,以及在显示器中显示字…

    2022年6月28日
  • 为Nginx开启SSI模块以支持SHTML解析

    为Nginx开启SSI模块以支持SHTML解析

    2021年8月29日
  • fpga编程语言VHDL_vhdl和fpga

    fpga编程语言VHDL_vhdl和fpga硬件新手疑问1:大家都在争硬件开发是选择单片机,DSP,ARM还是FPGA呢?以我个人经验,我也是在硬件方面做了几年的老油条了,大学时玩过单片机,也就是大家常说的C51,C52,单片机驱动个流水灯还行,但是研究生阶段遇到的很多问题,单片机就有心无力了。至于ARM,DSPorFPGA,由于研一做无人机做了DSP的项目,鄙人觉得DSP入手比较难,但是DSP主攻方向是算法研究的,用于算法处理,绝对是…

    2022年9月21日
  • php图片加水印(华为关水印)

    很多站长朋友们都知道,Phpcmsv9有自带的水印功能。今天无忧主机小编在给一个朋友修改网站时,询问小编能否把Phpcmsv9自带的水印功能去掉呢,因为有时候在编辑器中上传图片时,不希望上传的图片被自动加上phpcmsv9自带的水印。无忧主机小编分析:既然是程序中的功能,那么就一定有一段代码控制着这个功能。通过进一步的查找资料,小编找得到了这个功能所在的文件以及相应的控制代码。下面无忧主机小编…

    2022年4月12日
  • 主机网址怎么查_主机名查询

    主机网址怎么查_主机名查询由于JEO.VEE在做国外空间主机评测服务,平时会有很多朋友询问主机方面的问题,最常见的就是“哪个国外主机商最好?”或者“justhost主机服务怎么样?”等等很多类似的问题。其实国外大部分主机都还是可以的,没有哪个主机商好,也没有哪个最差劲。只有是不适合你。到底怎么知道哪个主机商是否适合自己的站点呢?你可以与你网站规模相类似的站点做下比较。看看对方网站在那个服务器,使用的哪个空间商。比如你的

    2022年10月9日
  • 于Linux-2.6.32内核上编译ipset-6.23的坎坷经历[通俗易懂]

    于Linux-2.6.32内核上编译ipset-6.23的坎坷经历[通俗易懂]新版本的ipset上周在儿童医院给小小看病等待叫号的间隙,收到了Netfilter邮件列表的推送消息,一览了ipset最新的6.23版本的新特性,很多正是我目前所需要的,特别是timeout和skbinfo参数的支持,具体的详情请自行查看manual,如果不想看那么多,我这里简单的贴一下:  timeout      All set types supportstheoptional

    2022年9月1日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号