厉害了网页扫码,所有方法都给你总结到这了!赶紧收藏

1,351 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第 2 天!

最近做一个项目,要通过扫一扫查询对应的信息,由于现在已经有一部分二维码已被生成,为了兼顾已生成的二维码,所以需要使用网页的扫一扫功能去完成项目。

项目使用技术栈:vue2

厉害了网页扫码,所有方法都给你总结到这了!赶紧收藏

方案一、js 原生

热心的同事帮我已经找好了网页扫一扫 DEMO,给我说已经测试过了,Andriod 和 IOS 都可以正常使用。

使用 QRScanner 插件

其原理是通过
navigator.mediaDevices.getUserMedia 来获取用户的摄像头使用权限:

navigator.mediaDevices.getUserMedia(constraints)
.then(res => {  })
.catch(err => {  })

使用自己的 苹果11 测试完全正常,放置服务器上,让同事扫码的时候,真的是异常百态!存在的问题:

1、网页必须使用浏览打开,不可以使用微信内置浏览器。如果是微信打开,会提示 “对不起,未识别到扫描设备”。

2、有些手机,摄像头一直是前置摄像头,通过 facingMode 设置无效:

{ facingMode: { exact: "environment" } }

3、非手机内置浏览器,如:QQ、UC、百度等浏览器APP内,会存在找不到扫瞄设备。

4、最重要的是用户体验差。用户需要在浏览器打开,授权之后,才能进行扫码。

5、开发需要调试的设备较多。
navigator.mediaDevices.getUserMedia 兼容性差。

方案二、vue-qr 插件

官方文档:
www.npmjs.com/package/vue…

该插件不仅支持 vue2 ,还支持 vue3 。功能强大,能够生成二维码,还能够扫描、识别二维码,解析二维码。

git 地址:
github.com/MuGuiLin/QR…

  • 有一个 HTML 版本。
  • 有一个 vue.js 版本。

测试地址:Demo:
muguilin.github.io/QRCode

存在问题:

1、网页必须使用浏览打开,不可以使用微信内置浏览器。如果是微信打开,会提示 “对不起,未识别到扫描设备”。

2、非手机内置浏览器,如:QQ、UC、百度等浏览器APP内,会存在找不到扫瞄设备。

3、最重要的是用户体验差。用户需要在浏览器打开,授权之后,才能进行扫码。

方案三、微信扫一扫

我把测试地址发到公司群,让同事帮我测试的时候,我发现程序员测试都说没问题,非程序员基本都是直接使用微信,点击扫一扫的时候,统一都是:“ 对不起,未识别到扫描设备 ”。转念一想,扫一扫好像是给开发同事做的。

转换思路,让用户在微信内直接点进去之后就可以进行扫码!所以选择 微信网页开发 -> 调用微信扫一扫。

优点:

1、用户使用方便,直接可以使用微信扫码。

2、开发方便,不用再考虑兼容安卓和ios的各种浏览器。

实现步骤:

  • 1、引入

引入方式1:

index.html 入口文件处引入 js 插件

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在 wx 使用页面处,可以直接通过 window.wx 引用。

引入方式2:

npm install weixin-js-sdk

在需要使用的页面处,引入 wx 模块:import wx from 'weixin-js-sdk'

  • 2、配置
wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 appId: '', // 必填,公众号的唯一标识
 timestamp: , // 必填,生成签名的时间戳
 nonceStr: '', // 必填,生成签名的随机串
 signature: '',// 必填,签名
 jsApiList: [] // 必填,需要使用的JS接口列表
});
  • 3、调用方法
wx.scanQRCode({
 needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
 scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
 success: function (res) {
  var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
 }
});

具体的实现步骤以及可能遇到的问题都总结到《手把手教你调用微信扫一扫!三分钟包会》,需要的自行查阅。