Uni-app x_uniapp x

uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

uni-app x 是一个庞大的工程，它包括uts语言、uvue渲染引擎、uni的组件和API、以及扩展机制。

uts是一门类ts的、跨平台的、新语言。uts在iOS端编译为swift、在Android端编译为kotlin、在Web端编译为js。

在Android平台，uni-app x 的工程被编译为kotlin代码，本质上是换了vue写法的原生kotlin应用，在性能上与原生kotlin一致。

uni-app x 是什么？ | uni-app-x

常用的方法

uni.$emit & uni.$on

发出和监听事件. 可以用来解耦模块之间的依赖. 

在添加页面
const addAddress = ()=> {
		
	uni.$emit('addAddressFinished')
	uni.navigateBack()
}
 
// 在使用页面 监听添加完成事件 可以刷新数据等
 
uni.$on('addAddressFinished', (e) => {
		
})

defineEmits

子组件向父组件传值

 
// 子组件
const emits = defineEmits(['selectItem'])
 
const selectItem = (item) => {
		emits('selectItem', item)
	}
 
 
 
// 父组件
<rechargeout-validation-popup  @select-item="rechargeoutAddressSelectItem"></rechargeout-validation-popup>

获取手机状态栏高度

<template>
	<view :style="{width: '100%', height: statusBarHeight + 'px', backgroundColor: 'transparent'}"></view>
</template>
 
<script setup>
	import { ref, reactive } from 'vue'
	// 手机屏幕信息
	const window = uni.getWindowInfo()
 
	const statusBarHeight = ref(0)
	statusBarHeight.value = window.statusBarHeight // 手机状态栏高度
</script>
<style>
</style>

defineProps

父组件向子组件传值

// 需要默认值
const props = defineProps({
	current: {
		type: Number,
		default: 0
	}
})
 
// 不需要需要默认值
const props = defineProps(['title'])
 
 
// 有默认值 并且属性必填
const props = defineProps({
	popups: {
		type: Array,
		default: [],
		required: true
	}
})

根据数据计算高度

• uni.createSelectorQuery().in(this);
• nextTick
• query.select(".tab1-coin-list").boundingClientRect

const getTabHeight = () => {
		const query = uni.createSelectorQuery().in(this);
		nextTick(() => {
			query.select(".tab1-coin-list").boundingClientRect((data) => {
				emits('tabHeight', Math.ceil(data.height))
			}).exec();
		})
	}
	onMounted(() => {
		getTabHeight()
		console.log('onMounted')		
	})
 
 
 
 
<swiper :style="{ height: `${tabs[activeIndex].height}px` }" :current="activeIndex" >
				<swiper-item>
					<coin-self-optional @tabHeight="(h) => { tabs[0].height = h }" ></coin-self-optional>
				</swiper-item>
				
			</swiper>

Sticky 吸顶 

Sticky 吸顶 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架

进度条

LineProgress 线形进度条 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架

Pinia

Pinia基础知识-CSDN博客

跨平台-条件编译

uni-app跨平台-条件编译#ifdef的写法-CSDN博客

页面跳转

uni.navigateTo(options) @navigateto | uni-app-x

UV-UI

Search 搜索 | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架