随笔 - 754  文章 - 0 评论 - 33 阅读 - 134万
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

wxml

<view>
  <button bindtap='createQrcode' type="primary" style="width: 400rpx;margin-top: 400rpx;">生成二维码</button>
  <canvas id='qrcode' type="2d" style='width:300rpx;height:300rpx;margin-top: 30rpx;margin-left: 100rpx;' ></canvas>
</view>

js

复制代码
// pages/hr/demo/demo.js
import QRCode from '../../../utils/weapp.qrcode.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    qrCodeLink: "2352425234234",
    qrcodePath: null

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  // 生成二维码
createQrcode() {
  var that = this;
  const query = wx.createSelectorQuery()
  query.select('#qrcode')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      var canvas = res[0].node
 
      // 调用方法drawQrcode生成二维码
      QRCode({
        canvas: canvas,
        canvasId: 'qrcode',
        // width:that.createRpx2px(300),
        // width: that.createRpx2px(300),
        // padding: 10,
        // background: '#ffffff',
        // foreground: '#000000',
        text: that.data.qrCodeLink,
      })
 
      // 获取临时路径(得到之后,想干嘛就干嘛了)
      wx.canvasToTempFilePath({
        canvasId: 'qrcode',
        canvas: canvas,
        x: 0,
        y: 0,
        success(res) {
          // console.log('二维码临时路径:', res.tempFilePath)
          that.setData({
            qrcodePath: res.tempFilePath
          })
          console.log('二维码临时路径:', that.data.qrcodePath)
        },
        fail(res) {
          console.error(res)
        }
      })
    })
  },

})
复制代码

下载weapp.qrcode.js地址:https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d,将代码下载下来后,获取utils目录下的js文件,

放到项目的util目录下

 3、效果如下:

 



感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮。本文欢迎各位转载,但是转载文章之后必须在文章页面中给出作者和原文连接
posted on   周文豪  阅读(286)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示