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

关于uniappx注意点1 - 鸿蒙app

news 2025/8/21 10:36:12

关于uniappx注意点1 - 鸿蒙app

uniappX与uniapp区别在于uniappx是做到了打包原生程序。在uniappx中比如打包后的鸿蒙app工程是可以通过鸿蒙开发软件打开看到对应视图结构的。uniappx是基于vue3语法的。

以鸿蒙app为例：

在这里插入图片描述

写法规范

字体样式

在uniappx中对一个文字进行修改字体样式等需要给文字包裹一个text标签，否则在鸿蒙app中无法正确渲染文字样式但是在微信小程序和网页中是可以正常显示的，因为uniappx不支持样式继承例如以下所示。

未加text标签：

<template><view class="container">111</view>
</template><style>
.container {width: 200rpx;height: 200rpx;background-color: pink;font-size: 100rpx;color: red;
}
</style>

在这里插入图片描述

加了text标签后：

<template><view class="container"><text class="header_text">111</text></view>
</template>
<style>
.container {width: 200rpx;height: 200rpx;background-color: pink;
}
.header_text {font-size: 100rpx;color: red;
}
</style>

在这里插入图片描述

junstify-content

这个在uniappx中设置未center 为主轴居中（垂直对齐）。

<template><view class="container"><text class="header_text">111</text></view>
</template><style>
.container {width: 200rpx;height: 200rpx;display: flex;background-color: pink;justify-content: center;
}
.header_text {font-size: 20rpx;color: red;
}
</style>

在这里插入图片描述