目前移动端分为三大主流:纯原生、混合开发、web App,随着手机硬件的升级,公司们彷佛偏好于web页面开发,而混合开发相对纯web App彷佛更受大公司青睐,所谓混合开发俾人理解为,原生代码(iOS:OC,Android:java)+ web。OK搞清楚了公司需求的大方向,下面就要肯定到底用什么框架来开发web页面,开发web页面,目前最火的也就是ionic 和 react native 了吧,这二者要怎么抉择呢?
下面有他们的优劣的对比:css
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 : 优点: 一、虽然不能作到一处编码处处运行,可是基本上即便是两套代码,也是相同的jsx语法,使用js进行开发。用户体验,高于html,开发效率较高 二、flexbox 布局 听说比native的自适应布局更加简单高效 可实如今线更新 2015.7.28 AppStore审核政策调整:容许运行于JavascriptCore的动态加载代码 更贴近原生开发 劣势: 一、(引)对开发人员要求较高,不是懂点web技术就行的,当官方封装的控件、api没法知足需求时 就必然须要懂一些native的东西去扩展,扩展性仍然远远不如web,也远远不如直接写Native code。
二、(引)官方说得很隐晦:learn once, write anywhere。人家可没说run anywhere。事实上,从官方的api来看SliderIOS,SwitchIOS..等等这些控件,以后势必会出现SliderAndroid,SwitchAndroid...,也就是极可能针对不一样的平台会须要写多套代码。 三、发展还不成熟,目前不少ui组件只有ios的实现,android的须要本身实现。 (引)从Native到Web,要作不少概念转换,势必形成双方都要妥协。好比web要用一套CSS的阉割版,Native经过css-layout拿到最终样式再转换成native原生的表达方式(好比iOS的Constraint\origin\Center等属性),再好比动画。 另外,若Android和iOS都要作相同的封装,概念转换就更复杂 五、文档还不够完整 学习曲线偏高 4.文档少 学习起来困难 native : 优点: 最好的体验以及功能实现。 完善成熟的开发文档以及demo。 劣势: android开发学习曲线较高。 各个平台分开开发 很难有iOS,android双平台高手。 开发成本高 开发周期长
通过你多方考究:若是最终选择React Native 那么请君留步,专看其余技术文章。。。。html
若是是决定ionic开发,那么我们就一块儿愉快的来往下玩耍,java
废话很少说,开始搞起。。。。再说一句废话:我使用的是Mac
一、配置开发环境node
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
二、建立项目完成react
建立完成android
查看本身所建立项目文件:ios
项目目录git
补充:config.xml 是ionic项目的一些配置文件,后期自定义插件时须要跟他打交道,这里就很少说了。。。github
插件文件夹:web
插件
下面主要说下咱们主要用到的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 下班了。。。