h5网页调起扫一扫最简单的方法

简介: h5网页调起扫一扫最简单的方法

其实很简单,几乎是开箱即用。接口地址是://996315.com/api/scan/

  1. 首先在a标签中链接指向它
<a href="//996315.com/api/scan/">扫码</a>
  1. 当链接被点击,它就会去调用扫一扫,然后会再跳转回来,此时网址已经多了个qrresult参数,扫码扫到的内容就在附在这个参数后面,去获取这个参数的内容即可。
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var qr=getQueryVariable("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参数。

目录
相关文章
|
缓存 算法 网络协议
公众号JSSDK获取signature签名,史上最全,没有之一
公众号JSSDK获取signature签名,史上最全,没有之一
1057 0
|
移动开发 前端开发 应用服务中间件
解决前端H5调用后端接口出现302问题总结
解决前端H5调用后端接口出现302问题总结
9473 0
解决前端H5调用后端接口出现302问题总结
|
JavaScript 前端开发
JS之url进行编码和解码(三种方式)
JS之url进行编码和解码(三种方式)
20160 2
|
数据可视化 JavaScript 前端开发
推荐8个炫酷的数据可视化大屏项目
推荐8个炫酷的数据可视化大屏项目
5936 1
|
小程序 JavaScript 开发工具
Uniapp 对接抖音短剧播放器 video-player 坑点解决
Uniapp 对接抖音短剧播放器 video-player 坑点解决
785 1
|
移动开发 前端开发 API
uniapp实现条码扫描 可开闪光灯,原生H5调用,不需要任何sdk。
一维码识别功能使用的是Quagga这个库。调用摄像头使用的 navigator.mediaDevices.getUserMedia 这个H5的api。通过 video 和 canvas 把摄像头获取到的数据展现到页面上,同时调用监听Quagga解析。
1647 0
|
消息中间件 数据采集 存储
大数据数据采集的数据采集(收集/聚合)的Flume之数据采集流程的Channel的Kafka Channel
在大数据处理和管理中,数据采集是非常重要的一环。为了更加高效地进行数据采集,Flume作为一种流式数据采集工具得到了广泛的应用。其中,Flume的Channel模块是实现数据缓存和传输的核心模块之一。本文将介绍Flume中的Kafka Channel,讲解其数据采集流程。
418 0
|
Android开发
Uniapp 与原生android的交互 和简单配置
Uniapp 与原生android的交互 和简单配置
2412 0
Uniapp 与原生android的交互 和简单配置
|
存储 安全 数据库
ensp中PPP(点对点协议)中的PAP认证 原理和配置命令
ensp中PPP(点对点协议)中的PAP认证 原理和配置命令
1012 0

热门文章

最新文章