Hybrid APP混合开发的一些经验和总结

1、夹杂开辟概述

Hybrid App首要以JS+Native两者相互挪用为主，从开辟层面实现“一次开辟，多处运转”的机制，成为真正合适跨平台的开辟。Hybrid App兼具了Native App杰出用户体验的上风，也兼具了Web App利用HTML5跨平台开辟低本钱的上风。

今朝已经有众多Hybrid app开辟成功利用，比如美团、爱奇艺、微信等着名移动利用，都是采用Hybrid App开辟形式。

2、移动利用开辟的三种方式比力

移动利用开辟的方式，今朝首要有三种：

Native App： 当天时用法式（原生App）

Web App：网页利用法式（移动web）

Hybrid App：夹杂利用法式（夹杂App）

图1：三种移动利用开辟方式

如图1所示，三种移动利用开辟方式具体比力如表2所示：

表2：三种移动利用开辟方式比力

3、夹杂开辟利用处景

（1）折衷斟酌——假如企业利用 Hybrid 开辟方式，就能集Native 和web两者之所长。一方面，Native 让开辟者可以充实操纵现代移动装备所供给的全数分歧的特征和功用。另一方面，利用 Web 说话编写的一切代码都可以在分歧的移动平台之间同享，使得开辟战争常保护进程变得集合式、更简短、更经济高效。

（2）内部技术——很多企业都具有Web 开辟技术。假如挑选 Hybrid 开辟方式，在合适处理计划的支持下，Web 开辟者只要仅仅应用 HTML、CSS 和 JavaScript 等 Web 技术，就能构建 App，同时供给 Native 用户体验。

（3）斟酌未来——HTML5的可用性和功用都在敏捷改良。很多分析师猜测，它能够会成为开辟前端 App 的默许技术。假如用 HTML 来编写 App 的大部分代码，而且只要在需要时才利用 Native 代码，公司就能确保他们明天的投入在明天不会变得过期，由于 HTML 功用变得更丰富，可以满足现代企业一系列更普遍的移动要求。

4、夹杂开辟框架和条理结构图

夹杂开辟结构图

1）移动终端web壳（以下简称“壳”）：壳是利用操纵系统的 API 来建立嵌入式 HTML的衬着引擎。壳首要功用是界说Android利用法式与网页之间的接口，答应网页中的JavaScript挪用Android利用法式，供给基于web的利用法式的Android API，将Web嵌入到Android利用法式中。

2）前端交互js：包括根本功用js和营业功用js。

3）前端适配器：适配分歧的终端：Pad、android、ios、wap。

夹杂开辟条理结构图

1） 页面加载

页面庞器（XdjaWebView）类，是全部框架的焦点和根本，首要用来实现页面的加载，以及对页面加载完成后的后续操纵供给支持，例如：文件下载、js支持、文件上传，数据缓存、进度条等；

页面加载接口：对页面的加载进程停止跟踪；例如：页面加载进度百分比，页面起头加载、页面加载出错、页面加载完成等

2） JS挪用Android功用

网页：页面挪用js接口中的具体方式；

JS接口：挪用android接口中逐一对应的具体方式；

android接口：间接挪用框架中集成的功用，大概经过框架接口在利用系统中自界说功用（例如，退出、返回键响应等)；其中升级功用的返回成果大概进程信息，可以在客户端中经过升级接口获得。

XdjaClientHelper：假如需要将框架中的方式返回值告诉给js方式，你们可以经过XdjaClientHelper类来实现；

3）利用系统挪用JS功用

利用系统经过XdjaClientHelper来实现对js功用的挪用；

4） 利用系统挪用HDF功用

利用系统可以挪用框架集成的工具类、消息提醒框、升级模块以及手机上常见的打电话发短信等功用。

5、性能优化

1） 单个页面

登录、首页以及共用代码（款式文件、JS文件、页面加载loading代码）等放在index页面里。页面展现前显现fake页面（过场页面），首屏加载完后，fake页面消失。

页面虽然依照营业模块分为分歧的页面，可是展现的时辰会在同一个页面即index页面展现。具体的说，需要某个功用页面的时辰将页面以AJAX的形式请求到index页面，利用终了删除。

利用一个页面，公共的CSS和JS只会加载一次。

2）CSS、JavaScript

在本次夹杂开辟框架开辟中，CSS全数写在一个文件里。

CSS和Jquery Mobile的相关文件写在index页面头部，其他公用JS等写在index页面底部。避免JS阻塞页面加载。各营业逻辑JS写在各营业页面的底部。

开辟完成后，CSS和JS需要停止紧缩，削减用户利用时初度请求时候。

3） @font-face

本次夹杂开辟中利用@font-face来实现图标字体化，同一控制图标的色彩和巨细。

利用@font-face优点：削减页面因利用图片而带来的流量，大大收缩页面响应时候；图标可以随意改变巨细和色彩，而不会致使失真。

利用时留意：一切的图标需如果矢量的SVG格式。

利用限制：只适用于纯色扁平化的图标。布景图等比力复杂的图片照旧利用图片。

4） 当地存储LocalStorage

HTML5当地存储LocalStorage，在夹杂开辟中首要用来存储比来查询记录等。

拿首页比来查询来说，用户每次在综合查询中点击一个模块，经过LocalStorage将图标和对应的功用名字存储起来，假如用户不断根，LocalStorage中的数据是一向存在当地的。下次翻开利用的时辰从LocalStorage中读取比来查询记录等。

利用LocalStorage的益处是，不停止背景交互，速度快。

5）异步AJAX

本次开辟中多处实现都是经过利用AJAX。首先，显现页面时，先显现框架，然后异步加载内容；其次，分页功用中，先显现部分简项列表，上拉获得更多内容。再次，每翻开一个新功用，页面以AJAX的形式获得新页面的内容并展现出来。

异步AJAX，交互体验更好。从性能的角度斟酌，速度也更快。