uni-app x正式支持鸿蒙原生应用开发

DCloud发布的HBuilderX 4.64正式版,支持编译uni-app x项目到鸿蒙平台,实现跨平台开发鸿蒙原生应用。至此,uni-app x 已经完成Android、iOS、鸿蒙、Web、微信小程序等主流平台全覆盖。

uni-app x,是下一代 uni-app,是一个原生的跨平台开发框架。

uni-app x 的革新性在于其“开发态基于Web技术栈,运行时编译为原生代码”的设计。开发者依然使用熟悉的Vue语法与类TypeScript的UTS语言编写代码,编译到鸿蒙平台时,代码会被转换为鸿蒙NEXT的原生语言ArkTS,并基于ArkUI渲染引擎运行,没有虚拟机、没有js引擎、没有webview,实现真正的系统原生性能

欢迎到鸿蒙应用商店搜索“DCloud开发者中心系统”体验示例。

uni-app x的高性能得益于:

  • 编译为原生语言

uni-app x编译器,可以将UTS语言直接编译为各个平台的原生代码:

  1. to Android:编译为kotlin代码
  2. to iOS:编译为swift代码
  3. to 鸿蒙:编译为ArkTS代码
  4. to Web和小程序:编译为js代码
  • 运行时优化

基于不同平台的原生view封装为跨平台的、统一的原生UI库。

将不同平台的原生能力API,封装为统一的UTS插件,通过interface统一输入输出,形成了网络、文件系统、多媒体等大量统一的跨平台API。

由于逻辑层与视图层均在原生进程中运行,避免了跨语言通信的延迟问题,启动速度和交互流畅度可媲美原生开发。

这种设计让开发者既能享受Web技术栈的高效开发,又能获得原生应用的性能体验,真正实现“鱼与熊掌兼得”。

uni-app x的演示应用已上架鸿蒙应用商店,你可以通过单框架版本的纯血鸿蒙手机,在应用市场搜索“DCloud开发者中心系统”安装体验,该应用详细演示了uni-app x在鸿蒙平台上支持的各种组件、API、CSS以及部分模版示例。

在模板->slider100示例中,页面中有100个slider组件,拖动其中1个滑块,剩余99个滑块会同步移动。这非常考验逻辑层和视图层的通信性能。欢迎开发者使用相同示例在其他跨平台工具下比较,甚至可以用ArkUI的声明式写法来对比,看看哪个更丝滑。其他框架开发的经常会出现不跟手、掉帧的情况。

至此,DCloud面向鸿蒙平台,已正式发布uni双引擎,支持不同类型的开发者,快速开发鸿蒙应用:

  1. uni-app:基于经典的Hybrid App架构,逻辑层、视图层分离实现,使用webview渲染,对存量的uni-app项目开发者非常友好,帮助开发者以极低的代价,完成存量数字应用(包括基于uni-app开发的App、各家小程序、H5等)的鸿蒙化转换。
  2. uni-app x:基于语言翻译实现,开发态使用Web技术栈,运行态转为平台原生语言,使用原生组件和原生渲染,可以获得和原生开发一样的运行体验,更适合对性能体验要求更高的开发者。

站在2025年的技术拐点上,我们目睹了国产操作系统从愿景走向现实,在今日中国之背景下,鸿蒙适配已从“做不做”,升级为“怎么做”。

Android、iOS、鸿蒙、web、小程序,每个平台都可以各自开发一套。但这必然不是聪明的做法。开发者一直希望找到一款好的跨平台框架,而过去的跨平台框架的性能一直无法令大型开发者满意。Flutter独立运行虽然性能不错,但调用原生能力、嵌入原生组件时,性能又下降,并且flutter在鸿蒙上没有官方支持,dart生态的很多插件迁移不到鸿蒙上,实际开发效率较低。

uni-app x作为一个真正原生化的跨平台开发工具,让开发者不用再顾忌跨平台框架的性能问题,没有js引擎和webview渲染。在运行时都是原生编程语言、原生UI。调用操作系统能力、调用原生组件时,都没有跨语言通信、跨渲染引擎滚动,操作顺畅丝滑。

除了高性能外,生态非常重要。uni-app x除了自身提供大量组件和API外,还有丰富的插件生态。插件市场已经有数千款uni-app x的插件,其中不少插件已支持鸿蒙next。接下来DCloud还将举办2025年插件大赛,进一步活跃插件生态。详见:DCloud 插件市场 。

