微信小程序开发，从零教你生成专属二维码

你肯定遇到过这种情况——在微信里点开一个小程序，页面里有个“生成二维码”的按钮，点一下就能把自己的名片、活动海报或者商品链接变成一张二维码图片。这东西看着挺玄乎，其实背后的技术逻辑一点都不复杂。今天我就带你从零开始，亲手写一个能生成专属二维码的小程序。别怕，哪怕你之前没碰过代码，跟着我的步骤走，半小时内就能跑起来。

先给你透个底：生成二维码的核心，其实就是一个叫“weapp-qrcode”的第三方工具库。微信小程序本身没有直接生成二维码的能力，但借助这个库，你只需要几十行代码就能搞定。第一步，去GitHub上搜索“weapp-qrcode”，找到那个星星最多的仓库，把里面的“qrcode.js”文件下载下来。然后在小程序项目的根目录下新建一个“utils”文件夹，把这个js文件扔进去。这一步相当于给你的小程序装上了“二维码引擎”。

接下来，你得在页面里放个画布。小程序的“canvas”组件就是干这个的。在你要展示二维码的页面wxml文件里，写上一行代码：。注意那个“canvas-id”一定要和后面js里引用的id对上号。宽度和高度你可以自己调，但建议保持正方形，不然二维码会变形。如果你想让二维码更精致，还可以加个背景色或者圆角样式，不过第一次跑通最重要，别急着美化。

现在到了最关键的js部分。在你页面的js文件里，先引入刚才放好的库：const qrcode = require(‘../../utils/qrcode’);。然后，在onLoad或者某个按钮点击事件里，调用库提供的draw方法。比如这样：qrcode.draw(‘’, ‘myQrcode’, 200);。第一个参数是你想生成的链接或文字，第二个参数是canvas的id，后面两个是画布的宽高。这一步跑通后，你就能在模拟器上看到一个黑白的二维码了。别激动，先拿手机扫一下，确认它能正常跳转到你设定的链接。

但光能生成还不够，你得让二维码变成真正的“专属”。所谓专属，无非是让每个用户生成的二维码内容不同。比如用户A生成的是他的个人主页链接，用户B生成的是他的商品详情页。这需要你把动态数据传进去。假设你的页面有个输入框，用户输入自己的ID，你就在生成二维码时把ID拼接到链接里：qrcode.draw(‘ser?id=’ + inputValue, ‘myQrcode’, 200);。这样一来，每个用户扫出来的二维码都指向了不同的页面。你还可以加上用户头像、昵称之类的个性化信息，做成一个类似“我的专属名片”的效果。

你可能会问：生成的二维码怎么保存到手机相册？这需要调用小程序的canvasToTempFilePath和saveImageToPhotosAlbum两个API。先通过canvasToTempFilePath把画布内容转成临时图片路径，再调用saveImageToPhotosAlbum保存。注意，这里有个坑：用户得先授权相册写入权限。所以你要在调用保存前，先用wx.getSetting检查一下权限状态，如果没授权，就用wx.authorize弹窗申请。很多新手在这步栽跟头，不是忘了授权就是处理了错误的回调，记得写个try-catch兜底。

如果你想让二维码更好看，可以在生成后加个“美化”步骤。比如用canvas的drawImage方法，在二维码中间叠一个自己的logo图片。先准备好一个100x100像素的透明背景logo图，在二维码生成完成后，用ctx.drawImage把logo画到二维码正中央。注意要控制好大小，别把二维码的关键定位点盖住了，否则扫不出来。还有一种玩法是给二维码加渐变色，但这需要你手动处理像素点颜色，对新手来说有点复杂，建议先跳过。

提醒你几个容易踩的坑。第一个：weapp-qrcode生成的二维码是黑白的，如果你想换个颜色，别直接在库文件里改，而是生成后通过canvas的setFillStyle重新绘制。第二个：二维码内容长度有限，别塞太多文字，一般200个字符以内最安全。第三个：如果你发现生成的二维码扫不出来，八成是链接写错了，或者canvas的宽高设置不一致。测试时先用短链接，确认没问题再换长链接。另外，微信开发者工具里预览二维码的效果和真机可能不同，记得用手机扫码测试。

从零到一跑通二维码生成，你只用了不到一百行代码。这个能力可以玩出很多花样：电商小程序的商品分享码、活动海报的签到码、甚至餐厅点餐的桌号码。核心逻辑都一样——把动态内容塞进二维码，再用canvas渲染出来。下次你看到别人小程序里那个“生成专属二维码”的按钮，心里就有底了：它背后就是一段调用第三方库的js代码，加上一个canvas画布，再加几个API调用。现在，打开你的开发者工具，动手试试吧。