什么是uni-app-x
uni-app-x,是下一代 uni-app,是一个跨平台应用开发引擎,uts在iOS平台编译为swift、在Android平台编译为kotlin、在Web和小程序平台编译为js、在鸿蒙next平台上编译为ArkTS。【注意】 这里是把uts编译成为对应平台的原生语言,和之前uni-app开发的hybrid以及nvue的运行方式不一样。
hybrid运行的方式是webview作为应用的载体。通过运行html代码来实现整个应用的运行。这种方式被人诟病的就是使用体验不好,如果原生使用特殊主体的字体那么h5的字体不会保持同步,解决方案就是单独集成x5内核。不过我之前集成了x5内核还是没有效果。
nvue的运行方式就是通过js创建的虚拟dom节点传递给原生,通过原生的view来进行绘制渲染,同样的也是多了一层js和原生层面的互相通信。
考虑到这些情况,uni-app-x认为一个好的UI层,仍然应该是原生渲染而不是自渲染。只不过需要解决逻辑层和原生(不管是原生UI还是原生能力)的通信问题。其实不管是js还是dart,和原生都有通信桥,功能上没有限制,可以调用各种原生能力,但问题就出在Android上这个通信性能上不去。
既然通信性能不行,那就干脆不通信。由于uts在Android上被编译为kotlin,它的逻辑层和UI层都是纯原生的,没有通信问题,所以它的性能真正达到了原生水平。因为本质上它就是换了vue写法的原生kotlin应用。
在iOS上,情况要复杂些。由于swift编译iOS应用必须依赖xcode,而DCloud的开发者中windows占比更高。且iOS上js和原生通信有解,所以uni-app x在iOS上提供js和swift双选逻辑层。
- js逻辑层已于4.11版上线
- swift逻辑层
还未上线
开发方式
在uni-app-x项目的开发中,用.uvue文件代替了.vue,用uts代替了之前ts/js语言。通过uvue和uts来书写uni-app-x项目。
下面是一段uvue书写的代码。看起和书写vue文件的代码相差不大
// index.uvue
<template>
<view>
<text class="red">{{text}}</text>
</view>
</template>
<script lang="uts" setup>
import { ref } from 'vue'
const text = ref("hello uni-app-x")
</script>
<style>
.red{
color:red;
padding-top: 100rpx;
}
</style>
运行结果:
思考
考虑到uni-app-x设计思路,我认为是一个非常不错的思路,这样的设计从本质上解决了现在所有跨平台开发的通信问题。同时代码编译成为原生代码,也能够减小最终生成apk包的体积。
也使得我们开发者能够直接使用更多的原生API。当然缺点也有,当我们书写的uts代码编译成为原生代码之后,调试不是那么的友好了,目前不写uts插件,直接调试项目的话好像hbuilderx还不支持。同时我们也需要知道某一个功能对应的原生api是什么,这样你才能够调用,需要对原生的api比较熟悉。所以对纯前端来说,也是一个不小的挑战,学习成本略微有点陡峭。
CNoder
看了uni-app-x设计思路,便萌生了找一个项目来练手学习一下,看看这个uni-app-x开发出来的app流畅度到底如何。于是用了CNode社区的开放api做了一个cnode-uni-app-x。项目代码已经开源,如果项目对你了解uni-app-x有帮助,请star一下。apk下载体验
开发中碰到的问题
Q: 自定义组件如何传递对象属性?
A: 目前官网提供的demo都是简单属性的传递,没有对象属性传递,貌似一传递就报错,可以用过v-bind一个UTSJSONObject试一试。
Q: 函数、数据的类型是否一定要定义??
A: 必须要定义,数据的类型、函数的入参类型、返回参数的类型一定要定义,特别是点击事件,一定要定义,不然编译会报错。
Q: 全局状态的管理
A: 官网给的解决方案是通过globalData的方式或者定义一个模块的响应式数据,导出操作响应式的方法来模拟,不过第二种方法有问题,目前代码里面通过全局的响应式数据来管理的用户信息的数据。数据变了UI界面不能及时的响应。
Q: cnoder功能是否完善??
A: 目前cnoder 完成了文章列表、文章详情、发布文章、登录这个几个模块,未完成的模块有消息列表、查看用户详情、我的收藏 这三个模块。后续补充完成。
Q: IOS能否正常使用
A: 目前博主没有iOS开发者账号,不过iOS这边是编译成js 逻辑层。所以应该问题不大
下面是cnoder 界面预览图