第一步环境与文件准备安装开发工具下载并安装微信官方开发者工具安装后使用微信扫码登录。创建项目点击“新建项目”填写你的项目名称。AppID如果没有正式ID可以先选择“测试号”这可能会限制一些功能。选择一个本地空文件夹作为项目目录。在创建选项中取消勾选“创建 QuickStart 项目”从空白项目开始。点击“确定”创建一个新的空白小程序项目。引入库文件从你信赖的源如 GitHub - weapp-qrcode下载weapp.qrcode.min.js文件。在项目根目录下把文件放到utils文件夹里路径参考your-project/utils/wxapp.qrcode.min.js。这样代码中的require(../utils/wxapp.qrcode.min.js);就能正确引用了第二步编写页面代码接下来我们将创建一个新页面例如pages/qrcode/qrcode并编写代码。1. 编写页面结构 (qrcode.wxml)打开pages/qrcode/qrcode.wxml文件粘贴以下代码。这会创建一个canvas作为二维码的画布并添加一个按钮来触发生成。!--pages/qrcode/qrcode.wxml-- view classcontainer !-- 二维码的画布canvas-id是必需的标识符 -- canvas stylewidth: 400rpx; height: 400rpx; canvas-idmyQrcode/canvas !-- 触发生成二维码的按钮 -- button bindtapgenerateQRCode typeprimary生成二维码/button /view2. 添加样式 (qrcode.wxss)/* pages/qrcode/qrcode.wxss */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20rpx; } canvas { margin-bottom: 50rpx; border: 1px solid #eee; }3. 编写核心逻辑 (qrcode.js)// pages/qrcode/qrcode.js // 1. 在文件顶部引入二维码生成库 const drawQrcode require(../../utils/wxapp.qrcode.min.js); Page({ // 页面的初始数据 data: { // 可以在这里定义二维码要包含的信息 qrcodeText: https://www.example.com // 替换成你需要编码的内容 }, // 按钮的点击事件调用生成二维码的方法 generateQRCode() { // 2. 调用生成二维码的核心方法 this.createQRcode(200, 200, myQrcode, this.data.qrcodeText); }, // 3. 生成二维码的方法 (就是你提供的那段代码) createQRcode(canvasWidth, canvasHeight, canvasId, url) { drawQrcode({ width: canvasWidth, height: canvasHeight, canvasId: canvasId, // 对应wxml中canvas组件的canvas-id text: url // 需要生成二维码的链接或字符串 }); }, // 页面加载时也可以自动生成一个二维码 onLoad() { // 可以选择在页面一加载时就生成二维码 // this.createQRcode(200, 200, myQrcode, this.data.qrcodeText); } });第三步运行与测试完成代码编写后就可以在开发者工具里运行测试了。在开发者工具中测试模拟器在开发者工具顶部菜单点击“编译”按钮。在左侧模拟器窗口中会显示qrcode页面。点击“生成二维码”按钮右侧的canvas区域就会出现对应的二维码。在真实手机上预览真机调试预览点击工具栏的“预览”按钮工具会生成一个二维码。用微信扫描即可在手机上体验。真机调试点击工具栏的“真机调试”按钮同样用微信扫码。这样就能在手机上看到效果同时在电脑上看到详细的调试日志方便排查复杂问题。确认功能扫码成功后你的手机会显示一个包含预设链接或文字的二维码图片功能就正常了。第四步进阶测试与调试技巧开启调试模式在app.json中加入debug: true控制台会输出更详细的调试信息。清除缓存如果测试时代码没生效点工具栏“清除缓存”再编译。检查包大小点击“详情”确认项目主包不超过2MB否则真机调试会失败。
