分享基于H5实现扫码功能

可乐爱宅着
8,630 阅读4分钟

分享仅仅只是通过使用第三方库来实现基于H5页面的扫码功能，而不会去从navigator.mediaDevices.getUserMedia这个新的Api来一步步开发。

如果对实现H5的扫码实现感兴趣的话，可以去看看：navigator.mediaDevices.getUserMedia 相关的MDN文档。

功能介绍

先来说说H5的扫码常用梁红使用场景，这里列举两种比较长哟的：
一种就是直接打开浏览器来进行扫码，这种就需要基于H5的原生功能来实现；
而另一种的话就是通过微信内置浏览器打开H5页面来进行调用微信的SDK实现扫码（当然也可以用H5原生功能实现）。

基于H5来实现扫码

这里我们需要使用别人封装好的一个H5扫码库：html5-qrcode，这个库分为两种使用方式：

  • Html5QrcodeScanner： 默认带有UI到扫描功能，使用非常简单；
  • Html5Qrcode：更灵活的扫描功能，没有默认的UI界面，自定义性更强。

注意 因为扫码需要调起手机摄像头功能，而这是一个比较隐私的功能，所以需要部署的网站是https协议的或者使用本地localhost也可以，MDN文档说明。

这是官网Html5QrcodeScanner实现的二维码扫描样例：

pixel4_barcode_480.gif

可以看到，这样的UI并不适合于我们开发使用（除非你或者老板觉得很Nice！），所以我们就得需要使用Html5Qrcode的方式来实现二维码扫描功能了。

使用Html5Qrcode来实现二维码扫描也非常的简单，通过官网的代码例子即可实现，代码如下：

import { Html5Qrcode } from "html5-qrcode"

const html5QrCode = new Html5Qrcode("reader");
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
};
const config = { fps: 10, qrbox: { width: 250, height: 250 } };

html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback).catch(err => err);

  1. 通过给Html5Qrcode传入一个ID选择器来创建对应DOM节点的对象，然后通过start方法即可打开手机的摄像头来实现扫码功能（会弹出授权框）。

  2. 其中，facingMode表示开启的是前置摄像后还是后置摄像后，其中environment表示打开后置摄像后即对着环境扫描，而user表示打开前置摄像头，即照自己。

  3. 当扫描成功后，会执行qrCodeSucccessCallback的回调方法，参数有两个：decodedText和decodedResult；其中decodedText是二维码扫描的结果值，decodeResult则是一个扫描成功后返回的对象并包含前者。

基于微信SDK来扫描

当通过微信的内置浏览器打开H5页面时，此时是可以通过微信SDK来调用微信的二维码扫描功能的，这种方式相比于原生H5体验会更加的好。

服务端

使用微信SDK的话，需要服务端来配合，首先看服务端怎么使用：

  1. 首先在 设置与开发->公众号设置->功能设置->JS接口安全域名 中下载的指定文件并填写对应的服务器目录里面，再填写对应的域名即可配置成功；

  2. 通过签名算法来生成对应的签名，一定要好好阅读不然很容易出错；

  3. 把生成的签名通过接口返回。

客户端

当服务端完成配置后，客户端需要下载对应的JSSDK，引入完成后，通过一下代码即可初始化配置：

wx.ready(function(){
    wx.config({
      debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: [] // 必填，需要使用的 JS 接口列表
    });
});

上面的参数，除了timestamp和nonceStr还有signature字段都是通过服务端返回的，完成以上步骤后，通过调用对应API即可实现二维码扫描功能：

wx.scanQRCode({
  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});

效果图如下：

demo11.gif

以上，就是通过H5实现二维码功能的小分享了，并没有去研究原生的API来实现，而是使用的第三方库，这样对于业务开发来更加快速一点，而想了解实现原理的可以去了解。

至此，分享就到此结束啦:)

avatar
文章
阅读
粉丝