2017-2018年跨平台开发HybridAPP混合跨平台开发的一些经验和总结。HybridApp既具有NativeApp用户体验好的优点，又具有使用HTML5的WebApp跨平台开发成本低的优势。目前已经有很多HybridApp应用开发成功，比如美团、爱奇艺、微信等知名移动应用，都采用了HybridApp开发模式。1.移动应用开发的三种方式对比移动应用开发的方式，目前主要分为三种：NativeApp：本地应用（nativeApp）WebApp：网页应用（mobileweb）HybridApp：混合应用（hybridApp）图1：三种移动应用开发方式如图1所示，三种移动应用开发方式对比如表2所示：表2：三种移动应用开发方式对比二、混合开发应用场景（一）foldInconsideration-如果企业采用Hybrid开发方式，可以结合Native和web的长处。一方面，Native允许开发人员利用现代移动设备必须提供的所有不同特性和功能。另一方面，所有用网络语言编写的代码都可以在不同的移动平台之间共享，使开发和日常维护过程集中化、更短、成本更低。(2)内部技能——许多企业都有网络开发技能。如果选择Hybrid开发方式，在合适的解决方案的支持下，Web开发者可以仅使用HTML、CSS、JavaScript等Web技能构建App，同时提供Native用户体验。(3)展望未来——HTML5的可用性和功能正在迅速提高。许多分析师预测，它可能会成为开发前端应用程序的默认技术。通过用HTML编写App的大部分代码并仅在需要时使用Native代码，公司可以确保他们今天的投资不会在明天因为HTML变得更加丰富以满足现代企业的需求而变得过时。更广泛的移动需求。3、混合开发框架及层次结构图混合开发结构图1）移动端webshell（以下简称“shell”）：shell是一个渲染引擎，利用操作系统的API创建嵌入式HTML。shell的主要功能是定义Android应用程序和网页之间的接口，允许网页中的JavaScript调用Android应用程序，提供基于Web的应用程序的AndroidAPI，将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功能应用系统可以调用框架集成的工具、消息提示框、升级模块、手机常用的调用和发送短信功能。4.性能优化1)单页登录、首页和常用代码（样式文件、JS文件、页面加载代码）等放在索引页。假页面（过渡页）在页面显示前显示，假页面在首屏加载后消失。虽然页面按照业务模块划分为不同的页面，但是在展示的时候会在同一个页面上展示，即索引页。具体的，当需要某个功能页面时，将页面以AJAX的形式请求到索引页面，使用完毕后删除。对于一个页面，普通的CSS和JS只加载一次。2）CSS、JavaScript在这种混合开发框架开发中，CSS全部写在一个文件中。CSS和JqueryMobile相关文件写在索引页的头部，其他公共JS文件写在索引页的底部。防止JS阻塞页面加载。每个业务逻辑JS都写在每个业务页面的底部。开发完成后，需要对CSS和JS进行压缩，以减少用户使用时的初始请求时间。3）@font-face在本次混合开发中，@font-face用于实现图标字体化，统一控制图标的颜色和大小。使用@font-face的好处：减少页面使用图片带来的流量，大大缩短页面响应时间；可以随意更改图标的大小和颜色，而不会造成失真。使用时注意：所有图标需为矢量SVG格式。使用限制：仅适用于纯色平面图标。背景图片等比较复杂的图片还是用图片。4）本地存储LocalStorageHTML5本地存储LocalStorage在混合开发中主要用于存储最近的查询记录。以最近在首页查询为例。用户在综合查询中每点击一个模块，都会将图标和对应的功能名称存储在LocalStorage中。如果用户不清除，LocalStorage中的数据将一直存在于本地。下次打开应用时，从LocalStorage中读取最新的查询记录。使用LocalStorage的好处是没有后台交互，速度快。5)异步AJAX本次开发中的很多实现都使用了AJAX。一、显示页面时，先显示框架，再异步加载内容；其次，在分页功能中，先展示部分简明项目列表，上拉获取更多内容。同样，每次打开一个新的功能，页面以AJAX的形式获取新页面的内容并展示。异步AJAX，更好的交互体验。从性能的角度来看，它也更快。
