• 干货 | 携程鸿蒙应用开发实践


    作者简介

     

    Gordon,携程资深移动开发工程师,关注鸿蒙开发。

    背景

    作为全球领先的一站式旅游服务平台,携程始终坚持以技术创新为发展核心。自鸿蒙发布以来,我们便投入研发力量进行调研、开发,并成功落地了携程机票项目、服务卡片项目等。现将鸿蒙项目中相关经验整理分享,希望能给大家一些参考,也希望鸿蒙发展能越来越好。

    一、鸿蒙系统简介

    华为鸿蒙HarmonyOS系统是面向万物互联的全场景分布式操作系统,目前鸿蒙系统已从2.0升级更新至Beta 3.0,支持手机、平板、智能穿戴、智慧屏等多种终端设备运行,提供应用开发、设备开发的一站式服务。

    凭借多终端开发IDE,多语言统一编译,分布式架构Kit提供屏幕布局控件以及交互的自动适配,支持控件拖拽,面向预览的可视化编程,使开发者可以基于同一工程高效构建多端自动运行App,实现真正的一次开发,多端部署,在跨设备之间实现共享生态。

    作为万物互联时代的操作系统,“分布式技术”铸就了鸿蒙的核心竞争力,在5G这个万物互联的时代有着巨大的优势。


    二、鸿蒙系统开发


    2.1 开发语言

    鸿蒙适合的开发语言是Java、JavaScript、C++,其中Java、JavaScript适合用于手机应用UI界面开发工作,C++和JavaScript适合嵌入式设备UI界面相关开发工作。只有JavaScript写的UI界面可以跨设备使用。

    在以后的鸿蒙版本中(计划是3.0),即将推出仓颉语言开发(仓颉语言是华为自主研发的一款语言)。目前主推的还是Java和JavaScript。

    鸿蒙服务卡片开发,可以使用Java和JavaScript(华为建议JavaScript),其中Java和JavaScript服务卡片场景及能力差异如下:

    场景

    Java卡片

    JS卡片

    版本

    实时刷新

    Java使用ComponentProvider做实时刷新代价比较大

    JS可以做到端侧刷新,但是需要定制化组件

    HarmonyOS 2.0及以上

    开发方式

    Java UI在卡片提供方需要同时对数据和组件进行处理,生成ComponentProvider远端渲染

    JS卡片在使用方加载渲染,提供方只要处理数据、组件和逻辑分离

    HarmonyOS 2.0及以上

    组件支持

    Text、Image、DirectionalLayout、PositionLayout、DependentLayout

    div、list、list-item、swiper、stack、image、text、span、progress、button(定制:chart 、clock、calendar)

    HarmonyOS 2.0及以上

    卡片内动效

    不支持

    暂不开放

    HarmonyOS 2.0及以上

    阴影模糊

    不支持

    支持

    HarmonyOS 2.0及以上

    动态适应布局

    不支持

    支持

    HarmonyOS 2.0及以上

    自定义卡片

    不支持

    支持

    HarmonyOS 2.0及以上


    2.2 鸿蒙系统架构

    在说明鸿蒙系统架构之前,首先要了解AOSP(Android Open-Source Project,Android 开放源代码项目)和Google Android的区别。AOSP可以随便用,但只有经过Google认证的Android才能安装GMS和Google Play。Google控制的是GMS和Google Play,无权控制Android。

    HarmonyOS整体遵从分层设计,从下向上依次为:内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 功能/模块”逐级展开,在多设备部署场景下,支持根据实际需求裁剪某些非必要的子系统或功能/模块。

    HarmonyOS技术架构如下所示:

    1aee532a4f323a5090956c9d03dbb68e.png

    AOSP大致对应图中的UI框架+用户程序框架+Ability框架。为了兼容Android,Harmony使用了AOSP的部分代码,用来构建Android应用兼容层来运行Android应用。鸿蒙框架解析后将数据交给了Android,由Android的负责将其渲染在SurfaceView上。

    HarmonyOS采用多内核设计,支持针对不同资源受限设备选用适合的OS内核。内核抽象层(KAL,Kernel Abstract Layer)通过屏蔽多内核差异,对上层提供基础的内核能力,包括进程/线程管理、内存管理、文件系统、网络管理和外设管理等。

    系统服务层分布式软总线技术将物联网通讯技术(NFC、蓝牙、WIFI……)与协议(CoAP、RPC……)做了良好的封装,以及对数据格式(HarmonyOS IDL)以及服务(PA)做了良好的抽象,使局域网内的设备之间可以方便的通讯、交换数据、调用远程服务,设备之间仿佛融为一体。

    框架层为HarmonyOS应用开发提供了Java/C/C++/JS/TS等多语言的用户程序框架和Ability框架,两种UI框架(包括适用于Java语言的Java UI框架、适用于JS/TS语言的方舟开发框架),以及各种软硬件服务对外开放的多语言框架API。

    应用层包括系统应用和第三方非系统应用。HarmonyOS的应用由一个或多个FA(Feature Ability)或PA(Particle Ability)组成。其中,FA有UI界面,提供与用户交互的能力;而PA无UI界面,提供后台运行任务的能力以及统一的数据访问抽象。FA在进行用户交互时所需的后台数据访问也需要由对应的PA提供支撑。基于FA/PA开发的应用,能够实现特定的业务功能,支持跨设备调度与分发,为用户提供一致、高效的应用体验。

    我们今天主要从应用层开发方面展开。

    三、携程鸿蒙服务卡片

    携程很早就在鸿蒙OS发力,基于HarmonyOS分布式能力,开发了携程机票手机、手表联动项目。在HarmonyOS推出原子化能力后,又上线了携程会员中心、核酸检测、携程火车票服务卡片,以期给到用户更多的选择。

    80acea560fe156908641cac504092f6c.jpeg

    3.1 开发流程

    通过HarmonyOS 系统能力、开发指导、API参考等文档,利用 HUAWEI DevEco Studio 开发工具,开发不同设备的应用,为用户带来全场景体验。

    总结起来,整个开发流程分为开发准备、应用开发、应用测试、应用发布几个流程。

    阶段

    流程

    开发准备

    1. 成为华为开发者(个人/企业)

    2. 安装DevEco Studio

    3. 配置开发环境

    编写代码

    1. 创建工程

    2. 编写调试代码

    3. 预览查看布局效果

    应用测试

    1. 申请调测证书

    2. 调试应用

    3. 隐私、漏洞、性能等测试

    发布

    1. 申请发布证书

    2. 发布应用至华为商店

    3.2 服务卡片

    服务卡片(以下简称“卡片”)是FA的一种界面展示形式,将FA的重要信息或操作前置到卡片,以达到服务直达,减少体验层级的目的。

    a81cbacfba03d3d46844b0b5a49f049a.png

    经调研,从安卓到鸿蒙,最明显的变化应该就是服务卡片。故我们计划以服务卡片作为切入点,实现携程鸿蒙服务卡片功能。经过版本逐步迭代,目前已上线了会员签到、核酸检测、抢火车票等功能。

    由于整个开发流程中,开发准备和发布流程参考文档即可完成,仅从编写代码和应用测试两方面展开,给大家简单介绍一下。


    3.3 服务卡片开发

    考虑快速开发上线的需求,我们调研使用鸿蒙Native+Webview混合开发的模式,通过Native层处理持久化等相关能力,Webview实现功能进行展开。

    3.3.1 鸿蒙Webview实现功能

    首先,通过XML布局文件进行操作:

    1. <ohos.agp.components.webengine.WebView
    2. ohos:id="$+id:health_webview"
    3. ohos:height="match_parent"
    4. ohos:width="match_parent"/>

    注意:ohos.agp.components.webengine.WebView和WebView都是有提示的。但WebView与ohos.agp.components.webengine.WebView并不等价,这可能是鸿蒙的一个漏洞,直接输入 WebView 并不能使用这个组件。

    然后在Native代码中实例化Webview:

    1. private void initWebview(){
    2. WebConfig webConfig = webView.getWebConfig();
    3. if (null != webConfig){
    4. webConfig.setWebStoragePermit(true);//
    5. webConfig.setJavaScriptPermit(true); // 如果网页需要使用JavaScript,增加此行;
    6. webConfig.setSecurityMode(WebConfig.SECURITY_ALLOW);
    7. webConfig.setLocationPermit(true);
    8. webConfig.setDataAbilityPermit(true);
    9. webConfig.setMediaAutoReplay(true);
    10. webConfig.isLoadsImagesPermitted();//webview是否下载图片资源
    11. webConfig.setTextAutoSizing(true);
    12. webConfig.setViewPortFitScreen(true);
    13. }
    14. setWebViewCookie();
    15. this.webView.setWebAgent(new TripWebAgent());
    16. webView.load(HEALTH_URL);
    17. }

    3.3.2 服务卡片配置

    卡片应用是一款特殊的元能力服务,其配置文件config.json中声明以下几项,系统能够识别该应用为一款卡片应用,并与系统进行绑定。

    config.json文件"abilities"配置forms模块细节如下:

    1. "forms": [
    2. {
    3. "landscapeLayouts": [
    4. "$layout:health_2_2",
    5. "$layout:health_2_4"
    6. ],
    7. "isDefault": true,
    8. "scheduledUpdateTime": "10:30",
    9. "defaultDimension": "2*2",
    10. "name": "health",
    11. "description": "$string:health_title",
    12. "colorMode": "auto",
    13. "type": "Java",
    14. "supportDimensions": [
    15. "2*2",
    16. "2*4"
    17. ],
    18. "portraitLayouts": [
    19. "$layout:health_2_2",
    20. "$layout:health_2_4"
    21. ],
    22. "updateEnabled": true,
    23. "updateDuration": 1
    24. }
    25. ]

    鸿蒙服务卡片有4种尺寸,分别是微卡片(1*2)、小卡片(2*2)、中卡片(2*4)、大卡片(4*4),同一个应用还支持多种不同类型的服务卡片,不同尺寸与类型可以通过卡片管理界面进行切换和选择。

    其设计的初衷就是信息显示、服务直达,基于以上原则,我们选择了携程App中几个常用的功能来实现服务卡片,每个功能分别实现了小卡片和中卡片两种样式。

    ad736c02691a474c8e9a572d9984901a.png

    3.4 服务卡片测试

    开发完代码后,接下来就可以使用真机进行调试了,使用真机设备进行调试前,需要对HAP进行签名后进行调试。详细的调试流程如下图所示。

    1649d7e2e4a7a88a6844fe8e38b9449a.png

    针对原子化服务和应用的签名,DevEco Studio为开发者提供了自动化签名方案,帮助开发者高效进行调试。

    当前只有受邀请开发者才能访问证书管理菜单。如果AGC页面未展示证书管理菜单,开发者需发送名称、申请背景及Developer ID至agconnect@huawei.com,等待华为受理。

    进入File > Project Structure > Project > Signing Configs界面,勾选“Automatically generate signing”,即可完成签名。

    2fe915e16d3b778f8caaa8a153f65e21.png

    若发布应用/服务,需通过申请数字证书(.cer文件)和Profile文件(.p7b文件)来保证其完整性。

    申请前,首先需要通过DevEco Studio来生成密钥(存储在格式为.p12的密钥库文件中)和证书请求文件(.csr文件),同时也可以使用命令行工具的方式来生成。

    13838b33055f0439e089967a8c809d1f.png

    设置完签名信息后,使用DevEco Studio生成APP。点击Build > Build Hap(s)/APP(s) > Build APP(s),等待编译构建完成已签名的APP。

    编译构建完成后,可以在build > outputs > app > release目录下,获取带签名的APP。

    99dc5a8b4bcfeef31b9a0508d3bbe2bb.png

    将HarmonyOS应用打包成APP后,通过AppGallery Connect将HarmonyOS应用分发到不同的设备上。可以根据发布HarmonyOS应用指导将APP上架到华为应用市场。

    四、未来展望

    除了华为的HarmonyOS,还有谷歌的Fuchsia、苹果的SiriOS、三星SmartTings、腾讯TencentOS tiny等等,可见未来IOT市场中,内卷竞争化会比智能手机时代的操作系统更加剧烈和难以预测。鸿蒙生态链仍处于早期阶段,各方面仍待完善。

    参考文档:

    1、HarmonyOS Developer

     https://developer.harmonyos.com/

    2、HarmonyOS原子化服务

    https://developer.harmonyos.com/cn/docs/documentation/doc-guides/atomic-service-definition-0000001090840664

    3、服务卡片开发简介

    https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-service-widget-provider-intro-0000001150722105

    4、鸿蒙开源代码

    https://gitee.com/explore/harmonyos-advanced

    5、HarmonyOS到底是不是Android套皮?

    https://mp.weixin.qq.com/s/Uw9_zE_k_jRUN-Frol535A

    6、HarmonyOS真机调试

    https://developer.huawei.com/consumer/cn/forum/topic/0203461929487310027

    【推荐阅读】

    9fc5bbad80955fdb0edf9482b39fd61d.jpeg

     “携程技术”公众号

      分享,交流,成长

  • 相关阅读:
    webview的使用说明
    Ubuntu服务器安装Nvidia显卡驱动各类失败问题的解决方案集合
    小红书信息流和薯条的区别是什么?各自有什么作用
    如何确定论文研究方向,看了很多论文还是没有头绪?
    python利用BUG让它免费啦~你在不知道就要后悔啦~
    【目标跟踪】|STARK
    图像分割之k-means聚类分割
    虚拟化/超融合人才招聘和业务合作
    树与二叉树(二叉树前传、数据结构初阶、C语言)
    SpringBoot:如何优雅地进行响应数据封装、异常处理?
  • 原文地址:https://blog.csdn.net/ctrip_tech/article/details/125795383