uni-app：实现二维码的生成功能

记录一下二维码的生成和其功能的实现。提供两种方法，大家快去试试吧！

大家也可以评论补充一下~~~

---

方法一：

一、安装依赖

npm install qrcodejs2 --save

二、页面代码

<template>
	<view>
        <!-- div:下面方法中用this.$refs.qrCodeUrl获取DOM -->
		<div ref="qrCodeUrl"></div> 
        <!-- view:下面方法中用this.$refs.qrCodeUrl.$el获取DOM -->
        <!-- <view ref="qrCodeUrl"></view> -->
	</view>
</template>

<script>
	import QRCode from 'qrcodejs2'
	export default {
		components:{
			QRCode
		},
		data() {
			return {
				QRurl:'',
				qrWidth:''
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res)=> {
					if(res.windowWidth<375) {
						this.qrWidth = 175
					} else {
						this.qrWidth = res.windowWidth / 1.8
					}
				}
			});
			this.QRurl = 'https://mp.csdn.net'
		},
		onShow() {
			this.createQrcode(this.QRurl)
		},
		methods: {
			createQrcode(text){
				setTimeout(()=>{
					const qrcode = new QRCode(this.$refs.qrCodeUrl,{
						text:text,  // 二维码内容
						width:this.qrWidth,  // 二维码长，已做手机适配
						height:this.qrWidth, // 二维码宽，已做手机适配
						colorDark:'#000000',   // 二维码前背景色
						colorLight:'#ffffff',  // 二维码背景色
						correctLevel: QRCode.CorrectLevel.H // 纠错等级
					})
				},0)
			}
		}
	}
</script>

---

方法二：

一、下载uqrcode.js文件

https://download.csdn.net/download/weixin_46162592/88215531?spm=1001.2014.3001.5503

下载好后，将文件夹放置common文件中，这个放置位置看你们自己需求，一般是common里面。

import uQRCode from '@/common/uqrcode.js'

二、 页面代码

<template>
    <view>
        <canvas canvas-id="qrcode":style="{width:qrWidth+'px',height:qrWidth+'px'}"></canvas>
	</view>
</template>

<script>
    import uQRCode from '@/common/uqrcode.js'
    export default {
        onLoad() {
            // 获取手机屏幕大小
            uni.getSystemInfo({
				success: (res)=> {
					if(res.windowWidth<375) {
						this.qrWidth = 175
					} else {
						this.qrWidth = res.windowWidth / 1.8
					}
				}
			});
			this.QRurl = 'https://mp.csdn.net'
			this.qrFun(this.QRurl)
		},
        data() {
			return {
				QRurl: '',
                qrWidth：0
			}
		},
        methods: {
            qrFun(text) {
				uQRCode.make({
					canvasId: 'qrcode',  // 必须与上面canvas-id="qrcode"值一致
					componentInstance: this,  // 组件实例
					text: text,  // 二维码内容
					size: this.qrWidth,  // 单位px，做了手机适配
					margin: 0,
					backgroundColor: '#ffffff',  //背景颜色
					foregroundColor: '#000000',  // 前景颜色
					fileType: 'jpg',  // 二维码图片类型
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,  // 容错级别
					success: res => {
						// 生成二维码成功后的操作
                        // ...
					}
				})
			}
        }
    }
</script>