项目需求
uniapp 开发 H5 过程中会有邀请、分享等相关的需求。邀请与分享的 url地址 要以 二维码 的形式进行展示,并且 url地址 是动态可变化。
解决问题
1. qrious.js插件
在 npm 中有一个叫 Qrious 二维码生成插件;
npm install qrious --save
2. 简单认识 qrious 配置参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 空 | 需要编码为二维码的值、url字符 |
size | Number | 100 | 二维码的尺寸,单位像素 |
level | String | L | 二维码的误差校正级别(L, M, Q, H) |
mime | String | image/png | 二维码输出为图片时的MIME类型 |
foreground | String | black | 二维码的前景颜色 |
background | String | white | 二维码的背景颜色 |
3.现实二维码生成
话不多说看代码:
<template>
<view class="content">
<view class="popup" v-if="show">
<view style="position: relative;" @tap="show = false">
<image :src="qrCodeImage" class="custom-qrcode" />
</view>
</view>
<button @tap="getQriousCode" v-else>立即邀请</button>
</view>
</template>
<script>
import Qrcode from 'qrious';
export default {
data() {
return {
title: 'Hello',
show: false,
qrCodeImage: ''
}
},
methods: {
getQriousCode() {
this.show = true;
let qr = new Qrcode({
value: "www.baidu.com"
});
this.qrCodeImage = qr.toDataURL();
},
}
}
</script>
<style>
.content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.popup {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(135, 135, 135, 0.6);
}
.custom-qrcode {
width: 300rpx;
height: 300rpx;
}
</style>
4. 核心代码
根据需求改变相关参数,获得想要的结果。
getQriousCode() {
this.show = true;
let qr = new Qrcode({
value: "https://blog.csdn.net/weixin_49175501", // url地址
background:'white', // 背景色
foreground:'#8dc63f' ,// 二维码颜色
level:'L', // 二维码复杂程度
size:200 ,// 尺寸大小
mime:'image/png' // 图片类型
});
this.qrCodeImage = qr.toDataURL(); // 生成url图片
},
有疑惑的小伙伴,可能是我表达不清楚,可以留言讨论,如有错误,也希望大家不吝指出。