uni

2024-07-17 05:48| 来源: 网络整理| 查看: 265

为什么选择uQRCode uQRCode 生成方式简单，可扩展性高，适用所有前端应用和Node.js服务端，可运行到所有支持canvas的平台。支持自定义二维码渲染规则，可通过uQRCode API得到矩阵信息后，自行实现canvas或view+css渲染二维码，如随机颜色、圆点、方块、块与块之间的间距等。如何使用uQRCode

首先我们先到uni-app插件市场中下载此插件，插件下载地址在这里插入图片描述

直接导入即可。如何在自己代码中使用：因为我们是直接使用的是uni_modules版本的，所以我们就不必再import导入自己的项目中。我们可以直接使用组件。

对于一些其他的配置项我们在options对象上写。可以查看文档：在这里插入图片描述对于方法的使用：

下面我写了两个例子：常规二维码（生成）：

这是一个常规的二维码保存 export default { data() { return { text: 'uQRCode', size: 200 }; }, methods: { complete(e) { if (e.success) { console.log('生成成功'); } else { console.log('生成失败'); } }, remake() { const ref = this.$refs['qr']; ref.remake(); }, save() { uni.showLoading({ title: '保存中', mask: true }); const ref = this.$refs['qr']; ref.save({ success: res => { uni.hideLoading(); uni.showToast({ icon: 'success', title: '保存成功' }); }, fail: err => { uni.showToast({ icon: 'none', title: JSON.stringify(err) }); } }); } } }; .page { display: flex; flex-direction: column; align-items: center; } .qrcode-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; padding: 0 30px; } .qrcode { padding: 16px; background-color: #ffffff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; } .msg { margin-top: 15px; font-size: 14px; color: #9a9b9c; } .save { margin-top: 10px; }

在这里插入图片描述带logo二维码（生成）：

这是一个带logo的二维码，logo处于二维码中间保存 export default { data() { return { text: 'uQRCode', size: 200 }; }, methods: { complete(e) { if (e.success) { console.log('生成成功'); } else { console.log('生成失败'); } }, remake() { const ref = this.$refs['code']; ref.remake(); }, save() { uni.showLoading({ title: '保存中', mask: true }); const ref = this.$refs['code']; ref.save({ success: res => { uni.hideLoading(); uni.showToast({ icon: 'success', title: '保存成功' }); }, fail: err => { uni.showToast({ icon: 'none', title: JSON.stringify(err) }); } }); } } }; .page { display: flex; flex-direction: column; align-items: center; } .qrcode-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; padding: 0 30px; } .qrcode { padding: 16px; background-color: #ffffff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; } .msg { margin-top: 15px; font-size: 14px; color: #9a9b9c; } .save { margin-top: 10px; }

在这里插入图片描述

【本文地址】

uni

uni

今日新闻

推荐新闻