当前位置：首页 > news >正文

Uni-app x

news 2025/7/13 0:49:16

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>