使用uni-app-x开发CNode社区客户端

733 阅读5分钟

什么是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语言。通过uvueuts来书写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>

运行结果:

image.png

思考

考虑到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 界面预览图

Screenshot_20250116_142553.jpg

Screenshot_20250116_142615.jpg

Screenshot_20250116_142705.jpg

Screenshot_20250116_142735.jpg

Screenshot_20250116_143617.jpg