微信小程序实现生成二维码功能并下载到本地

2025-09-06 18:45:18

微信小程序实现生成二维码功能并下载到本地

背景实现备注

背景

有这样一个需求，后台返回了url地址，微信小程序将url地址转成二维码图片，展示在页面上，并且该二维码图片可下载到用户手机相册中

实现

安装wx-qr

npm i wx-qr -S

在页面组件的json文件中引入wx-qr

{

"navigationBarTitleText": "我的线索库",

"usingComponents": {

"qr-container": "wx-qr"

}

}

页面中使用wx-qr展示二维码

通过this.selectComponent选中qr-container，然后通过wx.saveImageToPhotosAlbum将二维码下载到本地

// 下载二维码

downloadQrCode: async function (): Promise {

const qrContainer = this.selectComponent('#qr'); // 获取qr-container

wx.saveImageToPhotosAlbum({ // 保存二维码到本地

filePath: qrContainer.getQrFile(), // 通过dom获取二维码的临时地址

success() {

wx.showToast({

title: '保存成功',

icon: 'success',

duration: 2000

})

},

fail() {

wx.showToast({

title: '保存失败',

icon: 'error',

duration: 2000

})

}

})

},

效果

备注

关于wx-qr的使用，可参考wx-qr文档