移动端混合开发----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、创建项目完成

创建完成

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


项目目录

补充: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 下班了。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容