第十九届D2终端技术大会：uni-app x：纯原生跨平台框架的探索与鸿蒙化实践

第十九届D2终端技术大会第十九届D2终端技术大会uni-appx纯原生跨平台框架的探索与鸿蒙化实践第十九届D2终端技术大会崔红保3第十九届D2终端技术大会「uni-appx立项背景」第十九届D2终端技术大会第十九届D2终端技术大会6第十九届D2终端技术大会App平台的跨端框架VS原生开发Android原生kotlin渲染引擎kotlin逻辑层与UI层⽆⽆iOS原生swiftswift⽆⽆CordovaJSweb渲染webview⽆有uni-app(vue)JSweb渲染JS引擎有有reactnativeweexuni-app(nvue)JSJS引擎有有flutterdartdart引擎⽆有混合渲染新坑第十九届D2终端技术大会第十九届D2终端技术大会uni-appx的核心实现第十九届D2终端技术大会uni-appx的纯原生编译方案KotlinJavaScript(pc/h5)（JavaScript(pc/h5)Swift（iOS）JavaScript(JavaScript(小程序)ArkTS&ArkUI（HarmonyOS）Web平台NativeWeb平台第十九届D2终端技术大会uni-appx的纯原生编译方案原生渲染：•规避web渲染的性能短板；解决Cordova、uni-app(vue)的短板；•规避自绘渲染和原生UI的兼容问题；解决flutter的短板；原生逻辑：•消除逻辑层与视图层间的通讯折损；除flutter外，主流跨端框架均有此缺陷；•消除逻辑层调用OSAPI的通讯折损；包括flutter，主流跨端框架均有此缺陷；compilecompile第十九届D2终端技术大会编译器：语言转换-变量第十九届D2终端技术大会编译器：语言转换-语句第十九届D2终端技术大会编译器：语言转换-类/对象第十九届D2终端技术大会运行时：kotlinvueruntime第十九届D2终端技术大会运行时：kotlinvueruntime第十九届D2终端技术大会原生交互(—)：代码混编前端页面，可以importkotlincode，并直接调用原生方法第十九届D2终端技术大会原生交互（二）：原生API扩展step.1：使用kotlin代码，获取系统电量>第十九届D2终端技术大会原生交互（三）：原生UI扩展<native-view>组件，挂载并渲染原生扩展UI第十九届D2终端技术大会原生交互（四）：uni-appxsdk存量原生工程支持渐进式引入uni-appx类似reactnative/weex/fluttersdk第十九届D2终端技术大会uni-app的鸿蒙Next适配第十九届D2终端技术大会uni-app功能框架图 App平台H5平台小程序平台展功能展功能iOSAndroidHarmonyOSH5平台微信QQ支付宝/百度/头条/快手uni-app将常用的组件和API进行了跨平台api封装，可覆盖大部分的业务需求包括uni-ui等各种扩展组Uni扩展组件，sdk，模板项目件均在插件市场()微信小程序自定义组件和三方s支付宝/百度/头条/快手专有API通过renderjs引入web库H5平台专有API微信小程序插件微信专有API:如微信运动卡券等业务APIQQ小程序插件QQ专有API:如打开手Q说说发表界面HTML5Plus：跨iOS、Android的JS增强引擎Nvue：webview渲染和原生渲染双引擎可选鸿蒙专有APInativejs:使用JS直接调用iOSAPInative.js:使用JS直接调用AndroidAPIuniiOSsdk:和原生开发混合编码,利用原生扩展功能uniAndroidsdk:和原生开发混合编码，利用原生扩uni-app在鸿蒙Next功能总览组件接口webviewwebview框架cookie管理经典Hybrid架构•经典Hybrid架构•逻辑层、视图层分离；•对存量uni-app项目友好，平滑迁移鸿蒙系统；WebComponentswebviewjsBridgejsBridgeArkTSArkTSuni-app的web架构对存量开发者最为友好➢最小的适配成本和主流小程序架构—致，兼容性最好，改造量最小。基于uni-app开发的存量App、小程序、H5应用，均可快速发布成鸿蒙App。➢最快入驻鸿蒙生态更快入驻，抢先接收鸿蒙的流量红利，抢先发展用户。uni-appxHarmonyOS适配方案UTSTS+VuecompileArkTS&ArkTS&ArkUIbundlehap/appVueArkTSruntime原生渲染高性能的渲染引擎原生鸿蒙构建基于原生渲染高性能的渲染引擎原生鸿蒙构建基于ArkTS和ArkUI的鸿蒙原生应用拥抱web生态，跨平台、低门槛、高效率uni小程序SDK1.原生鸿蒙App扩展自定义小程序➢精简安装包，降低下载安装折损➢丰富业务，提升用户留存2.兼容uni-app生态➢兼容业内基于uni-app开发的小程序➢兼容uni-app插件市场1.5万款插件3.跨平台，兼容主流mobileOS4.免费第十九届D2终端技术大会鸿蒙元服务基于uni-app开发的存量几十万小程序，均可快速发布为鸿蒙元服务。案例第十九届D2终端技术大会uni-appx的工具链支持第十九届D2终端技术大会开发者进行技术选型的考量因素性性持续集成、自动化测试、工具链化跨端框架跨端框架第十九届D2终端技术大会跨语言调试-以安卓为例点击console.log，回到前端代码手机端App运行时，将原生代码的异常原生代码运行时，触发前端页面中设置第十九届D2终端技术大会index.uvuein第十九届D2终端技术大会>6.触发>6.触发console.log志内容、源文件(.uvue)的位含原始uvue源码位置2.定制实现kotlin的console4.startserver，listen...8.receivemessage9.控制台输出log，高亮位置信息，点击跳回.uvue源<第十九届D2终端技术大会跨语言调试-异常回源➢前端主动捕获通过➢前端主动捕获通过sourcemap生成捕获代码的位置映射信息客户端捕获时，通过当前的堆栈信息，反向解析sourcemap，获得原始前端代码的位置信息第十九届D2终端技术大会跨语言的断点调试第十九届D2终端技术大会跨语言调试-断点调试DAP:DebugAdapterProtocol<>kotlindebugAdapter<>JDWPjava-debuggerDAP：https://microsoft.github.io/debug-adapter-protocol/overviewJDWP：JavaDebugWireProtocol第十九届D2终端技术大会跨语言调试-断点调试DAP流程简介1.初始化调试会话•uni-appx开始编译，生成sourcemap文件•HBuilderX启动DebugAdapter•DebugAdapter与Kotlin程序建立连接2.设置断点•用户通过HBuilderX在前端页面中设置断点•HBuilderX通过sourcemap计算编译后kotlin代码的断点位置•HBuilderX发送setBreakpoints请求，DebugAdapter将断点信息传递给调试目标。3.启动调试•用户点击“启动调试”。•HBuilderX发送launch请求，DebugAdapter启动调试目标。4.断点命中•Debu