Hybird App混合移动应用开发技术整体解决方案，速来围观！

摘要

由于H5的逐步普及，混合移动应用开发变的炙手可热，其主要的开发语言就是JavaScript，这在很多人看来无论是在性能和安全上来讲，并不被大家所看好，所今天就来谈一下如何对混合应用做优化以及加密，希望对大家有所帮助，本人一直沿用Cordova做混合应用开发平台，这也是目前使用最为广泛，而且比较稳定，社区最为活跃的一个平台，今天我们就基于这个平台做相关讲解！

Hybird APP混合应用原理分析

混合应用的主要原理就是在webview平台上运行JS和css代码，比如android的WebView, IOS的UIWebView， 并且cordova就是基于webview写的一个运行平台， 原理和手机浏览器一样，我们看下面这张图。

混合应用开发知识储备

我们都知道混合应用开发最大的好处就在于开发速度快，成本低，跨平台吗？ 但是有好处，肯定就存在劣势，也就是对开发人员的要求也会比较高，要求开发人员会的技能比较多，简单给大家列举一下：

1. 我们要回JS代码的编写。
2. 我们需要具备CSS的基本能力，可以自行切除页面，并且响应式设计
3. 熟悉cordova平台，知道相关配置，以及平台缺陷。
4. 有Android开发经验，往往我们需要自己编写插件，以及版本发布。
5. 有IOS开发经验，同上。
6. 有框架经验，光是JS框架就有很多，使用方法也不尽相同，所以还是需要一段时间学习的。

不仅仅上面这些，我这里简单列举了一张图，需要我们了解的技术，大家自己脑补吧：

代码仓库

对于代码管理，本人从最开始SVN 到现在的git, 个人感觉使用上都没有太大的差异，在使用svn过程，我们会在本地搭建一个SVN服务器，所以速度上会快很多。

个人还是更偏向与git仓库，现在比较流行的github, bitbucket, 这里说明一下，bitbucket目前可以创建私人仓库，5人一下是免费的，但是github需要支付费用，但不是很贵。

1. https://www.github.com
2. https://bitbucket.org/

目前来看github使用时很多的，上面也有很多开源的代码。

开发工具

开发工具有很多，我们一一列举一下：

• XCode: 主要用于ios版本的发布和插件调试工作，不是很常用。

• Android Studio: 主要用Android版本发布和插件调试工作，不是很常用。

• Sublime: 用于开发H5， 编写JS, CSS代码，需要自己装一些模块。

• Atom: 和Sublime比较类似，开源工具，效果很炫。

• WebStorm: 这个是一个H5开发集成工具，不需要装什么插件，但是收费的，个人一直在用，主要用于编写JS, CSS，工具很好用，提示，导航是最完美的。

• Chrome dev tools： 主要用于调试JS代码。（包括Android手机上运行代码）

• Safari develop tools: 主要用于调试ios真机上运行JS代码。

对于开发工具个人也用过Visual Studio 2015，这是一款很强大的工具，微软推出的，而且集成了Cordova，可以进行调试，但是用了一段时间，感觉不是很方便，所以就放弃了，喜欢的同志可以继续，这个还是看个人喜好。

开发环境建议

很多时候我们开发的应用通常要支持两个平台，即为Android和IOS, Android开发和部署我们在任何一个平台都可以，比如windows， Linux, Mac，都是很好的，Java跨平台吗？但是Andorid开发编译最快还要属Mac os和Linux。

对于IOS的开发可没有这么多的选择，你只能在mac os 上进行开发和部署工作了。据传言苹果公司会对针对其他系统做开发工具，但还只是传言。

所以我建议大家，如果有可能的话还是用mac os开发混合应用，这样在一台机器上就可以部署开发两个系统的应用（IOS和android），如果你需要WIndows,还可以装一个windows10的虚拟机，速度还是很快的。

支持的移动平台

目前开发支持的移动平台主要会有两个，即Android，IOS，Windows三大平台：

