在微信小程序中使用 weapp-qrcode 生成二维码并实现长按保存和转发功能,可通过以下步骤完成:
安装 weapp-qrcode
通过 npm 安装或手动引入插件:
npm install weapp-qrcode
2. 页面中引入插件
在页面的 JS 文件中导入:
import drawQrcode from '../../utils/weapp.qrcode.esm.js';
创建 Canvas 画布
在 WXML 中添加一个隐藏的 Canvas 组件(用于生成二维码)和一个 Image 组件(用于显示最终图片):
2. 生成二维码并转存为图片
使用 drawQrcode
在 Canvas 上绘制二维码,再通过 wx.canvasToTempFilePath
转换为临时图片路径:
drawQrcode({ width: 200, height: 200, canvasId: 'myQrcode', text: '需要生成的文本或链接', }); const query = wx.createSelectorQuery(); query.select('#myQrcode').fields({ node: true }).exec((res) => { wx.canvasToTempFilePath({ canvasId: 'myQrcode', success: (res) => { this.setData({ qrcodeUrl: res.tempFilePath }); } }); });
长按保存图片
在 Image 组件上添加 show-menu-by-longpress="true"
属性,启用微信原生长按菜单,用户可直接选择“保存图片”或“转发”
2. 处理权限问题(可选)
若用户首次拒绝授权,需引导其重新授权:
wx.getSetting({ success: (res) => { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', fail: () => wx.openSetting() // 跳转设置页 }); } } });
3. 转发功能
直接调用小程序的分享 API,或通过长按菜单的“转发给朋友”实现:
onShareAppMessage() { return { title: '扫描二维码', path: '/pages/index/index', imageUrl: this.data.qrcodeUrl }; }