纯H5实现扫码：浏览器扫码

最新推荐文章于 2024-07-30 10:56:44 发布

佛系点儿

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量2.2k

点赞数

分类专栏： js web前端文章标签： javascript 前端微信

本文链接：https://blog.csdn.net/qq_41297968/article/details/126841411

版权

纯H5实现扫码：浏览器扫码
直接上代码，拿去直接使用。此方案考虑了兼容了微信扫码（兼容微信须在微信环境中才可以使用，本案例是企业微信中运行的）。

注意：代码语法是基于react、Taro

1.首先安装"@zxing/library": “^0.19.1”
2.引入微信jdk（用于兼容微信环境扫码）

  <!-- 微信jdk：企业微信扫码需要 -->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

3.页面引入

import {
    BrowserMultiFormatReader } from '@zxing/library'

4.按钮

<button className='scan-btn' onClick={
    this.getSelectedDeviceId.bind(this) }>扫码</button>
<button onClick={
    this.cancelScanCode.bind(this) }>取消扫码</button>

5.扫码 || 取消扫码逻辑

class Index extends Component {
   
  constructor(props) {
   
    super(props)
    this.state = {
   
      isShowVideo: false, // 是否显示video:video用于获取视频流
      expressCode: '' // 扫码结果
    }
  }
  componentDidShow() {
   
	this.wxAuth() // 微信权限验证
  }
  // 微信权限验证
  wxAu