• Android: 这个平台用户使用时最多的，要说对H5支持最好的话，还是要Android4.4+以后的版本，因为Android4.4对WebView做了很大的改进，对H5支持更加友好。

• IOS: IOS从8.0以来对H5的支持一直都是最好的，几乎没有大的问题的，9.0以后更是完美，但是9.0以后IOS平台建议使用的https，所以需要针对平台做一些设置，但是如果你的cordova版本是6.0+，就不需要了，因为Cordova平台已经做好了默认的配置。

• **Windows:**windows系统是微软进一年来开发的支持手机和桌面的系统，个人感觉还是比较有发展的，至少是第一个完成平台系统统一的，但是个人至今还没有用过这个系统。但是windows10我开发过混合应用在上面，亲测对H5的支持还是很好的，基本上没什么大的问题，并且微软一直在推的一个移动框架WinJS，目前使用也是较为广泛的。

两年以前我也尝试适配windows phone 7， 8, 但是坑还是很多的，主要是因为当初微软对H5的支持不够友好，导致很多UI需要重写，耽误了很多工作量。

开发架构建议

其实开发架构这块，每个人都有自己的看法，架构方式也有很多，我用过的架构不下三四种，这里给大家简单介绍一种架构，简单也比较合理, 如下：

• client (此文件夹是我们的源代码)
  – assets （css以及图片文件）
  – js (js文件，主要逻辑区)
  – index.html （项目入口）
• hooks （build之前的cordova的运行文件，这里通常会有针对不同平台的配置）
• plugins （存放所有的插件包括自定义的插件）
• platforms （平台文件，会自动创建的）
• resources （不同的平台的splash 和应用图标文件）
• www （编译后的压缩运行文件）
• config.xml （cordova 的配置文件）

通过上面的架构，我们可以吧源代码编译到www文件夹后。执行

cordova build

或者

cordova prepare

这个还是较为简单的，便于大家理解。

JS框架的使用

现在市面上H5框架多的不胜枚举，数不胜数，但是应用广泛的唯独那几个，这里简单列举一下，纯属个人观点：

1. AngularJS: 这个框架是有google维护的，也是目前最为广泛的H5开源框架，双向绑定，开发速度，运行较快，自定义diretive等等，虽然存在些缺陷，但是总体来讲还是很不错的， 目前最新版本2.0， 这是一个全新的框架，需要重新学习.
2. Backbone: 这个框架应用时间不是很长，结合了undersore.js，使用起来还是比较方便，但是社区活跃度没有angular好。
3. Knockout.js： 这个框架是我最早使用的框架，结合了require.js搭配使用，总体来讲要实现个双向数据绑定还是比较麻烦的，配置起来也比较麻烦，运行速度相对较慢，后来就放弃了。
4. SAPUI5: 这个是SAP推出的一个H5框架，而且是一个重量级别的框架，拥有众多的UI组件，自定义起来很麻烦，几乎不可能，拓展性也不是很多，运行速度也不是很理想，但是是作为SAP的标准app还是可以考虑的。
5. React: 这个框架推出时间不长，但是热度不亚于Angular, 而且是基于组件化的开发。运行速度很好，是未来不可小视的一个潜力股。
6. ionic: 这个框架集成了angular， cordova， 非常推荐，理想的UI效果，运行速度非常快，易于部署，活跃的社区，都是我们最佳的选择，最主要还有他是开源框架。
7. PouchDB: 这个一个基于websql 的数据库框架，存储写入语法糖很好，是一个不错的前端数据库框架。

其实不仅仅是上面几种框架，还有VUE, Avalon等等优秀的框架，也是值得尝试的， 总体来讲东西不在多，而在精，我们只需要选中适合我们的一种框架深入研究，总会有一个不错的反响。

JavaScript标准使用

Javascript的标准化决定了浏览器支持的程度有多好，以前一直在ES5，但自动推出了ES6(ES2015)，深深的被这一个标准所吸引，定义class, import导入等等众多的语法糖，让我尝试了一下，但是现实却很骨感，浏览器支持的不是很好，所以运行环境不得不用babel转换成ES5的版本，保证项目正常运行。

