移动端混合开发----ionic

目前移动端分为三大主流：纯原生、混合开发、web App，随着手机硬件的升级，公司们似乎偏好于web页面开发，而混合开发相对纯web App似乎更受大公司青睐，所谓混合开发俾人理解为，原生代码（iOS：OC，Android：java）+ web。OK搞清楚了公司需求的大方向，下面就要确定到底用什么框架来开发web页面，开发web页面，目前最火的也就是ionic 和 react native 了吧，这两者要怎么抉择呢？
下面有他们的优劣的对比：

IONIC是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。 提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。Ionic框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

native就是使用使用原生java objective-c 开发， 各玩各的,无法跨平台。

优劣对比      
    ionic ：      
    优势：        
        ios 和 android 基本上可以共用代码，纯web思维，开发速度快，简单方便，一次编码，到处运行，如果熟悉web开发，则开发难度较低。        
        文档很全，系统级支持封装较好，所有UI组件都是有html模拟，可以统一使用。          
        可实现在线更新 允许加载动态加载web js          
        文档多，开发者多，视频教程多 容易学习    遇到问题容易解决  技术成熟        
    劣势：        
        占用内存高一些（不过手机内存都大了不影响），不适合做游戏类型app，   web技术无法解决一切问题，对于比较耗性能的地方无法利用native的思维实现优势互补，如高体验的交互，动画等。      
    react-native ：      
    优势：    
        1、虽然不能做到一处编码到处运行，但是基本上即使是两套代码，也是相同的jsx语法，使用js进行开发。用户体验，高于html，开发效率较高 2、flexbox 布局 据说比native的自适应布局更加简单高效        
        可实现在线更新 2015.7.28 AppStore审核政策调整：允许运行于JavascriptCore的动态加载代码        
        更贴近原生开发    
    劣势：    
        1、（引）对开发人员要求较高，不是懂点web技术就行的，当官方封装的控件、api无法满足需求时 就必然需要懂一些native的东西去扩展，扩展性仍然远远不如web，也远远不如直接写Native code。    
        2、（引）官方说得很隐晦：learn once, write anywhere。人家可没说run anywhere。事实上，从官方的api来看SliderIOS，SwitchIOS..等等这些控件，之后势必会出现SliderAndroid，SwitchAndroid...，也就是很可能针对不同的平台会需要写多套代码。    
        3、发展还不成熟，目前很多ui组件只有ios的实现，android的需要自己实现。         （引）从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。 另外，若Android和iOS都要做相同的封装，概念转换就更复杂 5、文档还不够完整 学习曲线偏高    4.文档少  学习起来困难      
    native ：      
    优势：        
        最好的体验以及功能实现。        
        完善成熟的开发文档以及demo。      
    劣势：        
        android开发学习曲线较高。        
        各个平台分开开发 很难有iOS,android双平台高手。        
        开发成本高  开发周期长

经过你多方考究：如果最终选择React Native 那么请君留步，专看其他技术文章。。。。

如果是决定ionic开发，那么咱们就一起愉快的来往下玩耍，

废话不多说，开始搞起。。。。再说一句废话：我使用的是Mac
1、配置开发环境

1> Ionic开发是依赖于Nodejs环境的，所以下载安装：http://nodejs.org/
2> 安装成功后打开终端(PowerShell)，输入命令node -v和npm -v有对应的版本号就代表成功了
3> npm install -g cordova ionic   过程可能有点慢。。。
4> ionic start MyIonic blank  通过终端创建一个空ionic项目，MyIonic为项目名称    
    ionic start MyIonic tabs 创建一个带tabs的项目
如果项目里面部分模块需要用到ionic，最好先创建blank项目
5> 因为创建的时候默认添加了iOS平台，如果要对Android平台支持，输入一下命令：  
ionic platform add android  添加Android平台
ionic platform add ios          添加iOS平台
ionic platform list                 查看是否添加成功
Installed platforms:  
    android 6.0.0  
    ios 4.1.1
Available platforms:    
    amazon-fireos ~3.6.3 (deprecated)  
    blackberry10 ~3.8.0  
    browser ~4.1.0  
    firefoxos ~3.6.3  
    osx ~4.0.1  
    webos ~3.7.0
注：输入命令过程中如果碰到：
Error: EACCES: permission denied, open '/Users/XXXX/.config/configstore/bower-github.json'You don't have access to this file.
解决：命令行前加 sudo

2、创建项目完成

创建完成

查看自己所创建项目文件：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJDQzA1MTVGNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJDQzA1MTYwNkE2MjExRTRBRjEzODVCM0Q0NEVFMjFBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkNDMDUxNUQ2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkNDMDUxNUU2QTYyMTFFNEFGMTM4NUIzRDQ0RUUyMUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6p+a6fAAAAD0lEQVR42mJ89/Y1QIABAAWXAsgVS/hWAAAAAElFTkSuQmCC" alt="" data-ratio="0.6209677419354839" data-src="http://mmbiz.qpic.cn/mmbiz_png/g4uoJOMA38KtG1MJwbicYgOpSiaospGhQn4KodFEavviaMHPia14qatLfkKdX9nuHC8I8ueHIEvoZydXxvKnuOZDew/0?wx_fmt=png" data-type="png" data-w="1240" />

项目目录

补充：config.xml 是ionic项目的一些配置文件，后期自定义插件时需要跟他打交道，这里就不多说了。。。

插件文件夹：

插件

下面主要说下我们主要用到的www文件夹：

www文件

文件说明：
css:存放html中控件的style样式：例如：width、 height、color、font-size
img: 顾名思义存放ionic项目中用到的图片
index.html ionic项目的主通道
js: 存放js代码块
lib: 存放ionic本身的库文件，当然你也可以添加一些其他库，比如一些cordova库
templates: 自己手动创建的文件夹，存放一些html文件
其他两个.json .js文件是一些配置文件，不用管，也不要动

下面说下怎样将做 混合开发 以iOS为例，在原有原生的基础上，怎样将你的ionic代码放到你的项目中，将圈住的文件放到iOS项目中：

iOS项目中必备文件

我项目中的效果：

实际项目中效果

既然是混合，肯定避免不了web 与 原生的交互，相互之间的传值可以通过自定义插件，也可以通过桥接，个人对比下，写桥接比较好方便，自己摸打滚爬了两个月，感觉这里面的坑还是很多的。。。

今天先到这里吧，有时间了会把我碰到坑的解决方法，给大家共享出来，避免你们再走同样的弯路，ionic网上的资料不太多，特别是针对混合开发的，有问题大家可以留言讨论，OK 下班了。。。