小编点评

**华为云数字化差旅：如何用混合开发玩转高效定制** 华为云DTSE技术布道师徐意分享了华为云数字化差旅移动端APP从原生框架到混合开发的演进过程，以及如何通过React Native及Hybrid混合开发框架去提升开发效率，解决企业客户多样的定制化诉求。 **华为云数字化差旅的架构变迁之路** 华为云数字化差旅是一个源于华为18年差旅管理实践的移动端差旅管理平台，通过搭建一体化的数字化差旅管理平台，为客户提供从差旅申请、审批、预订、行中保障、报销及差旅分析的一站式出行服务，助力其实现精益管理、提质增效、安全合规，不断提升员工出行体验。 **混合开发的魅力** 混合开发是将原生框架与React Native框架结合的开发模式，可以充分发挥 React Native框架的性能优势，同时保留原生框架的稳定性和可靠性。 **提升开发效率** 华为云提供了React Native框架的热更新能力，可以快速更新应用的代码，从而提升开发效率。 **解决定制化问题** 华为云提供多种框架选择，可以根据项目的需求选择合适的框架，解决企业客户多样的定制化诉求。 **如何为中小企业提供高效定制方案** 华为云提供以下服务： - 建设并持续完善RN组件库，快速构建企业UI页面 - 通过字体库图标、插画系统，实现图片素材的可定制化 - 设计个性化主题配置能力，实现配套主题切换 - 持续RN版本升级，提升性能、引入新功能 - 提供真机调测包 - 多环境切换能力，提升开发测试效率 **3大阶段规划** 华为云提供三个阶段的规划，了解差旅App未来演进方向为持续支撑业务发展、提升用户体验、沿袭“全场景、全流程、全数据”的建设思路。

正文

摘要：洞悉华为云数字化差旅App的架构变迁之路，体验混合开发魅力。

​​本文分享自华为云社区《DTSE Tech Talk 第21期丨从原生迈向混合，小而美团队如何搞定APP高效定制？》，作者：华为云社区精选 。

令开发者们心动的App端开发神器究竟长什么样？小而美的团队如何精准拿捏客户多元化定制需求，实现高效开发？在企业通用服务类App中，如何瞄准团队定位，快速engage客户？

近日，华为云DTSE技术布道师徐意带来了《揭秘华为云数字化差旅：如何用混合开发玩转高效定制》的主题分享。徐意与开发者们交流了华为云数字化差旅移动端APP从原生框架到混合开发的演进过程，以及如何通过React Native及Hybrid混合开发框架去提升开发效率，解决企业客户多样的定制化诉求，让开发者对混合框架的选择及可能解决的场景有一定的了解和认识。此外，针对中小企业混合开发实践，徐意也从团队定位、研发投入及生态构建等视角给予了专业的建议。

华为云数字化差旅，源于华为18年差旅管理实践，定位于企业差旅管理市场。依托“全场景、全流程、全数据”的建设思路，通过搭建一体化的数字化差旅管理平台，为客户提供从差旅申请、审批、预订、行中保障、报销及差旅分析的一站式出行服务，助力其实现精益管理、提质增效、安全合规，不断提升员工出行体验，使能企业数字化转型成功。截止目前，华为云数字化差旅服务范围已经涉及170+国家和地区，向全球480w+企业客户提供高品质服务，最终把数字化差旅带入每个企业、每个员工。

从原生到混合：紧贴业务需求，选择高效合适的混合框架

APP原生框架以性能高、体验好、功能丰富、稳定性高等特点而著称。但是由于其也存在开发成本高、移植性差、发布节奏慢等劣势，在现今越来越敏捷的交付节奏下，逐渐难以满足开发者及企业的诉求。

华为云数字化差旅在市场拓展过程中，随着企业客户的不断增加，多层面的差异性逐渐显现，差旅业务开发面临着诸多挑战：对接模式的差异、企业白牌定制、企业业务及个性化模块定制、企业差旅管理政策差异、企业紧急政策要求、多团队版本配合、特殊场景需求保障等等。在高频的项目交付中，“体验要好、交付要快、功能稳定、成本要低”成为客户的一致诉求。如何在持续满足客户需求的同时推进技术升级，也是当前差旅团队亟待思考的点。

从框架诉求、开发能力模型、维护成本3个维度出发，华为云数字化差旅开发团队综合评估了市面上主流成熟的混合开发框架，通过分析Hybrid、React Native、Flutter、Uni-app等框架的优缺点，结合实际业务诉求，先引入React Native框架去尝试解决业务交付难题。

React Native能力探索及演进

