html 第8章 Hybrid APP
一、如何区别一个 App 是 Native App，Web App 还是 Hybrid app
1.1、什么叫做原生App
原生 App 是专门针对某一类移动设备而生的，它们都是被直接安装到设备里，而用户一般也是通过网络商店或者卖场来获取例如 The App Store 与 Android Apps on Google Play 。
随便说几个原生App的例子，比如iOS 的 Camera+ 以及Android 的 KeePassDroid
1.2、什么叫做移动Web App?
一般说来，移动Web App都是都是需要用到网络的，它们利用设备上的浏览器(比如iPhone的Safari)来运行，而且它们不需要在设备上下载后安装。
1.3、什么是混合app?
Hybrid App是指介于web-app、native-app这两者之间的app，它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App。
比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。
再彻底一点的，如掌上百度和淘宝客户端Android版，走的也是Hybrid App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。
1.4、总结
综合一下就是：“Hybrid App同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用”。
总体特性更接近 Native App 但是和 Web App 区别较大。只是因为同时使用了网页语言编码，所以开发成本和难度比 Native App 要小很多。
因此说，Hybrid App 兼具了 Native App 的所有优势，也兼具了 Web App 使用 HTML5 跨平台开发低成本的优势。
二、Hybrid app 开发工具
2.1、ionic
ionic 是一个专注于开发与构建 Hybird 模式跨平台的 HMTL5 框架。专注体验极度优化，贴近原生。
ionic可以想象为处理让APP拥有令人瞩目的UI交互体验以及漂亮的外观的一个前端框架。有点类似于Bootstrap for native，不过ionic支持更广泛和更贴近原生native mobile的组件。
和响应式框架不同的是，ionic与生俱来拥有已经存在的网页开发中所不存在的非常贴近于native mobile的样式和UI 组件、布局。
并且还提供了一些可选的并且强大的方法去构建基于已经存在的Html5开发框架。
既然ionic是一个专注于体验和运行效率的HTML5开发框架，它需要一些类似于Cordova或者PhoneGap的一些包装器去作为一个原生APP运行。强烈推荐使用Cordova，ionic的一些工具都是基于Cordova的。
2.2、React Native
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。
React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。
Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
2.3、Hbuilder
使用 html5plus 来弥补原生 Webview 性能不足的问题；并且很好解决了如何和 Native 通信的问题，在 Js 中可以实例化 Native 的组件等等。
Demo 运行起来也比较流畅。有自己好用的 Hbuilder 编辑器。
自己虽然有一个UI框架，文档、教程不是很完善。
2.4、WeX5
号称真正的全平台，微信、安卓、IOS 网站，真正的一次开发到处运行啊。
2.5、ApiCloud
号称重新定义移动开发有自己的BAAS服务，直接后台编辑数据库表，直接生产了对应 REST API，爽前所未有。有自己的 Store，里面有一些第三方组件，可以使用。
产品上为了和 Baas 结合有端 API，服务端 Api，得折腾下才能跑起来，要学的东西稍多。对于没有 Server 开发经验的人来说可以只看端 Api。
2.6、AppCan
应该是自己研发的移动App跨平台开发引擎，应该对自己比较有信心，目前已经开源，赞！对于喜欢折腾的人来说是一个福音。
有商业案例，我下载了一个吉祥航空如E行的案例运行了下，基本能满足需求。没仔细往下研究了。
从吉祥航空如E行 (2.0.3)这个APP来看，体验上还有待加强，值得开发者试一下。
2.7、Appcelerator
Appcelerator 的 Titanium 开发平台使开发者可以通过 HTML、PHP、JavaScript、Ruby、Python 等 Web 编程语言开发手机、平板和桌面的原生 App。
其优势在于它可以让用户轻松地访问超过 300 个 API 以及定位信息。 此外，Appcelerator 提供针对特定行为或事件定制的统计。App 的数据既可储存在云端，也可储存在设备上。
2.8、Kerkee
Kerkee 是一个多主体共存型 Hybrid 框架，具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、集成云服务、具有 Debug 环境、彻底解决跨域问题。
从开发者角度来说，它支持三种的团队开发模式：
针对Web开发者：这种模式其中的一个场景是，只会Web开发，却不会Native开发的开发者提供了一系列的平台型接口。这种方式具有开发周期短，跨平台等优点。
针对Native开发者：这种开发模式的其中一个场景是，Native 开发者想要截获 Web 页面的数据或者对数据进行自己的处理，或者 Web 页面中的行为进行修改。在这个时候，Kerkee 框架将会为他们带来便利。
针对Web开发者和Native团队共同合作的开发团队 ： 对于这种模式的团队，kerkee 框架具体更开放更透明的协作，并且严格地隔离各自职责。各得 Web 团队和 Native 团队把主要精力定位到各自的模块上，有利于各自的模块优化到极致。
2.9、PhoneGap
PhoneGap 是一个免费且开源的开发环境，使开发者可以开发出在 Android、Palm、黑莓、iPhone、iTouch 及 iPad等设备上运行的 App。
其使用的是 HTML 和 JavaScript 等标准的 Web 开发语言。开发者使用 PhoneGap 进行开发，可调用加速计、GPS/定位、照相机、声音等功能。
PhoneGap 还提供 Adobe AIR App 以及在线的培训课程，帮助开发者了解原生 API 并在他们自己的平台上开发移动 App。
2.10、NativeScript
NativeScript 是使用移动平台的 JavaScript 引擎来进行跨平台开发。逻辑部分自然无需多说，关键在于如何使用平台特性。NativeScript 是通过反射得到所有平台 API，预编译它们，然后将这些 API 注入到 JavaScript 运行环境，接下来在 Javascript 调用后拦截这个调用，并运行 native 代码。NativeScript 是使用大量 web 开发的技巧来进行 app 开发，因为工具链和语言都非常熟悉受到了很多前端开发者的欢迎。
2.11、Kinvey
Kinvey 同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey 强调加速移动应用开发与销售的“即取即用”理念。Kinvey 的中间层与数据层均托管在多个云服务提供商处，包括 Rackspace、Amazon与Microsoft。所有通过Kinvey存储的数据都会有四种方式备份：Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的服务器，假如其中一两个出现了故障，用户的数据依然安然无恙。
2.12、ExMobi
ExMobi 通过全面的数据集成技术和丰富的跨平台客户端展现能力，将业务系统快速、安全、高效的移植于移动终端。ExMobi 从开发（IDE环境）、集成（IT系统对接、云服务）、打包（各个操作系统的应用打包）、发布（应用的运行）、管理（日志管理，更新管理）上提供了一套完整的解决方案。并通过专业的培训和支撑渠道为开发者提供可持续的学习和交流空间，扫除开发障碍。
2.13、Weex
阿里开源的 Weex 能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。教程
三、MUI
3.1、关闭页面
①、mui 框架将窗口关闭功能封装在 mui.back 方法中，具体执行逻辑是：若当前 webview 为预加载页面，则 hide 当前 webview；否则，close 当前 webview
在 mui 框架中，有三种操作会触发页面关闭（执行 mui.back 方法）：
点击包含 .mui-action-back 类的控件
在页面上，向右快速滑动（swipeBack:true //启用右滑关闭功能）
Android手机按下back按键：keyEventBind: {backbutton: false //关闭back按键监听}
②、mui.back() 仅处理窗口逻辑，若希望在窗口关闭之前再处理一些其它业务逻辑，则可将业务逻辑抽象成一个具体函数，然后注册为 mui.init 方法的 beforeback 参数; beforeback 的执行逻辑为：执行 beforeback 参数对应的函数若返回 false，则不再执行 mui.back() 方法；否则（返回 true 或无返回值），继续执行 mui.back() 方法；
③、注意：自定义关闭逻辑时，一定要重写 mui.back，不能简单通过 addEventListener 增加 back 按键监听， 因为 addEventListener 只会增加新的执行逻辑，老的监听逻辑依然会执行；
3.2、关闭页面间传值
①自定义事件传值
②evaljs传值webview.evalJS("showBackBtn();");
③打开新页面的时候带上extras:{}参数
3.3、投影
可以使用Total Control、360手机助手等将手机屏幕投影到电脑，不过投影效果很一般
3.4、资料
3.5、加密
首先css压缩，然后对js压缩混淆加密（vue.js、webpack、Koala、站长工具），最后对apk进行加固（360加固、爱加密）
3.6、app状态栏
3.7、双指放大缩小问题
3.8、申请苹果appid、苹果开发者
3.9、分享
3.10、头像剪切
3.11、app 在线升级
四、h5+ App离线本地存储方案
HTML5+的离线本地存储有如下多种方案：
HTML5标准方案：cookie、localstorage、sessionstorage、websql、indexedDB
HTML5Plus扩展方案：plus.navigator.setCookie、plus.storage、plus.io
4.1、cookie
体量最小，可以设置过期时间。不能跨域。
4.2、localstorage
适合key、value键值对的存储，数据量一般不超过5M。是常用的轻量数据存储方案。不能跨域。
4.3、sessionstorage
也是键值对，特点是关闭App就消失了，也不能跨webview，一般不用于持久化数据保存。
4.4、websql
是手机端关系型数据库的最佳方案，各种手机都支持。只是该标准不再更新。但是目前手机端重量数据存储的唯一可商用方案。
4.5、indexedDB
是HTML5里最新的数据存储规范，但不是基于SQL，而是基于对象。
indexedDB性能更高，全是异步处理，学习难度偏大。最重要的是目前手机端支持度不行。Android4.4以上和iOS8以上才支持indexedDB。
4.6、plus.navigator.setCookie
与HTML5的标准cookie相比，plus的扩展主要是为了跨域。所谓跨越，就是本地HTML页面和服务器HTML页面共享cookie数据，或者说本地页面的js可以操作服务器页面产生的cookie。如果没有跨越需求，不需要使用plus扩展。
4.7、plus.storage
plus.storage也是键值对数据存储。它是把OS给原生App使用的键值对存储数据库封装一层给JS使用。
plus.storage没有理论上的大小限制。
plus.storage相比于localstorage 还有一个特点是可跨域。当一个存储数据，需要被本地和来自服务器的页面同时读写时，就涉及跨域问题。此时HTML5的localstorage不能满足需求，只能使用plus.storage。
plus.storage操作要比localstorage慢几十毫秒，如果不是因为大小限制或跨越，尽量使用localstorage。
有网友封装了一个框架，针对key-value数据，在localstorage超过5m时自动切换到plus.storage，参考。虽然这么做听起来有点复杂，但我们对这种追求性能极致的开发者非常赞赏。
4.8、plus.io
plus.io是文件读写，虽然也可以通过读写txt等文件存储数据，但并不如专业的storage和websql方便。
plus.io更多的是用于图片等多媒体文件的本地保存。
比如图文列表的离线使用，一般有2种做法：
图片下载不通过img的src，而是plus.dowload下载的，先下载图片，存好路径后，然后img的src动态指定文件路径
图片使用img的src下载，然后用canvas把img存成图片文件。下次不联网，img的scr直接指向本地文件
有人问原生的sqllite是否可用，5+里没有封装，推荐使用HTML5标准的数据库。
还有人问为啥不封装sqllite？因为HTML5已经有了，HTML5+规范无法重复立项。
HTML5+从属于w3c指导下的联盟，DCloud也是w3c会员，重复发明轮子没有好处，只会增加工作量和增大包体积。
有人问三方清理工具清理垃圾会不会造成某些数据丢失，这个可能性是存在的，但概率并不高，取决于清理软件会不会分析你的存储数据里哪些是可以清除的垃圾数据。除了OS的清理工具外，一般没有root权限的清理工具是拿不到除了plus.io外的你的app的存储数据的。
