从Ionic粗窥混合模式的手机APP开发_【海啸TechTalk】

当初电脑程序从CS模式转BS模式，为的就是降低开发成本，减轻部署和升级的压力，这个道理在移动App的开发上也说得通。如果你要做一个APP的话，其实使用Hybrid（混合）模式来做APP是一个不错的选择。...

周末坐在一起聊天，张谦说，哎呀，感觉现在移动开发已经不火了。其实不是不火了，而是成为了标配，大家都认为是顺理成章的事情，无所谓火不火了。

现在开发移动应用，基本上Android和IOS是标配，如果再过分一点的，还会考虑Windows Phone啥的，于是需要在2-3个不同的移动OS上做设计、开发、测试，成本还是挺大的。

当初电脑程序从CS模式转BS模式，为的就是降低开发成本，减轻部署和升级的压力，这个道理在移动App的开发上也说得通。前面我讲过通过微信服务号提供服务而不是独立开发一个APP，但是如果你非要做一个APP的话，其实使用Hybrid（混合）模式来做APP是一个不错的选择。

这个混合模式，简单一句话说，就是做了一个APP，基本上就是一个浏览器，里面具体的功能呈现，都是网页，那些网页布局和行为很像源生的应用，用户基本也分辨不出来。这么做最大的好处就是节省了开发成本，一套网页，Andorid和IOS都能用，开发测试工作量会少很多。当然还有其他好处，比如可以绕过APP而做网页的内部升级等。

那混合模式和直接通过手机浏览器浏览网页有啥不同？最大的不同是使用体验上。混合模式做出来的APP和原生APP在用户体验要应该非常接近（双兔傍地走，安能辨我是雄雌）。原因是：

混合模式的UI是模仿原生应用定制化的。同样一套HTML代码，通过CSS和JS的适配，在IOS和Android上的呈现就不一样，符合各自平台的用户习惯。
2.HTML页面是预加载在客户端的，所以响应速度很快。和服务器端交互的纯粹是数据（这个和源生APP是一样的）。

Ionic就是这么一个东西，我玩了一下，感觉已经是比较完整的stack了。整个stack是这样的。

首先Ionic定义了一些基本的HTML、CSS和JS的组件，可以用网页模拟APP的样子，当然他针对Android，IOS等不同的操作系统定义了不同的CSS和JS，保证在不同平台上和原生应用比较像。
然后，具体的业务逻辑，使用了AngularJS来做的，比如数据的绑定和动态呈现。这个和JQuery的功能类似，不过貌似JQuery在移动APP上面效率不好。
最后，这些做好的HTML,CSS,JS，使用Apache Cordova来打包成一个APP。以Android平台为例，就会打包成一个apk，然后里面用Android的代码写了一个Webview，另外把所有HTML，CSS，JS作为资源也包在apk里面。跑起来的时候，这个Webview跑起来，然后直接本地加载HTML、CSS、JS就好了。

在项目构建初期，Ionic能够帮你生成一个项目的template，要用的很多元素都已经在里面了，基本上开干的时候就是修改具体页面了。我写了几个例子，在加载和使用的流畅度上，已经和原生应用类似了，随着手机处理速度越来越快，这方面的问题已经慢慢的解决了。对于一些内容呈现类的应用，其实Ionic是一个不错的选择。如果少量的和手机底层API相关的功能，也是可以通过开发Cordova Plugin来补充的。

从开发者的角度看，采用混合模式，初始学习成本是比较高的。因为一个Android或者IOS程序员，通常都是使用Java或者Object C，而突然要跳到HTML，CSS，JS，尤其是要重新学习AngularJS的各种语法，还是要看不少东西的。而如果是一个纯前端程序员，碰到一些特殊的APP需求要，开发一个native code的插件来调用底层的API，就会碰到无法逾越的障碍。

因此，对于个人开发者，要做到能用这个开发一个完整的应用，就是即学九阳神功，又练九阴正经。练成了是不得了，可是极容易走火入魔。但是对于一个开发团队，找到熟悉网页开发的人，通用模块使用Ionic开发，而对于一些特殊功能，可以找少量的Android和IOS开发者来制作插件完成，是一个不错的选择。

PS：我马上就要修炼成功九阳神功和九阴真经了。

海啸 Tech Talk

微信号：hx-techtalk