uniapp中使用tki-qrcode生成二维码

qq_43327840

已于 2024-09-04 14:42:43 修改

阅读量360

点赞数 4

文章标签： uni-app

于 2024-09-04 11:50:21 首次发布

本文链接：https://blog.csdn.net/qq_43327840/article/details/141888342

版权

前言:用来记录一下自己日常开发遇到的基础东西,参考了很多,如果有重复的地方,可以联系我进行撤稿

一共有两种方法,这两种方法,都有利有弊看自己需求,最好是自己去看看组件作者的那个代码,他最新的代码和我们通过npm直接安装的代码有点细微的差别,可以自己判断使用哪种方法

第一种就是npm下载

npm i tki-qrcode

第二种本地导入,自己创建组件,这样方便你进行二开,比如果我的需求需要预览,然后我就是本地引入的

引入组件,在自己的项目代码中,重新创建一个组件,用来做二维码的配置

<template>
	<view>
		<view class="qrcode-icon">
			 <tki-qrcode
			    ref="qrcode"
			    :cid="cid"
			    :val="codeInfo"
			    :size="size"
			    :unit="unit"
			    :background="background"
			    :foreground="foreground"
			    :pdground="pdground"
			    :icon="icon"
			    :iconSize="iconsize"
			    :lv="lv" 
			    :onval="onval"
			    :loadMake="loadMake"
			    :usingComponents="usingComponents"
			    :showLoading="showLoading"
			    :loadingText="loadingText"
			    @result="qrR"
				@qrCodePreviewImage="qrCodePreviewImage"/>
		</view>
	</view>
</template>

<script>
import tkiQrcode from '../../../components/tki-qrcode/tki-qrcode.vue';
export default {
	components: {
		tkiQrcode
	},
	props:{
		cid:{
			type:String,
			default:"tCode"
		},
		codeInfo:{
			type:String,
			default:""
		}
	},
	data() {
		return {
			size: 150, //二维码的大小
			unit: 'upx', //大小单位 !!! rpx单位有误
			onval: false, //val值变化时自动重新生成二维码
			background: '#ffffff', // 背景色
			foreground: '#000000', // 前景色
			pdground: '#000000', // 角标色
			icon: '', //二维码图标
			iconsize: 30, //二维码图标大小
			lv: 1, //二维码容错级别,默认为3,我的是因为二维码内容过长,不提升等级识别不出来
			loadingText: '加载中', //loading内容
			loadMake:true,    //组件初始化完成后自动生成二维码，val需要有值
			usingComponents:true, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
			showLoading:false,//是否添加loading,全局不是单个,就是屏幕中间的那种
		};
	},
	methods: {
		qrR(e) {
			// console.log('生成的图片base64或图片临时地址', e);
		},
		// 控制预览情况
		qrCodePreviewImage(val){
			this.$emit('previewImage',val)
		},
	}
};
</script>

<style>

	
</style>

然后就是在你要生成二维码的地方进行使用

<TKIQrcode :cid='`${list.id}`' :codeInfo="`${list.deviceNo}`" @previewImage="previewImage"></TKIQrcode>

import TKIQrcode from './TKIQrcode.vue';

在使用的时候需要注意几个地方,第一个就是那个showLoading属性,因为二维码生成需要一个过程,所以如果没有这个loading就会显得有点空,但是这个loading,我使用的时候他是在屏幕的正中间,但是我的又是列表,就会影响到整个界面的显示,我就给关掉了,虽然刚开始会不好看,毕竟不能影响到主要功能,后面会想到怎么优化,暂时关掉,再就是你们可能会遇到一个报错