目录
uni-app x 是什么
和Flutter对比
uts语言
uvue渲染引擎
组合式API的写法
选项式API写法
页面生命周期
API
pages.json全局配置文件
总结
uni-app 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不支持vue2
uts替代的是js，而uvue替代的就是html和css。或者如果你了解flutter的话，也可以理解为uts类似dart，而uvue类似flutter。
和Flutter对比
在过去的跨平台方案中，逻辑层和ui层的通信始终是痛点。
- 所以在
webview渲染时，增加了renderjs、wxs等技术 - 所以在
nvue渲染时，增加了bindingX技术 - 所以在
skyline渲染时，增加了worklet技术
但这些补丁技术都不治根。过去只有flutter解决了dart和ui层的通信问题。可是这套方案又带来2个问题：
- dart和原生层通信也还是有延时，对象传递需要序列化，造成性能问题；
- 自渲染而不是原生渲染，无可避免会引发混合渲染，比如原生的信息流广告内嵌、原生输入法适配，造成内存高和输入障碍。
其实不管是js还是dart，和原生都有通信桥，功能上没有限制，可以调用各种原生能力，但问题就出在Android上这个通信性能上不去。
既然通信性能不行，那就干脆不通信。
由于uts在Android上被编译为kotlin，它的逻辑层和UI层都是纯原生的，没有通信问题，所以它的性能真正达到了原生水平。因为本质上它就是换了vue写法的原生kotlin应用。
在iOS上，情况要复杂些，这里就不具体讲解，如果有兴趣的小伙伴可以点击这里查看
uts语言
uts替代的是js，而uvue替代的就是html和css。或者如果你了解flutter的话，也可以理解为uts类似dart，而uvue类似flutter。
uvue是一套基于uts的、兼容vue语法的、跨平台的、原生渲染引擎。
- Android版于3.99上线
- Web版于4.0上线
- iOS版于4.11上线
uts和ts很相似，但为了跨端，uts进行了一些约束和特定平台的增补。详见 uts语言介绍
例子如下：
// 声明一个string类型的变量
let str :string = "hello";
let str1 = 'world';
str = "hello world";
str = str1 as string; // 在不确定类型的时候可以给他一个类型
// 声明一个传参是数字类型的，返回是boolean类型的函数
const test = (score: number): boolean => {
return (score>=60)
}
// 也可以自定义数据类型进行类型规范，比如声明一个Page类型
type Page = {
name : string
enable ?: boolean
url ?: string.PageURIString
}
// 总的来说，会TypeScript的，这个是没问题的，两个很相像
uvue渲染引擎
uvue支持的是vue3语法，支持组合式API和选项式API。详见vue语法
uvue在App端支持的css语法，是web的子集，类似于但优于nvue的css。仅支持flex布局，但也足以布局出需要的界面。详见css语法
使用该css子集，可保证跨端。如果把uvue页面编译到web平台，则web的其他css也都可以使用。
代码例子：
组合式API的写法
<template>
<view class="container">
<button @click="add">加</button>
{{ count }}
<button @click="reduce">减</button>
</view>
</template>
<script lang="uts" setup>
//这里只能写uts
let count = ref(1);
// 加一
const add = () => {
count.value++;
}
// 减一
const reduce = () => {
count.value++;
}
</script>
<style>
.container{
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
}
</style>
选项式API写法
<template>
<view class="container">
<button @click="add">加</button>
{{ count }}
<button @click="reduce">减</button>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
count : 1,
}
},
onLoad() {
// 页面启动的生命周期，这里编写页面加载时的逻辑
console.log('onLoad')
},
methods: {
add : function () {
this.count++;
},
reduce : function () {
this.count--;
},
}
}
</script>
<style>
.container{
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
}
</style>
页面生命周期
<template>
<scroll-view :bounces="false">
<view v-for="item in 90">
{{ item }}
</view>
</scroll-view>
</template>
<script setup lang="uts">
onLoad((options : OnLoadOptions) => {
console.log('onLoad', options)
})
onPageShow(() => {
console.log('onPageShow');
})
onReady(() => {
console.log('onReady');
})
onPullDownRefresh(() => {
console.log('onPullDownRefresh');
})
onPageScroll((e : OnPageScrollOptions) => {
console.log('onPageScroll');
})
onReachBottom(() => {
console.log('onReachBottom');
})
onBackPress((options : OnBackPressOptions) : boolean | null => {
console.log('onBackPress');
return null
})
onPageHide(() => {
console.log('onPageHide');
})
onUnload(() => {
console.log('onUnload');
})
onResize((options : OnResizeOptions) => {
console.log('onResize', options)
})
</script>
<style>
.container {
height: 1200px;
}
</style>
API
uni-app x支持的API包括：
- uts的API 详见
- 全局API，前面不需要加
uni.。如getApp、getCurrentPages - uni.xxx的内置API。数量较多，详见
- uniCloud.xxx的内置API。详见
- dom的API 详见
- 原生API
由于 uts 可以直接调用 Android 和 iOS 的 api，所以 OS 和三方sdk的能力都可以在uts中调用。如下：
<script>
import Build from 'android.os.Build';
export default {
onLoad() {
console.log(Build.MODEL); //调用原生对象，返回手机型号
console.log(uni.getSystemInfoSync().deviceModel); //调用uni API，返回手机型号。与上一行返回值相同
}
}
</script>
pages.json全局配置文件
pages.json 文件是 uni-app x 的页面管理配置文件，决定应用的首页、页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
所有页面，均需在pages.json中注册，否则不会被打包到应用中。
在HBuilderX中新建页面，默认会在pages.json中自动注册。在HBuilderX中删除页面文件，也会在状态栏提示从pages.json中移除注册。
除了管理页面，pages.json支持对页面进行特殊配置，比如应用首页的tabbar、每个页面的顶部导航栏设置。
但这些uni-app中设计的功能，主要是为了解决页面由webview渲染带来的性能问题，由原生提供一些配置来优化。
uni-app x的app平台，页面不再由webview渲染，其实不需要原生提供特殊配置来优化。但为了开发的便利和多端的统一，也支持了tabbar和导航栏设置。
但不再支持uni-app的app-plus专用配置以及tabbar的midbutton。
如pages.json中配置的导航栏和tabbar功能无法满足你的需求，可以不在pages.json中配置，自己用view做导航栏和tabbar。
例子如下
{
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabBar/component",
"style": {
"navigationBarTitleText": "内置组件",
"backgroundColor": "#F8F8F8"
}
},
],
"globalStyle": {
"pageOrientation": "portrait",
"navigationBarTitleText": "Hello uniapp x",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#007AFF",
"backgroundColorContent": "#efeff4",
"backgroundColor": "#efeff4",
"backgroundColorTop": "#F4F5F6",
"backgroundColorBottom": "#F4F5F6"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#007AFF",
"borderStyle": "black",
"backgroundColor": "#F8F8F8",
"list": [{
"pagePath": "pages/tabBar/component",
"iconPath": "static/component.png",
"selectedIconPath": "static/componentHL.png",
"text": "内置组件"
},
{
"pagePath": "pages/tabBar/API",
"iconPath": "static/api.png",
"selectedIconPath": "static/apiHL.png",
"text": "接口"
},
]
},
"condition": {
//模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "", //模式名称
"path": "", //启动页面，必选
"query": "" //启动参数，在页面的onLoad函数里面得到
}]
}
}
总结
个人看一遍下来感觉只要会uniapp、vue、TypeScript，可以直接上手直接做，如果有什么不同可以去看官方文档，包看懂的~~
