DCloud_UNI_Anne
DCloud_UNI_Anne
  • 发布:2024-06-26 13:13
  • 更新:2024-07-23 11:02
  • 阅读:2013

星河璀璨,uni-app 亮相华为 HDC2024 开发者大会

分类:uni-app x

2024年6月21日-23日,第六届华为开发者大会(HDC.Together 2024)在东莞松山湖盛大举办,本次盛会重磅发布了万众关注的HarmonyOS NEXT。

作为鸿蒙生态的重要合作伙伴和深度参与者,DCloud CTO 崔红保受邀出席本次大会,并在鸿蒙生态伙伴SDK论坛中发表《uni-app助力开发者快速构建高性能鸿蒙原生应用》的技术演讲,现场反响热烈。

崔红保先从开源指标、插件生态等维度介绍了uni-app的发展现状,以uni-app的功能框架图为例,介绍了uni-app如何在跨平台的过程中,不牺牲平台特色,优雅的调用平台专有能力,真正做到海纳百川、各取所长。

接着,介绍了uni-app的两套鸿蒙化适配方案。

方案一,是对存量uni-app项目的开发者非常友好的webview方案,这套架构是业内主流的Hybrid App架构,即逻辑层、视图层分离架构。老版uni-app在App平台使用的是这套架构,微信等各家小程序使用的也是这套架构。使用本方案,可以帮助开发者快速将之前基于uni-app开发的App、小程序、H5等,快速发布成鸿蒙App,快速入驻鸿蒙生态,抢先接收鸿蒙的流量红利。

方案二,是能获取更高性能、更佳体验的纯原生方案,也就是uni-app x。

每个App跨平台框架诞生时,都曾梦想颠覆原生,但从未成功,原因何在?

uni-app团队有十多年的跨平台框架开发经验,经过漫长的测试和思辨,我们发现关键在于运行时。若想媲美原生,运行时只能且必须也是原生。抛开渲染引擎不谈,业内的rn/weex等框架引入的V8/JS Core等运行环境,导致了逻辑层、视图层在两个进程中的通讯阻塞问题,相比原生开发的逻辑、视图均在一个原生进程中,业内目前的跨平台框架,天生有难以逾越的性能缺陷。

想清楚了这个关键点,跨平台框架就有了新的思路,那就是uni-app x目前的方案:开发态基于Web技术栈进行,但运行时需转化为各平台原生语言。

具体来讲,在web平台和小程序平台,我们将uni-app x编译为JS,这和目前的uni-app基本是一致的。但到了App平台,我们会将JS和Vue代码,编译为对应平台的原生语言。比如iOS平台,我们会将TS编译为swift,在Android平台,我们会将TS编译为Kotlin,到了鸿蒙平台,我们会将TS和Vue编译为arkTS和arkUI。

以uni-app x的鸿蒙化为例,进一步解释:

  1. 开发者依然基于 TS+Vue 的 Web 技术栈来编写代码,编码完毕后,uni-app x 编译器通过 swc 将 TS 和 Vue 代码编译成 arkTS/arkUI;

  2. 编译到鸿蒙开发者工具中的项目,代码已经变成了arkTS/arkUI,那使用的就是arkUI原生渲染,相比webview的渲染,性能更高。同时业务代码转换成arkTS,逻辑和渲染都使用鸿蒙原生,就实现了纯血的鸿蒙App。

  3. 最后,因为开发者在开发态使用的是Vue,用到大量数据响应的机制,所以在运行时,需要实现 arkTS 版的 Vue runtime,从而让开发者的业务数据变化能触发 arkUI 的更新。

使用 uni-app 开发鸿蒙应用,和之前开发各家小程序体验接近。主要编码工作在 HBuilderX 中完成,HBuilderX 支持鸿蒙OS的各种语法提示;编码完成后,将项目运行到鸿蒙开发者工具DevEco Studio,通过 DevEco 完成模拟器测试及hap安装包制作。

鸿蒙时代即将来临,开发鸿蒙的最佳实践是什么?uni-app值得推荐!原因有四,如下图。

面向未来,uni-app团队会持续对鸿蒙开发进行优化,重点会在性能体验、生态支持、开发体验、元服务等维度进行迭代升级。

通过HDC2024华为开发者大会,我们看到华为这次不再是画大饼,鸿蒙真的来了!

uni-app 的鸿蒙版目前处于邀请试用状态,部分开发者的App鸿蒙化适配已接近尾声。下图是基于 uni-app 开发的华为莫塞尔商城的鸿蒙化运行截图,运行体验非常流畅。

支持鸿蒙平台的uni-app Alpha版本,将于7月初面向所有开发者发布,敬请期待。

星河璀璨,基于uni-app加入鸿蒙正当时!

2 关注 分享
希语 唐家三少

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 唐家三少 :
是的,这个我已经试过了,但是不能使用 plus插件,我这边没办法解决引入的H5 页面和uni-app 的之间通讯问题,大佬您这边有解决方案吗
2024-07-23 11:02
DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

回复 希望之风 :
地图组件及相关定位api、uts插件内使用鸿蒙三方插件这两项会在4.25-alpha发布
2024-07-23 11:01
1***@qq.com

1***@qq.com

是的,这个我已经试过了,但是不能使用 plus插件,我这边没办法解决引入的H5 页面和uni-app 的之间通讯问题,大佬您这边有解决方案吗
2024-07-23 11:01
唐家三少

唐家三少

回复 1***@qq.com :
鸿蒙下也支持webview组件,但webview中引入的H5页面,不能使用plus相关API。
2024-07-23 10:08
希望之风

希望之风

目前已知,不支持plus、不支持地图组件及相关定位api、不支持商城中的绝大部分插件,如果项目中均使用到了这些应该如何适配呢,我现在将项目直接运行到鸿蒙,编译都编译不过,会报一些包的错误信息
2024-07-23 10:04
1***@qq.com

1***@qq.com

回复 王子飞云 :
我们也是这样子,基座是使用uni-app 项目,子应用是H5的形式放在hybrid本地文件夹下用webview组件来引入到vue页面中来。现在也还没有找到好的方案去适配
2024-07-23 09:05
Noah_liu

Noah_liu

回复 王子飞云 :
手动重构吧
2024-07-03 17:13
3***@qq.com

3***@qq.com

回复 王子飞云 :
我猜测是可以的,如果用到了html5 plus方法就需要对应替换为hormany plus方法(笑,除非有人愿意开发)
2024-06-28 16:04
王子飞云

王子飞云

最开始我们的项目是由hbuilder基于mui开发的,后来升级到hbuilderx的uniapp项目,我们采用的是部分代码用uniapp的方式编写,之前的项目老代码html放在hybrid本地文件夹下用webview组件来引入到vue页面中。这种能采用第一种方案吗,要怎么改造适配鸿蒙next呢??
2024-06-28 10:51
DCloud_UNI_CHB

DCloud_UNI_CHB

回复 王子飞云 :
不支持,可以通过条件编译写鸿蒙原生代码。
2024-06-27 11:14