如何轻松实现H5网页中的扫码功能调起指南
最编程
2024-02-22 07:28:36
...
其实很简单,几乎是开箱即用。接口地址是://996315.com/api/scan/
- 首先在a标签中链接指向它
<a href="javascript:window.open('//996315.com/api/scan/?redirect_uri=' + encodeURIComponent(location.href), '_self');">扫码</a>
- 当链接被点击,它就会去调用扫一扫,然后会再跳转回来,此时网址已经多了个qrresult参数,扫码扫到的内容就在附在这个参数后面,去获取这个参数的内容即可。
<script type="text/javascript">
var qr=GetQueryString("qrresult");
if(qr.length>0){
alert(qr);//取到的内容,可以放到你表单的input文本框中,或者提交到后台
}
function GetQueryString(name){
var reg = new RegExp("\\b"+ name +"=([^&]*)");
var r = location.href.match(reg);
if (r!=null) return decodeURIComponent(r[1]);
}
</script>
取到了扫码结果下一步你是决定放文本框还是提交到后台看你业务需要了
其实调用接口还有另外一种方式,即:
<a href="//996315.com/api/scan/?redirect_uri=你的url地址">扫码</a>
功能经过测试是一样的,这个和上面的区别就是明确指定了扫码后将结果发送到指定url。
如果是本页面回调的话就用默认的不带参数的,更省事。
如果需要把扫码结果发送到指定页面就得用上redirect_uri这个参数,告诉接口扫码后跳转到那个页面。
另外,如果你不是用a标签,那么可以在事件中用js代码window.open来打开这个接口地址,也是一样的效果。
ps:缺省redirect_uri参数可能会出现异常,目前在苹果ios系统15.4.1上发现无法获取来源地址的问题,根本原因是高版本的苹果操作系统升级了安全机制,使得referer只能获取域名,如果是ip方式的就只能获取ip地址,后面的目录及文件名还有参数都获取不到。所以建议还是加上redirect_uri参数。
推荐阅读
-
如何轻松创建React中的倒计时功能:实现解耦与通用方法指南
-
如何在H5页面中利用HTML5的qrcode功能实现实体二维码的扫描与识别
-
在手机端的H5网页中,如何使用纯JavaScript实现浏览器对条形码和二维码的摄像头扫描及识别解析
-
如何轻松快速实现微信小程序的扫码功能
-
在H5网页中轻松实现扫描二维码的功能指南
-
如何在H5页面中添加二维码扫描功能?Uniapp如何支持H5的扫码功能呢?
-
在Vue/H5中,如何快速实现实时扫码功能 - 一打开页面就启动扫码功能,借助vue-qrcode-reader库来轻松操作
-
探究H5纯网页在非微信环境中通过扫描二维码实现的功能实践与探讨
-
如何轻松实现H5网页中的扫码功能调起指南
-
如何在uniapp中轻松实现二维码扫描功能 (uni.scanCode指南)