最近用uniapp开发h5 实现扫码功能 前端界面如图

首先打开uniapp官网，在uni-app官网上发现uni-app不支持H5扫码功能。失望ing
but 往官网下面看 有几行提示信息 惊喜ing

话不多说 上才艺

步骤一：引入sdk
这里有两种引入方式：
1.按照文档的方法，下载js文件，直接引入到项目里

2.通过npm安装

npm install weixin-js-sdk --save
// 按需引入
import wx from 'weixin-js-sdk';

步骤二：配置微信config信息

// 最好是在onLoad中调用
  onLoad: function () { 
    this.getCofig();
  },

methods: {
    // 配置信息
    getCofig() {
      const that = this;
      let url = '';
      let ua = navigator.userAgent.toLowerCase();
      url = window.location.href.split('#')[0]; //获取到的url是当前页面的域名

      // GetWeixinScan 后端提供配置信息
      uni.request({
        url: '/api/goods/wx/wx_jsapi_ticket', // 此处找后端要接口 微信不能使用端口访问端口改为 wx
        method: 'GET',
        data: {
          url: url // 当前页面的域名
        },
        success: (response) => {
          const res = response.data;
          console.log(res, 'resres')
          if (res) {
            that.wxConfig(
              res.appId,
              res.timestamp,
              res.nonceStr,
              res.signature
            );
          } else {
            alert('获取配置信息返回为空');
          }
        }
        , fail: error => {
          console.log(error, '请求获取微信配置失败 请求方法：http://xx.haileer.top:8901/wx_jsapi_ticket');
        }
      });
    },
    //wx.config的配置
    wxConfig(appId, timestamp, nonceStr, signature) {
      wx.config({
        debug: false, // 开启调试模式,
        appId: appId, // 必填，企业号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名
        jsApiList: ['scanQRCode', 'checkJsApi'], // 必填，需要使用的JS接口列表
      });
      wx.ready(() => {
        console.log('配置完成，扫码前准备完成')
      })
      wx.error(function (res) {
        alert('出错了：' + res.errMsg); //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      });
    },
   
}

步骤三：触发事件实现扫码功能

 // 点击扫码 区分普通扫码和H5扫码
    scan() {
      const that = this
      // #ifndef H5
      uni.scanCode({
        success: function (res) {
          console.log("进来了1")
          console.log('条码res：' + res);
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);  
        },
        fail: error => {
          console.log("暂不支持1") 
        }

      });
      // #endif
      // #ifdef H5
      // this.log("暂不支持H5扫码 走onScan这个方法") 
      this.onScan()
      // #endif
    },
       // h5扫描二维码并解析  
    onScan() {
      const that = this; 
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) { 
          var result = res.resultStr; // 当 needResult 为 1 时，扫码返回的结果
          var resultArr = result.split(','); // 扫描结果以逗号分割数组
          var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素，也就是最终的内容 
        },
        fail: function (response) {
          console.log("调用扫码失败")
          that.$toast(response);
          alert(' wx.scanQRCode失败')
        },
      });

    },

