<!-- 二维码 -->
<canvas id="myCanvas" type="2d" style="border: 1px solid; width: 300rpx;height: 300rpx; margin-top: 100rpx;margin-left: 80rpx;" ></canvas>

<!-- 扫码 -->
<view class="container">
  <button bindtap="openScanner">扫一扫</button>
  <view wx:if="{{scanResult}}">
    <text>扫描结果:{{scanResult}}</text>
  </view>
</view>
// pages/qr/qr.ts
import UQRCode from '../../utils/uqrcode';

Page({

  /**
   * 页面的初始数据
   */
  data: {

    scanResult: '',
    showScanModal: false
  },

  onLoad() {
    this.code()
  },

  code() {
    wx.createSelectorQuery()
      .select('#myCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec(async (res) => {
        if (!res[0] || !res[0].node) {
          console.error("Canvas 节点未找到");
          return;
        }

        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');

        const dpr = wx.getSystemInfoSync().pixelRatio; // 获取设备像素比
        // 根据 DPR 调整 Canvas 实际绘图尺寸
        const canvasWidth = res[0].width * dpr;
        const canvasHeight = res[0].height * dpr;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        ctx.scale(dpr, dpr); // 缩放画布


        // 2. 初始化 UQRCode 并绑定 Canvas 上下文
        const qr = new UQRCode();
        qr.data = "id=2";
        qr.size = res[0].width; // 必须与 Canvas 实际尺寸一致
        qr.canvasContext = ctx; // 关键绑定

        try {
          // 3. 加载依赖库(如需加载图片)
          //await UQRCode.prototype.loadImage("/images/bg_1.jpg"); // 示例图片

          // 4. 生成二维码
          qr.make();
          qr.drawCanvas(); // 必须调用绘制方法

          // 保存为图片(可选)
          wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success: (tempFilePath) => {
              console.log("二维码图片路径:", tempFilePath);
            }
          });
        } catch (err) {
          console.error("二维码生成失败:", err);
        }
      });
  },

    // 触发扫码
    openScanner() {
      wx.scanCode({
        onlyFromCamera: true,    // 仅使用摄像头
        scanType: ['qrCode'],    // 扫描类型(支持['barCode','qrCode'])
        success: (res) => {
          this.setData({ scanResult: res.result });
          this.handleScanResult(res.result);
        },
        fail: (err) => {
          wx.showToast({ title: '扫码失败', icon: 'none' });
          console.error('扫码错误:', err);
        }
      });
    },
  
    // 处理扫码结果
    handleScanResult(result: string) {
      if (result.startsWith('pages/')) {
        wx.navigateTo({ url: result }); // 跳转小程序页面
      } else {
        wx.navigateTo({ url: '/pages/webview/webview?url=' + encodeURIComponent(result) }); // 跳转外部链接
      }
    }


})

使用到的uqrcode.js代码文件:通过网盘分享的文件:uqrcode.js
链接: https://pan.baidu.com/s/1lZhusJmhzmc4hHJKSyFeiQ?pwd=y996 提取码: y996。

可自行下载放到对应文件目录

本代码生成的二维码信息仅为“id=2”

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