所以，我还是建议大家使用这个最新的版本，现在来看，浏览器正在不断对这一标准进行支持，相信不久的将来会是一个定律。

但是现在一定要进行转换，大家可以放心使用，没有任何问题的，亲测！

CSS框架使用

css框架非常多，比如常用的有bootstrap, mui, 这两款框架都是响应式框架，这里不做过多解释。

我们重点关注两款CSS预处理器框架：

1. Sass：这是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。

2. Less：这也是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

这两款框架可让我们定义变量和重用方法，增加了css的可维护性，非常推荐。

架构工具使用

构建工具的选择很重要，这决定了我们今后开发的效率问题，目前市面上流行的几款构建工具：

1. grunt: 自动化的工具，对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，帮助我们做了很多重复的工作，缺点是临时文件过大。

2. gulp: 和grunt是一样的概念，但是gulp的临时文件会小写，而且任务插件功能比较单一，并不想grunt一样，一个插件做很多工作。

3. webpack: webpack的出现已经有很多时间了，但是一直不温不火，自动从facebook推出react，官方demo给的架构工具就是webpack， 一时之间引起了很多关注，webpack引入了loader的概念，原理上和gulp的task很类似。

个人建议（仅仅是建议，看个人喜好！）

如果你用react可以搭配webpack使用。

如果你用其他框架可以搭配gulp使用。

优化方案

优化决定了我们的项目运行速度到底能提升多少，尤其是在移动设备上，这里主要列举了几点:

1. 数据显示上，如果数据条数超过200条，建议分页处理，或者用infinate动态加载。
2. 图片下载，尽量采用原生方案，启用多线程。
3. 使用spirte图片资源。
4. css压缩成一个文件，在index.html进行导入(减少加载时间)
5. JS压缩成一个文件，在index.html进行导入 (减少加载时间)
6. 不需要缓存数据的地方，不要是用内存，因为混合应用的webview已经占用了很多内存（相比于native app）

加密方案

所谓加密，通常的解决方案就是混淆，JS混淆，我们可以借助于gulp来做，应用到的gulp插件就是：

var uglify       = require('gulp-uglify');

混淆后的代码会大大增加安全系数，在此，如果我们做支付类的应用，切记不要存储任何私密信息在js中或者本地存储，这样会增加风险系数，建议服务端处理。

自定义插件以及调试

这里我要说明一下，因为cordova的开源性，而且移动平台版本迭代速度之快，很多插件没有来得及更新，所以会存在很多问题。

尽管cordova插件很多，但是不一定会满足我们的需求，所以有时候，我们需要自行编写插件，这也就是说为什么大家要掌握一定的android开发和ios开发知识。

编写插件的流程，相对很容易，大家可以查阅一下文档， 我列了大概的流程如下，大家可以简要参考一下：

混合应用调试

对于调试我们都会在浏览器中调试js代码，但很少有人知道如何在浏览器中实时调试手机上的混合应用js代码以及样式，下面给大家介绍一下：

对于android来讲，我们正常的debug证书，是可以借助于chrome dev tools来调试，具体步骤：

android:

usb连接手机 —-> 运行需要调试的程序—> 打开浏览器输入 chrome://inspect, 就可以看到当前连接设备了，切记一定要debug证书。

ios:

usb连接ios设备 —> 运行需要调试的程序 —> 打开safari浏览器 —> 点击develop 属性，就能看到我们的设备了。

这里有一个小点，大家要注意，safari和手机都要打开开发者模式才可以的。浏览器的在preference中设置，手机在safari应用的高级中设置。

混合应用发布

对于发布我们就借助于Android studio 和xcode 正常生成证书发布就可以了。

总结

以上就是整体的方案，不够具体，但是可以让大家简单了解一下整体的技术方向，之后我会在我的博客中持续更新的！