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、效果如下:
感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮。本文欢迎各位转载,但是转载文章之后必须在文章页面中给出作者和原文连接。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战