当然还需要强调一点,uni-app x中不用插件也可以调用鸿蒙系统原生的数万API,这与其他跨平台开发工具不同。其他跨平台工具都需要手动封装插件,插件数量不够会严重卡住开发进度。

下面代码示例看到,开发者在vue页面中可以直接引用ohos的系统库,因为其实这段vue代码最终也被编译运行到arkts引擎中,自然可以调用所有系统能力。

<template>
<!-- 页面模版代码 -->
</template>

<script>
	import deviceInfo from '@ohos.deviceInfo';
	export default {
		onLoad() {
			// 前端Vue页面,直接调用鸿蒙arkTS代码
			console.log("设备类型:" + deviceInfo.deviceType)
			console.log("设备厂家:" + deviceInfo.manufacture)
		}
	}
</script>

<style>
/* 样式代码 */
</style>

欢迎开发者使用 uni-app x开发鸿蒙原生应用。它可以帮助你使用简单易用的vue语法,更高效的完成应用开发,且不影响性能。

当鸿蒙版使用uni-app x后,你还可以同时渐进式重构之前的Android和iOS原生应用,在原生应用中引入uni-app x原生sdk,将部分页面模块跨端统一为uni-app x实现。

uni-app x的资源:

### uni-app 适配鸿蒙系统的能力 uni-app 提供了对鸿蒙系统的良好支持,使得开发者无需从头学习鸿蒙的原生开发语言和框架,即可快速上手开发鸿蒙应用。对于熟悉 uni-app开发者来说,开发效率可以显著提升[^1]。 uni-app 支持将现有的 uni-app 项目迁移到 HarmonyOS,或者从零开始开发新的鸿蒙原生应用。它提供了一套完整的工具和文档,帮助开发者根据自己的需求和项目情况选择合适的适配方案[^2]。 从 HBuilderX 4.62 版本开始,uni-app 提供了对鸿蒙原生组件的同层渲染支持开发者可以通过 UTS 插件实现鸿蒙原生组件的嵌入与交互。这意味着 uni-app 应用可以在需要时使用鸿蒙原生组件,以实现更接近原生体验的界面和功能[^3]。 ### uni-app 与原生鸿蒙开发的差异 uni-app 是一种跨平台开发框架,其核心优势在于一次编写,多平台部署。它使用 Vue.js 作为开发语言,并通过编译工具将代码转换为各个平台的原生应用。在鸿蒙系统上,uni-app 支持 Vue3,但不支持 Vue2。此外,uni-app 在鸿蒙上的渲染方式并非完全原生,而是类似于 Web 渲染,通过自动注入一些默认样式进行兼容。尽管如此,Vue3 仍然支持选项式代码风格,使得从 Vue2 升级到 Vue3 的开发者可以更容易适应[^4]。 与 uni-app 相比,原生鸿蒙开发通常使用 ArkTS(一种基于 TypeScript 的语言)进行开发,能够充分利用鸿蒙系统的特性和性能优势。原生开发提供了更高的性能和更精细的控制能力,适用于对性能和用户体验有较高要求的应用场景。 ### uni-app 适配鸿蒙的优势 uni-app 在鸿蒙上的适配具有以下优势: - **快速上手**:开发者无需学习鸿蒙的原生开发语言和框架即可开始开发- **工具支持**:uni-app 提供了完整的工具链和文档,简化了开发流程。 - **跨平台兼容性**:uni-app 允许开发者编写一次代码,部署到多个平台,包括鸿蒙。 - **灵活性**:通过 UTS 插件,uni-app 可以集成鸿蒙原生组件,从而实现更接近原生的用户体验。 ### uni-app 适配鸿蒙的局限性 尽管 uni-app 在鸿蒙上的适配具有诸多优势,但也存在一定的局限性: - **性能差异**:由于 uni-app 的渲染方式并非完全原生,因此在某些高性能需求的应用中可能无法达到原生开发的效果。 - **功能限制**:uni-app 可能无法完全支持鸿蒙系统的所有新特性和功能,需要等待框架的更新和完善。 ### 示例代码 以下是一个简单的 uni-app 页面示例,展示了一个基本的用户界面: ```vue <template> <view class="container"> <text class="title">Hello, Uni-app!</text> <button title="Click Me" @click="onClick" /> </view> </template> <script> export default { methods: { onClick() { alert('Button clicked!'); } } } </script> <style> .container { flex: 1; justify-content: center; align-items: center; } .title { font-size: 24px; margin-bottom: 20px; } </style> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值