为什么选择uQRCode
uQRCode 生成方式简单,可扩展性高,适用所有前端应用和Node.js服务端,可运行到所有支持canvas的平台。
支持自定义二维码渲染规则,可通过uQRCode API得到矩阵信息后,自行实现canvas或view+css渲染二维码,如随机颜色、圆点、方块、块与块之间的间距等。
如何使用uQRCode
首先我们先到uni-app插件市场中下载此插件,插件下载地址
直接导入即可。
如何在自己代码中使用:
因为我们是直接使用的是uni_modules版本的,所以我们就不必再import导入自己的项目中。
我们可以直接使用组件。
<u-qrcode ref="qr" canvas-id="qr" :value="text" :size="size" @click="remake" @complete="complete($event)"></u-qrcode>
对于一些其他的配置项我们在options对象上写。
可以查看文档:
对于方法的使用:
下面我写了两个例子:
常规二维码(生成):
<template>
<view class="page">
<view class="qrcode-box">
<view class="qrcode">
<u-qrcode ref="qr" canvas-id="qr" :value="text" :size="size" @click="remake"
@complete="complete($event)"></u-qrcode>
</view>
<text class="msg">这是一个常规的二维码</text>
<button class="save" type="primary" size="mini" @click="save">保存</button>
</view>
</view>
</template>
<script>
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)
});
}
});
}
}
};
</script>
<style>
.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;
}
</style>
带logo二维码(生成):
<template>
<view class="page">
<view class="qrcode-box">
<view class="qrcode">
<u-qrcode ref="code" canvas-id="code" :value="text" :size="size" :options="{
foreground: {
image: {
src: '/static/logo.png',
width: 0.25,
height: 0.25,
align: ['center', 'center'],
anchor: [0, 0]
}
}
}" @click="remake" @complete="complete($event)"></u-qrcode>
</view>
<text class="msg">这是一个带logo的二维码,logo处于二维码中间</text>
<button class="save" type="primary" size="mini" @click="save('code')">保存</button>
</view>
</view>
</template>
<script>
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)
});
}
});
}
}
};
</script>
<style>
.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;
}
</style>