uni-app双引擎助力开发者高效构建鸿蒙应用.pdf

1、uni-app双引擎助开发者效构建鸿蒙应崔红保DCloud CTO个介绍崔红保 DCloud CTO uni-app 跨端框架负责 跨平台开发兵 深耕开发者服务领域，在跨平台、前端 UI、程序性能优化等经验较多。01020304录鸿蒙应开发的核挑战uni-app：更简单、更快捷的鸿蒙化案 uni-app x：更性能、更好体验的鸿蒙化案总结与展望01开发效率与运性能如何兼得？鸿蒙应开发的核挑战开发鸿蒙应从头开发存量转换基于ArkTS/ArkUI开发基于跨端案开发本质也是种跨端案三框架转换研跨端转换技术视开发鸿蒙应从头开发存量转换基于ArkTS/ArkUI开发基于跨端案开发三框架转换研跨端转换业务

2、团队主导架构团队主导团队视结构约束、更新机制UI构建模式差异css层叠样式、复杂选择器、动画样式系统割裂标签组件化、功能原化组件组件设计哲学冒泡捕获的委托机制、组件粒度的回调绑定事件机制断层BArkUI范式vs 传统web开发CDAArkUI声明式范式 vs Web开发思维02webview混合渲染引擎，存量业务极速迁移uni-app 鸿蒙化uni-app 鸿蒙化适配案经典Hybrid架构 逻辑层、视图层分离；对存量uni-app项友好，平滑迁移HarmonyOS；ArkTSjsBridgejs runtimewebview逻辑层框架视图层框架Web ComponenTSnative Comp

3、onenTSAppPagePageuni-app功能框架图App平台H5平台程序平台iOSAndroidH5平台微信QQ付宝/百度/头条/快Uni内置组件和api uni-app将常的组件和API进了跨平台封装，可覆盖部分的业务需求Uni扩展组件包括uni-UI等各种扩展组件，sdk，模板项均在插件市场()微信程序定义组件和三sdk通过renderjs引web库nativejs:使JS直接调iOS APInative.js:使JS直接调Android APIuni iOS sdk:和原开发混合编码,利原扩展功能uni Android sdk:和原开发混合编码，利原扩展功能H5平台专有API微信

4、程序插件微信专有API:如微信运动 卡券等业务APIQQ程序插件QQ专有API:如打开Q说说发 表界付宝/百度/头条/快专有APIHarmonyOS鸿蒙专有APIHTML5Plus：跨iOS、Android的JS增强引擎Nvue：webview渲染和原渲染双引擎可选uni-app在 HarmonyOS NEXT 功能总览表单组件视图容器基础组件媒体组件canvas地图webview告数据缓存界络件管理媒体管理位置服务路由三服务组件管理管理框架接组件数据响应配置管理应管理排版渲染权限管理具链uni_modulescookie管理uni-app的web架构对存量开发者最为友好 最的适配成本和主流程

5、序架构致，兼容性最好，改造量最。基于uni-app开发的存量App、程序、H5应，均可快速发布成鸿蒙App、元服务。最快驻鸿蒙态更快驻，抢先接收鸿蒙的流量红利，抢先发展户。web渲染引擎的缺陷 web渲染引擎的瓶颈切屏：打开新、选项卡切换势操作：地图、视频、下来刷新键盘：定制按钮逻辑视图分离架构，导致通讯阻塞逻辑层视图层Native层touch12render3403TS+Vue 源码转译为 ArkTS+ArkUIuni-app x程序平台的跨端框架App平台的跨端框架 VS 系统原开发开发语渲染引擎业务逻辑runtime逻辑层与UI层通信折损逻辑层与OS API 通信折损其它问题Androi

6、d系统kotlin强类型原渲染kotliniOS系统swift强类型原渲染swift鸿蒙系统ArkTS强类型原渲染ArkTSCordovaJS弱类型web渲染webview有SPA，交互动画弱uni-app(vue)JS弱类型web渲染JS引擎有有react nativeweexuni-app(nvue)JS弱类型原渲染JS引擎有有flutterdart强类型绘渲染dart引擎有混合渲染新坑uni-app x：基于语翻译的跨平台框架核改进 启原渲染，规避web渲染的性能短板；逻辑层、视图层全原，消除进程间通讯阻塞；