uniapp H5 扫码扫一扫功能

前言
没想到用H5来实现扫码，也是第一次接触，由于项目是打包成H5 ，所以无法调用uniapp scanCode扫码API，在查阅其他前辈博客之后发现H5不是很好实现，最后决定以文件上传的形式来实现。
（效果为 拍照识别，相册照片识别 ）

期间使用过npm包的形式使用，也就是qrcode-decoder，识别率实在是太低，最后还是采用引入qrcode的形式。
1. 引入qrcode.js （直接本地新建空js,然后点下方链接复制代码到该空js文件）
qrcode.js 下载地址 https://gitee.com/xiahaolin/some-important-demo
长的好看的都点⭐了！！！

之后暴露出 qrcode对象，（我看了很多前辈的文章都没有详细讲到uniapp或者vue项目中怎么暴露怎么在页面中使用这个对象所以我这边写的比较细，感兴趣的可以在页面上导出后打印输出一下qrcode）

2.页面使用
首先导出该对象

申明获取文件地址函数

 getObjectURL(file) {var url = nullif (window.createObjectURL !== undefined) { // basicurl = window.createObjectURL(file)} else if (window.URL !== undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file)} else if (window.webkitURL !== undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file)}console.log(url)return url},

最后就是使用解码
我这边图方便直接调用的uniapp的拉取相册和照相机API，获取文件流。
在qrcode中传入通过getObjectURL 返回的url 。最后在qrcode.callback回调中就可以访问到解码值，
小提示：解码失败会返回什么什么error 一条字符串用此来判断识别失败的业务逻辑处理。

     resolveQR(event) {uni.chooseImage({count: 1, //默认9 上传数量success: res => {Qrcode.qrcode.decode(this.getObjectURL(res.tempFiles[0]))Qrcode.qrcode.callback = function(res1) {console.log(res1)    if (res1.indexOf('error') >= 0) {//失败}else{//成功}                  }}})},

！！有一个小点
如果打印输入 Qrcode的话可以看到是有由一个 qrcode 对象点开后可以看到 decode 这个解码方法
没有输出的话看下引入 JS包的时候有没有暴露
还是没有的话就得看下自己的引入路径是不是写错了

------------------------------手动分割----------------------------------------
写了个demo 可以直接在电脑上运行测试识别结果里面有解析中文的JS方法哟移动端H5(JavaScript)识别二维码功能

uniapp H5 扫码扫一扫功能相关推荐

前端在线微信扫码支付的小功能
前两天写了一个微信扫码支付的小功能,采用vue+antDesign,在此记录一下. 功能大概如下输入信息微信扫码支付结果页面 ·输入信息通过下拉选择框的联动,输入信息后点击下一步调取api并进 ...
uni-app二维码、条形码扫码自定义
uni-app二维码.条形码扫码自定义 - DCloud问答 https://github.com/xiaowang1314/uniapp-plugin-collections/blob/master ...
微信公众平台使用JSSDK网页调起扫码并获取扫码数据（PHP）
微信公众平台使用JSSDK网页调起扫码并获取扫码数据初学者,部分css样式在网上扒下来的,功能实现了,代码很糙,非常糙,望海涵,也希望大神多指导. QQ:961052877,有问题大家一起交流.可以 ...
微信小程序使用场景延伸：扫码登录、扫码支付
微信小程序使用场景延伸:扫码登录.扫码支付小程序最适合的使用场景有哪些?相比大家能列举出来很多,但这个场景,大家可能多数没想到_^ 笔者团队近期接到了一个PC项目:转转游戏租号PC官网,该项目要求在 ...
小程序之自定义扫码界面和扫码api学习
微信小程序扫码使用wx.scanCode(Object,Object) 调起客户端扫码界面进行扫码这个是小程序提供的相关扫码api,可以直接调用该api实现扫码相关参数使用例子: 直接调用ap ...
C# 控制新大陆扫码器自动扫码读取序列号
在开始代码前先要准备好两件事: 首先,要安装新大陆的相应驱动,使得COM口能识别到扫码器. 其次,将扫码器切换到代码控制的自动扫码模式.这个找厂家要一下就行,他们会给你一串码,用扫码器扫一下这些码就能 ...
uniapp 二维码展示和扫码
前言在使用 uniapp 开发 APP 或者其他小程序的时候,我们有时候会遇到这样一种场景,那就是展示二维码和扫码,那么对于初次做这个功能的前端小伙伴们来说,有可能不知道怎么进行实现,本人也是第一次 ...
JAVA微信扫码支付模式二功能实现完整例子
概述本例子实现微信扫码支付模式二的支付功能,应用场景是,web网站微信扫码支付.实现从点击付费按钮.到弹出二维码.到用户用手机微信扫码支付.到手机上用户付费成功.web网页再自动调整到支付成功后的页 ...
uniapp扫码调用支付宝扫码
uniapp自带扫码 uni.scanCode({ success: function(res) { console.log(res.result) ...
随手记录JAVA微信扫码支付模式二功能
概述本例子实现微信扫码支付模式二的支付功能,应用场景是,web网站微信扫码支付.实现从点击付费按钮.到弹出二维码.到用户用手机微信扫码支付.到手机上用户付费成功.web网页再自动调整到支付成功后的页 ...

uniapp H5 扫码扫一扫功能

uniapp H5 扫码扫一扫功能相关推荐

最新文章

热门文章

uniapp H5 扫码 扫一扫 功能

uniapp H5 扫码 扫一扫 功能相关推荐

最新文章

热门文章

uniapp H5 扫码扫一扫功能

uniapp H5 扫码扫一扫功能相关推荐