差旅团队在项目中首先尝试通过相对简单直接的单RN包的方式引入React Native框架能力，之后尝试使用配套的热更新能力，实现整RN包热更新。通过前期的尝试，在一个新业务开发中，团队逐步体验到Android与iOS代码合一、效率提升、问题修复效率高等框架优势：

效率方面：实现两端一套代码的诉求，业务开发、调试效率显著提升；
性能方面：整体交互性能稍有下降，但综合体验符合预期；
难度方面：业务开发技能JavaScript，上手更快；
热更新方面：具备热更新能力，提升灵活性。

在引入React Native框架后，团队之前面临的种种客户交付跳转看似也有了可行的解决方案。但团队逐步在做去割接其他业务时，也浮现出一些新的框架问题：

• 单RN包模式下，随着业务逐渐增多，bundle变大，初始化时间较长，内存消耗大；
• 整包热更新模式导致热更新文件大，下载等待时间长，生效慢；
• 随着客户增多，不同的客户包、不同版本需要不同的补丁包，导致手工管理困难。
  基于这些问题，团队开始思考和寻找对应的解决方案，随后采取如下措施：
• 使用Facebook metro构建工具进行进行分包能力开发，实现基本包与业务包分解，各业务包代码与功能独立，相互隔离，业务按需加载，按需释放。

• APP端热更新同步分包机制，按业务包实现独补丁包隔离。同时研究热更新生效策略并尝试启动等待生效，再启动生效，实时生效等多种策略。
• 基于华为云强大的平台能力，构建服务端补丁包管理体系：
• 使用google diff-match-patch text算法自动化实现代码差异对比，流水线构建增量补丁包，显著降低补丁包大小。
• 自建热更新管理系统，实现多产品、多版本、多渠道补丁分发管理以及灰度发布能力。
• 使用华为云OBS安全存储，CDN分发等服务提升补丁包下载速率及稳定性，同时根据针对补丁包进行安全校验防篡改以及补丁包密码加密等能力。

除了以上框架问题之外，团队通过持续构建RN能力生态，不断提升客户个性化诉求的场景覆盖及交付效率：

• 建设并持续完善RN组件库，快速构建企业UI页面；
• 通过字体库图标、插画系统，实现图片素材的可定制化；
• 设计个性化主题配置能力，实现配套主题切换；
• 持续RN版本升级，提升性能、引入新功能；
• 提供真机调测包；多环境切换能力，提升开发测试效率；
• 尝试构建自动化测试能力。

从4类应用场景探索WebView能力建设

差旅APP内应用场景的复杂多样性使得框架层面在一些场景上需要使用到webview模块的使用，即通过APP内置浏览器打开web页面给用户提供一些服务能力，团队总结为如下4类场景：

• 企业专属模块
• 多端共用模块
• 新增/高变化性模块
• 运营活动类模块

基于以上各类应用场景，差旅APP首先通过Android及iOS原生功能的开发及配置满足如支付等三方应用跳转场景及电话、邮件、相册、文件、定位、多媒体等能力场景，同时又进一步构建一套较完备的JSBridge方法库，将web页面所需的原生能力封装成API，包括界面交互类（如返回、刷新、导航栏等）、登录类（登录信息获取、实时登录等）、系统信息类(系统、版本、安全区域、设备id、暗黑、字体等)及其他功能类（分享、定位、跳转、业务功能等）。

在提供各类方法能力的同时，团队注意到web端的能力诉求涉及一定的敏感信息类，故在提供这类能力的同时，设计并构建了一套webview安全加固策略：域名白名单管控；JSBridge 方法管控；业务Token权限管控。

3大阶段规划，了解差旅App未来演进方向

为持续支撑业务发展、提升用户体验、沿袭“全场景、全流程、全数据”的建设思路，华为云数字化差旅团队基于自身技能及业务特点，会始终保持研究投入。对于差旅App未来发展，给出了三个阶段的规划：

• 短期内，主要着眼于RN版本可信、热更新能力的提升；
• 中期内，计划构建起RN+H5的融合方案，打造原子化、场景化的服务能力；
• 长期发展来看，会依托低代码等先进技术，打造多框架共建及配置化能力成为预研方向。

在最后的分享环节，针对中小企业在面临繁重、多元定制的交付需求等问题，讲师也从团队定位、APP框架选型、研发投入、生态构建、网络安全意识提升等方面给出了可行性的建议，希望开发者们能够依托混合开发玩转高效定制，快速响应客户需求，实现自身技术的迭代升级。

 

点击关注，第一时间了解华为云新鲜技术~