注意事项
在调用后端接口获取config信息的时候
1.后端提供的接口 端口号使用wx代替
2.传给后端的url参数，记得一定是网页域名 const url = location.href.split(‘#’)[0]
3.可以提醒后端把jsapi_ticket的值也返回，便于在自行使用工具校验签名算法的时候输入
4.可以提醒后端把timestamp把后三位数去掉，因为签名校验中的timestamp最多只能输入10位

使用到的组件https://github.com/mebjas/html5-qrcode/tree/master/examples/vuejshttps://github.com/mebjas/html5-qrcode/tree/master/examples/vuejs

首先根目录下创建index.html,在其中引入js库

<script src="https://unpkg.com/html5-qrcode"></script>

其次在manifest.json中引入index.html

"h5" : {
        "title" : "xxxx",
        "domain" : "",
        "router" : {
            "mode" : "history"
        },
		// 这里引入html
		 "template" : "index.html",
		 "optimization" : {
			 "treeShaking" : {
				 "enable" : true
			 }
		 }
    }

 最后在页面中调用

<button @click="getCameras" type="warn" class="margin-top" >扫一扫</button>

 展示扫码界面

        <view class="cu-modal" :class="modalName == 'scanModal' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">开始扫码</view>
					<view class="action" @click="hideScanModal">
						<view class="cuIcon-close text-red"></view>
					</view>
				</view>
				<view class="padding-xl">
					<scroll-view scroll-y class="page">
						<div id="qr-reader" style="height: 250px;"></div>
					</scroll-view>
				</view>
			</view>
		</view>

            //关闭扫码窗口
            hideScanModal() {
				this.modalName = null;
				this.stop();
			},
			getCameras() {
				Html5Qrcode.getCameras()
					.then((devices) => {
						/**
						 * devices would be an array of objects of type:
						 * { id: "id", label: "label" }
						 */
						if (devices && devices.length) {
							if (devices.length > 1) {
								this.cameraId = devices[1].id;
							} else {
								this.cameraId = devices[0].id;
							}

							console.log(this.cameraId, "cameraId");
							this.start();
							// .. use this to start scanning.
						}
					})
					.catch((err) => {
						// handle err
					});
			},
            //扫码成功
			getCode(qrCodeMessage) {
				console.log('qrCodeMessage', qrCodeMessage)
				let dzbm = qrCodeMessage.split('?')[1].split('&')[0].split('=')[1]
				console.log("dzbm,", dzbm)
				this.modalName = null;
				if (dzbm) {

					

				}
				return
				let codeId = getUrlParamFromUrl(qrCodeMessage, "id");
				console.log(codeId);
				if (codeId) {
					this.$router.push({
						path: "/home",
						query: {
							codeId: codeId
						}
					});
				} else {
					Dialog.confirm({
							title: "提示",
							message: "二维码错误，请重新扫码",
						})
						.then(() => {
							this.start();
						})
						.catch(() => {
							// on cancel
						});
				}
			},
			stop() {
				this.html5QrCode
					.stop()
					.then((ignore) => {
						// QR Code scanning is stopped.
						console.log("QR Code scanning stopped.");
						this.show = false;
					})
					.catch((err) => {
						// Stop failed, handle it.
						console.log("Unable to stop scanning.");
					});
			},
			start() {
				this.show = true;
				this.modalName = 'scanModal'
				this.html5QrCode = new Html5Qrcode("qr-reader");

				this.html5QrCode
					.start(
						this.cameraId, // retreived in the previous step.
						{
							fps: 10, // sets the framerate to 10 frame per second
							qrbox: 250, // sets only 250 X 250 region of viewfinder to
							// scannable, rest shaded.
						},
						(qrCodeMessage) => {
							// do something when code is read. For example:
							if (qrCodeMessage) {
								this.stop();
								this.getCode(qrCodeMessage);
							}
						},
						(errorMessage) => {
							// parse error, ideally ignore it. For example:
							console.log(`QR Code no longer in front of camera.`);
						}
					)
					.catch((err) => {
						// Start failed, handle it. For example,
						console.log(`Unable to start scanning, error: ${err}`);
					});
			},

前段时间公司要求做个H5扫码的功能，几番折腾，发现移动端的扫码兼容性有限。所以在开发H5扫码前各位要提前调研好。

H5 扫码实现主要用到浏览器的 navigator.mediaDevices.getUserMedia 方法打开video录像一直重复调用，每次生成一张canvas图片，再利用网上已有得库（我用的是jsQR）解析图片，获得二维码。

该方法在浏览器的兼容性 https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

 因为是H5，所以国内用户很多会直接在微信里面打开。微信安卓端，基本都兼容。但是注意：微信ios端的话必须苹果系统是14.3才支持，所以大部分苹果用户都无法用。这就很痛苦了，因为我们公司也是不想太依赖微信，才打算开发的H5扫码，但我功能已经开发好了，当时没调研清楚，事后我吐了2斤的血。

最后为了兼容到H5的用户，就做了个中转的扫码页面，通过判断微信还是H5用户调用不同的方法。

在这里我就提供几个参考的库

H5扫码的库 :https://gitee.com/mirrors/jsQR

Vue Qrcode Reader :   https://gruhn.github.io/vue-qrcode-reader/

本人🙈的代码链接： https://gitee.com/itemsye/qrcode-scan