Ionic实现混合开发--探索之旅

混合开发是什么？

个人理解混合开发指的是编写一个项目将涉及原生APP的API封装成JS模块，以插件的形式可以引入或删除，从而可以实现利用HTML调用原生API，本质上是HTML调用封装API的JS模块，而这个负责编写JS模块的项目被称作框架，即现在市场上存在的PhoneGap，DCloud，以及React Native。其目的是为了减少项目成本，即使用一套代码就可以完成WEB，Android和IOS的开发。

与原生APP效果比较

原生APP
(1)使用过程中运行速度快，流畅度高，页面间的响应快。
(2)组件调用速度快，适配性高，更符合手机的尺寸。
(3)手机自带的渲染效果清晰，比如下拉的渲染，原生自带的动画舒适感更高。

混合开发APP
(1) 复杂组件的加载在部分手机，尤其是低配版手机，加载缓慢。
(2) 没有手机自带的渲染效果。
(3)件适配性比原生低。
(4) 可用JS编写更加丰富的动画效果。
(5)UI设计可以更加复杂多样化，相比而言，html的语言风格比原生APP要更简易方便。
(6)采用组件化开发，多用性和复用性略有优势，一套代码适用多平台。

为什么使用Cordova？

PhoneGap，DCloud和React Native

PhoneGap在2011年10月被Adobe公司收购，随后Adobe宣布这个移动Web开发框架将会继续开源，并把它提交到Apache Incubator，以便完全接受ASF的管治。Cordova的全称是Apache Cordova，等同于Apache PhoneGap。至于ordova的名字 来源，在Nitobi的CFO Brian LeRoux的采访中说：“这个名字背后的故事是，温哥华的科尔多瓦街(Cordova Steet)是创建 PhoneGap时Nitobi的所在地。而我也刚好住在那条街”。有了Adobe的支撑，相信Cordova的发展也会越来越好，同时，又有 谷歌公司旗下Angular的加盟，创建了基于Cordova的前端UI Ionic`框架。Cordova和Ionic的官网详细并且比较完整，社区 积极。总结来说，使用Cordova开发，要实际掌握Cordova+Ionic+Angular，要理解三者的关系。

DCloud是国产的框架，采用的是H5+技术。和Cordova有所不同的是，DCloud指定了前端框架，等同于，使用DCloud封装了原生APP的API,采用指定的框架即 MIU，可以在js里直接调用API，而Cordova则是采用插件的形式需要引入才可以使用。即DCloud依赖比较多，要根据框架内的规则编写代码，好处显而易见的 更容易上手，而且纯Html的写法，减少了前端的学习成本。Cordova就是单纯的封装API，没有限制UI框架，你需要调用的时候要先引入，虽然学习内容要多 些，代码风格却是比较清晰。

React Native暂不介绍，因为没有过多了解。

怎么用Cordova开发?

确定好模式Ionic+Cordova，选用Ionic为前端框架，是因为Ionic集成了MVVM + NODE于一体的 脚手架，并且Ionic引入了Cordova模板，可以用命令轻松生成、运行、编译APP。
Ionic网址: https://ionicframework.com/

Hello World

1. Install node、npm

官网： https://nodejs.org/en/

2. 安装全局变量ionic cordova

sudo npm install -g ionic cordova

3. Init project

ionic start helloWorld [blank,sidemenu,tabs]
blank: 空白页
sidemenu: 带侧边栏的模板
tabs: 带选项卡的模板

4. Run and Test

PC端
cd helloWorld
ionic serve

Android
ionic cordova platform add android
ionic cordova run android

Ios
ionic cordova platform add ios
ionic cordova run ios

5. And