混合APP混合跨平台开发的一些经验与总结

姓名：郑红学号：17101223385

https://news.51cto.com/art/201711/558487.htm

【嵌入式牛指南】：Hybrid App主要使用JS+Native互相调用，从开发层面实现“一次开发，多次操作”的机制，真正适合跨平台开发。混合App具有本地App的良好用户体验和使用HTML5跨平台开发WebApp的低成本优势。目前，Hybrid App已经开发了许多成功的App，如美团、爱奇艺、微信等知名移动App

App开发模式。

【嵌入式牛鼻子】：混合App跨平台开发

【嵌入式奶牛问题】：移动应用的三种方式是什么？

【嵌入奶牛的身体】

1.三种移动App开发方法的比较

目前，开发移动App有三种主要方式：

[if！SupportLists]·[endif]本机App：本机应用

[if！supportLists]·[endif]WebApp：WebApp（移动Web）

[if！supportLists]·[endif]混合App：混合App

图1：三种移动App开发模式

如图1所示，三种移动App开发方法的具体比较如表2所示：

表2：三种移动App开发方法的比较

2.混合开发应用场景

（1） 妥协-如果企业使用混合开发方法，它可以结合本地和Web的优势。一方面，Native允许开发人员充分利用现代移动设备提供的所有不同特性和功能。另一方面，所有用Web语言编写的代码都可以在不同的移动平台之间共享，从而使开发和日常维护过程更集中、更短、更具成本效益。

（2） 内部技能-许多企业都有Web开发技能。如果您选择混合开发方法，在适当解决方案的支持下，Web开发人员可以构建App并提供本地用户体验，只要他们只使用HTML、CSS、JavaScript和其他Web技能。

（3） 考虑一下未来——HTML5的可用性和功能正在迅速提高。许多分析师预测，它可能会成为开发前端App的默认技术。如果HTML被用于编写App的大部分代码，并且仅在需要时使用本地代码，那么公司可以确保他们今天的投资不会在明天过时，因为HTML功能变得更加丰富，可以满足现代企业更广泛的移动需求。

3.混合开发框架和层次图

混合开发结构图

1） 移动终端web shell（以下简称“shell”）：shell是一个渲染引擎，使用操作系统的API创建嵌入式HTML。外壳的主要功能是定义AndroidApp和网页之间的接口，允许网页中的JavaScript调用Android应用，为基于web的App提供Android API，并将web嵌入Android应用。

2） 前端交互js：包括基本函数js和业务函数js。

3） 前端适配器：适应不同的终端：Pad、android、ios、wap。

混合开发层次图

1） 页面加载

[if！SupportLists]1.[endif]页面容器（XdjaWebView）类是整个框架的核心和基础。主要用于加载页面，支持页面加载后的后续操作，如文件下载、js支持、文件上传、数据缓存、进度条等；

[if！SupportLists]2.[endif]页面加载界面：跟踪页面加载过程；例如：页面加载进度百分比、页面开始加载、页面加载错误、页面加载完成等

2） JS调用Android功能

[if！SupportLists]1.[endif]Webpage:page调用js接口中的特定方法；

[if！SupportLists]2.[endif]JS接口：调用android接口中彼此对应的特定方法；

[if！SupportLists]3.[endif]Android接口：直接调用框架中集成的函数，或通过框架接口自定义应用系统中的函数（例如退出、返回键响应等）；可以通过升级接口在客户端中获取升级功能返回的结果或过程信息。

[if！supportLists]4.[endif]XdjaClientHelper：如果您需要将框架中的方法返回值通知给js方法，可以通过Xdja客户端Helper类进行通知；

3） App系统调用JS函数

应用系统通过XdjaClientHelper调用js函数；

4） App系统调用HDF功能

应用系统可以调用工具类、消息提示框、框架集成的升级模块