TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
448
1.9m

二维码 xQrcoder ​

在线预览
在线模拟尺寸:

介绍 ​

本组件使用UTS原生代码绘制，性能非常高，如果你是在1.1.9之前版本请使用x-qrcoder-s原生插件获得高性能。从1.1.9版本后请 使用组件绘制QR码来获得更高性能和更多样式配置。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-qrcoder/x-qrcoder.uvue

使用 ​

ts

<x-qrcoder></x-qrcoder>

Props 属性 ​

名称说明类型默认值
width窗口宽
string'250px'
height宽器高，这将影响条码的高度
string'250px'
color码颜色
string"primary"
bgColor码背景颜色
string"white"
posColor码的定位点颜色,不填写和原前景一致
string""
text条码内容
string"https://xui.tmui.design"
logo是否绘制Logo到qr上。
string""
logoBgColor是否绘制Logo到qr上。
string"#fff"
logoSizelogo大小。
string"50px"
padding边距
number2
mode绘制的样式目前提供
rect ：普通码矩形
circular ：小圆点
line ：线条
rectSmall ：小方格
xing ：星形
vertical ：竖圆形
string"rect"
pdRounded定位位点是否使用圆角。
booleanfalse
wifi生成自动连接的wifi码，手机原生相机扫码时，可以根据你设置帐号密码自动连接你的wifi.
包含的字段：ssid:wifi名称，auth:授权方式（NONE，WPA，WEP）的一种，password:密码,hidden:是否隐藏密码,字符串'true'/'false'
UTSJSONObject():UTSJSONObject => ({} as UTSJSONObject)

Events 事件 ​

名称参数说明

Slots 插槽 ​

名称说明数据

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/qita/qrcoder

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">二维码 Qrcoder</x-text>
			<x-text color="#999999" >
				本组件绘制QR码性能非常高和以及更多的样式配置。并且不依赖第三方插件完全自绘制。提供了四种类型。
			</x-text>
		</x-sheet>
		<x-sheet>
			<view class="flex flex-center ">
			<!-- xing -->
				<x-qrcoder :pdRounded="true" :mode="model" ref="qxqr" :text="text" :logo="logo"></x-qrcoder>
			</view>
			<x-input class="my-16" v-model="text"></x-input>
			<view class="flex flex-row flex-row-center-between mb-16">
				<x-radio-group v-model="logo">
					<x-radio class="mr-5 mb-5" value="/static/tmui4xLibs/static/empty.png" label="添加Logo"></x-radio>
					<x-radio class="mr-5 mb-5" value="" un-check-value="2" label="取消Logo"></x-radio>
				</x-radio-group>
			</view>
			<x-divider label="圆点形状"></x-divider>
			<view class="my-16">
				<x-radio-group v-model="model" >
					<x-radio class="mr-5 mb-5" value="rect" label="普通"></x-radio>
					<x-radio class="mr-5 mb-5" value="circular" label="小圆点"></x-radio>
					<x-radio class="mr-5 mb-5" value="line" label="线条"></x-radio>
					<x-radio class="mr-5 mb-5" value="rectSmall" label="小方格"></x-radio>
					<x-radio class="mr-5 mb-5" value="xing" label="星形"></x-radio>
					<x-radio class="mr-5 mb-5" value="vertical" label="竖圆"></x-radio>
				</x-radio-group>
				
			</view>
			<x-button :block="true" @click="getImgQr">查看码图片</x-button>
			
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">修改颜色，尺寸，样式</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row-center-center flex-row">
			<x-qrcoder width="105px" height="105px" color="red"></x-qrcoder>
			<x-qrcoder class="mx-5" width="105px" mode="line" height="105px" ></x-qrcoder>
			<x-qrcoder class="mx-5" width="105px" mode="circular" pos-color="error" height="105px" ></x-qrcoder>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">WIFI-QR</x-text>
			<x-text color="#999999" class="mb-12" >
				手机自带相机扫码可以自动连接你设定的wifi
			</x-text>
			<view class="mb-20 flex flex-center">
				<x-qrcoder :wifi="wifiQr" </x-qrcoder>
			</view>
			<x-input v-model="ssid" leftText="SSID" darkBgColor="" ></x-input>
			<x-input v-model="password" leftText="密码" class="mt-12" darkBgColor="" ></x-input>
			<x-text class="my-12">授权方式</x-text>
			<view>
				<x-radio-group v-model="auth">
					<x-radio value="NONE" label="NONE"></x-radio>
					<x-radio class="mx-16" value="WEP" label="WEP"></x-radio>
					<x-radio value="WPA" label="WPA/WPA2"></x-radio>
				</x-radio-group>
			</view>
			<x-text class="my-12">是否隐藏密码</x-text>
			<view>
				<x-radio-group v-model="hidnpassword">
					<x-radio value="true" label="是"></x-radio>
					<x-radio class="mx-16" value="false" label="否"></x-radio>
				</x-radio-group>
			</view>
		</x-sheet>
		<view style="height:100px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	const qxqr = ref<XQrcoderComponentPublicInstance|null>(null)
	const logo = ref('')
	const text = ref('https://tmui.design')
	const model = ref('vertical')
	const ssid = ref("wifi")
	const auth = ref("WPA")
	const password = ref("123456")
	const hidnpassword = ref("true")
	const wifiQr = computed(():UTSJSONObject=>{
		return {
			ssid:ssid.value,
			auth:auth.value,
			password:password.value,
			hidden:hidnpassword.value
		} as UTSJSONObject
	})
	const getImgQr = ()=> {
		qxqr.value?.getQrImg?.((imgstr:string)=>{
			if(imgstr=='') return;
			uni.previewImage({
				current:imgstr,
				urls:[imgstr] as string[]
			})
		})
	}
</script>

<style lang="scss">

</style>
最近更新