标准平台-混合开发方案

一、移动端常见的四种开发方式

1. 纯原生开发

原生Nativie开发，是在Android/IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行开发。

优点：

• 运行速度快、性能好、兼容性高；
• 处理复杂功能、嵌套复杂布局做到不丢帧，用户响应和体验好；

缺点：

• 可移植性差，相同功能逻辑需要都开发一套（IOS/Android）；
• 线上BUG不能直接修复，要通过重新发版来解决；

2. Flutter开发

面向移动端（Android/IOS）的UI框架，提供动态跨平台解决方案；

优点：

• 贴近原生的性能和体验；
• 一套代码适配UI界面，且也有越来越多的第三方组件库支撑；

缺点：

• 环境部署、业务场景等部分都需要 Native 提供相应的支持，需要培养既懂原生 Native开发、又懂Dart开发的人；
• 线上BUG不能直接修复，要通过重新发版来解决；

3. 混合开发

为了提高效率、节省成本而利用原生与H5的开发技术的混合应用，采用取长补短的开发模式，利用原生组件webView（webkit内核）作为Web的容器载体；实现的功能业务、界面展示等都是利用与H5相关的Web技术进行实现。

Native + H5（原始混合方案）

优点：

• 使用一套业务代码（ Java Script ）呈现相同效果，提高业务开发效率；
• 对于H5实现的业务BUG，可以做到快速修复和部署（不需要更新APP）；

缺点：

• 加载缓慢/网络要求高：首次加载，需要从服务端载入css、js等文件，对网络质量和服务器带宽要求更高，在缓冲数据过程时相对较长，给用户体验相对会差一些，容易让用户反感；
• 用户体验：页面的整体渲染效率、流畅度、响应速度上和原生有一定的差距；
• 适配性不友好：对部分业务场景（如. 输入框），在不同的手机适配效果差别较大；

React Native（JavaScript桥接器转成原生控件）

优点：

• 体验上比H5好，主要使用的组件还是原生；
• 支持热更新（接入微软的云服务器 CodePush），打包后上传到CodePush服务器；

缺点：

• 缺少React Native经验，对RN 构建环境和开发不熟悉；
• 对原生新出的控件，需要较长时间去开发支持，而且自定义组件能力较弱；
• 在引入第三方库，不能去修改原生代码，会引发错误或闪退；

二、移动端在【标准平台】投入的方案

技术上采用混合方案中的 原始混合技术（Native + H5）

• 对混合技术中存在的缺点进行优化：
  • 在首次加载时，对更新不频繁的第三方库文件（js/css），打包到APP中；提高部分库的加载进度；
  • 对输入框兼容问题，采用原生弹出框来解决适配问题；

对移动端的H5设计交互场景，需要形成统一的设计方案：

在BOSS预约项目中，发现产品和美工在设计业务场景时还是按照原来的原生APP思路在设计，没有形成的统一方案，导致的结果，原生和H5内容逻辑过于耦合，不利于后期扩展和维护；

• 统一的UI设计交互风格（可参考第三方）；
• H5呈现的功能页面，层级深度少，业务单一（页面跳转层级尽可能不超过4级）；
• H5业务功能尽可能不要去操作基础设置的内容；

人员要求及培养过程

• 需要懂原生开发人员，构建平台基础框架和环境；
• 需要掌握前端开发技术 vue，开发H5业务功能；
• 对前端vue技术培养：参与的人员已经能满足H5开发要求；
  • 3月底：内部开展组织学习前端vue的计划（参与者：郑周、蔡晓深、李瑞春、严新贵）
  • 4月份：以 天联共创App 为模板示例，开发天联共创H5 版本，最终效果达到预期目标；
  • 4月底：组织技术分享会，介绍 天联共创H5 项目的构建到开发过程及遇到的问题进行分享；
  • 5月份：BOSS预约 确认使用H5方案，在开发过程遇到的各种各样问题，在提测前夕全部解决；