uniapp小程序---二维码(生成、保存)
在uniapp中生成并保存二维码,可以使用第三方库qrcode
来生成二维码图片,然后使用uni.saveImageToPhotosAlbum
方法将其保存到用户的相册中。以下是一个简单的示例:
- 首先,需要安装
qrcode
库,可以通过npm安装:
npm install qrcode
- 在需要生成二维码的页面中,引入
qrcode
库,并使用它来生成二维码:
// 引入qrcode库
import QRCode from 'qrcode'
export default {
methods: {
// 生成二维码并保存到相册
async generateAndSaveQRCode(text) {
// 生成二维码
const qrcodeImage = await QRCode.toDataURL(text, { errorCorrectionLevel: 'H' });
// 将二维码图片转换为图片路径
const tempFilePath = await this.dataURLToTempFilePath(qrcodeImage);
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: () => {
uni.showToast({ title: '保存成功' });
},
fail: () => {
uni.showToast({ title: '保存失败', icon: 'none' });
}
});
},
// 将base64图片转换为临时文件路径
dataURLToTempFilePath(dataURL) {
return new Promise((resolve, reject) => {
const arr = dataURL.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
uni.getFileSystemManager().writeFile({
filePath: `${wx.env.USER_DATA_PATH}/qrcode.png`,
data: arr[1],
encoding: 'base64',
success: res => {
resolve(`${wx.env.USER_DATA_PATH}/qrcode.png`);
},
fail: err => {
reject(err);
}
});
});
}
}
}
- 在页面的按钮点击事件中调用
generateAndSaveQRCode
方法:
<template>
<view>
<button @click="generateAndSaveQRCode('https://example.com')">生成并保存二维码</button>
</view>
</template>
确保在manifest.json
中配置了相册权限:
"permission": {
"scope.writePhotosAlbum": {
"desc": "你的相册"
}
}
用户第一次调用保存图片到相册的功能时,将会收到权限申请提示。
评论已关闭