基于html5QrCode实现的H5扫码功能（uni-app v2版本）

<template>
  <view class="page">
    <view class="page__hd">
      <text class="page__title">H5扫码功能</text>
    </view>
    <view class="page__bd">
      <view class="qrcode-container">
        <view class="qrcode-info">扫描二维码以获取结果</view>
        <view class="qrcode-outer">
          <canvas ref="qrcodeCanvas" style="width: 100%; height: 100%"></canvas>
        </view>
      </view>
    </view>
  </view>
</template>
 
<script>
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
 
export default {
  data() {
    return {
      // 数据绑定
      text: 'https://example.com', // 二维码内容
    }
  },
  mounted() {
    this.createQRCode()
  },
  methods: {
    createQRCode() {
      const canvas = this.$refs.qrcodeCanvas
      const ctx = canvas.getContext('2d')
 
      QRCode.toCanvas(text, { errorCorrectionLevel: 'H' }, (err, canvas) => {
        if (err) console.error(err)
        else ctx.drawImage(canvas, 0, 0)
      })
    }
  }
}
</script>
 
<style>
.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qrcode-info {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}
.qrcode-outer {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>

这段代码展示了如何在uni-app中使用html2canvas和qrcode.js库来生成并展示一个二维码。在createQRCode方法中，我们首先获取了canvas元素的上下文，然后使用QRCode.toCanvas方法生成二维码，并在回调中绘制到canvas上。这个例子简洁明了，并且注重于展示核心功能。