写给iOS程序员的ionic入门教程

自从 iOS 开发和 Android 开发诞生以来,使用一套代码部署到两个平台,就成为很多开发者奋斗的目标。然而前几年由于各种因素,这种想法并为成为现实,起码没有一个普遍被开发者接受的解决方案。随着这几年移动平台硬件性能的快速提升,加之HTML5、CSS3、ES6的出现和流行,出现了一些比较优秀的以前端技术为基础的混合开发框架,ionic便是其中之一。

学习一门技术,最好的方式就是去官网撸官方文档。ionic 官网 对自己的介绍如下:

The top open source framework for building amazing mobile apps.
Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

官方给自己定位很清楚,开源免费的移动平台开发框架。不过这个自封的「顶级」,会不会给人一种钦定的感觉?话说回来,ionic 作为一个纯粹基于前端技术的框架,写写页面和逻辑还行,一旦涉及到有关 Native 的一些操作,基本就只能沉默以对了。这时候便轮到 Cordova 华丽出场了。

Cordova 与 ionic 一样,也是一个开源的移动开发框架,不过属于 Apache 旗下的开源项目。它的出现,使得开发者可以仅仅使用前端技术开发跨平台的移动项目。说到这你可能要问了,既然也是基于前端技术的混合开发框架,那它跟 ionic 有毛区别?

区别就在于,Cordova 完成了混合开发最重要的一环:打通了前端与 Native 层的各种交互。通过 Cordova 的各种 插件,你可以像原生开发一样,调用各种系统功能,比如打电话、拍照、访问扬声器、定位、甚至使用 TouchID 等本来原生代码才可以调用的功能。而 ionic 做的工作,就是把本来需要用前端代码写的原生控件和方法,做了一个还不错的风格统一和逻辑封装。也即是说,Cordova 完成了与 Native 层的交互和通信,ionic 完成了移动端页面的布局和互动。不得不说,前端的小伙伴们真是太有福了,只管拿过来写就行了。下图是 Cordova 的架构。

Cordova 的架构

通过前面铺垫的内容,我们终于可以真正进入到 ionic 的开发中来。首先,我们需要在 Mac 上安装 ionic,在终端输入如下命令:

npm install -g cordova ionic

其中,npm 全拼为 Node Package Manager,是 Node.js 的包管理工具,主要功能是管理 Node 各种包的安装、更新、卸载、升级等功能。所以执行这行命令之前我们需要先在 Node.js 官网 下载最新稳定版(推荐)的安装包,安装到电脑上之后,就可以在终端执行上面的命令了。 -g 这个参数的意思是 globally,全局安装。Cordova、ionic 是需要安装的包。

另外,现在最新的 ionic 版本是2.x,跟1.x区别还是挺大的,所以一定要注意自己安装的版本。做完这些之后,我们就完成了开发 ionic 所需要做的准备工作。正所谓上手一门语言最快的的方法就是写个 Hello World,下面我们就来做一个 ionic 的 Hello World!

打开终端,输入

ionic start --v2 HelloWorld sidemenu

上面的命令为我们自动创建了一个 SideMenu 模板的应用框架,我们在此基础上进行开发即可。创建完成之后,cd 到 HelloWorld 文件夹目录下,运行 ionic serve,如果运行成功,终端会自动为我们打开浏览器运行刚才创建的程序。运行效果如下图所示:

ionic 的 SideMenu 应用模板

从外观上看,整体风格与一代差距还是挺大的,总的来说是变得相对来说更加美观了一些。想当初我第一次看到运行在浏览器上的 ionic 应用,心想这什么玩意,这也能叫 APP ?尽管 V2 版本还是有很多不尽如人意的地方,但已经可以看见明显在进步了。从实现方式上来说,ionic V2 版本将 AngularJS V1 替换成了 AngularJS V2 版本,差别还是挺大的。

ionic 的构成总的来说分为三个部分:UI ComponentsAPIIonic Native.

UI Components 是 ionic 官方出的高仿原生控件的 UI 组件库,V1 版本名称叫做 CSS Components,只是名称变了。API 是 JavaScript API,使用 JS 封装了很多在 iOS 开发中常用的方法。 Ionic Native 顾名思义是访问 Native 层时所需要的一些插件。

至此,ionic 差不多就入门了,想要进一步深入学习的话就去官方网站看文档吧。国内虽然有所谓的 ionic 中文网之类的论坛,但是翻译质量十分堪忧,而且经常滞后,不如不看。说到这里就要赞一下 ionic 官网文档做得非常全面而且详细,各种开发辅助手到擒来,对开发者可以说是肥肠友好了。

这次先写这么多,以后会接着更新 ionic 其他方面的内容。

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

推荐阅读更多精彩内容