[Ionic 2从入门到精通] 2.1 生成一个Ionic2应用

第一课:生成一个Ionic2应用

我们已经讲了不少内容了,现在我们需要知道Ionic 2是干什么的,为什么要对他做这么多更改。带着这个疑问,我们开始学习如何使用Ionic 2。

安装Ionic

在使用Ionic 2制作应用之前,我们需要装好所有需要用到的东西。用的是Mac还是PC不重要,我们都可以用来学完这本书生产一个iOS和Android应用提交到App商店。
重要:如果你电脑上已经装了Ionic 1那么你可以直接跳到下一部分。你只需要运行npm install -g ionic或者sudo npm install -g ionic来设置Ionic 2需要的任何东西。如果你想继续使用Ionic 1的话,用不着担心,更新之后,Ionic 1和Ionic 2你都可以用。
首先,你得装个Node.js。Node.js是一个用来制作快速,伸展性网络应用的平台,他可以用来做很多不同的事情。如果你不熟悉Node.js你也无须担心,我们基本上不怎么用的上——但是他是跑Ionic和安装其他包必备的。

** > 访问以下网址安装Node.js**:
https://nodejs.org/en/download/

一旦安装好了Node.js,你可以通过命令行去访问node包管理器了。
> 在终端运行如下命令安装Ionic和Cordova:

npm install -g ionic cordova

或者

sudo npm install -g ionic cordova

如果没有设置好你的Android SDK的话,请参考如下方案去设置好:

如果你是Mac机的话,那么你也要安装好XCode,因为你需要用他来构建应用和为应用签名。
iOS SDK的配置无须担心,因为XCode已经帮你摆平了,如果你没有Mac的话,那么你就没法设置了。(后续我们会讲到如何在没有Mac的情况下构建iOS应用)
现在你的开发环境应该设置好了。通过以下命令,查看你是否成功安装Ionic CLI(Command Line Interface,命令行交互界面):
'''
ionic -v
'''
你也可以通过在你的ionic项目内运行:
'''
ionic info
'''
来查看更多信息。
以下是我写作本书的时候的输出信息:

1.1.1.jpg

如果你在安装ionic或者生成新项目的时候发生错误,先保证下你是否安装了最新(当前版本)的Node。安装好了最新的版本之后,先运行如下命令:

npm uninstall -g ionic npm cache clean

注意:Ionic框架和Ionic CLI是两个不同的东西。CLI是咱们刚装的,他通过命令行提供了一系列的工具帮助我们创建和管理Ionic项目。Ionic CLI负责下载实际的Ionic框架到每个你创建的项目中。

生成第一个Ionic项目

Ionic装好后,生成应用特别简单。你只需要简单的运行ionic start命令就可以创建一个新项目,包括一些模板代码和文件。
> 运行如下命令生成一个新的Ionic应用:

ionic start MyFirstApp blank --v2

以上命令会生成一个名为‘MyFirstApp’的应用,使用的是‘blank’模板。Ionic有一些内置的模板,上面我们用的上‘blank’,我们也可以用其他的:

ionic start MyFirstApp sidemenu --v2

或者

ionic start MyFirstApp tutorial --v2

又或者运行默认命令:

ionic start MyFirstApp --v2

默认的是一个标签页应用模板。记住,想要创建Ionic 2应用的话就必须在后面加‘--v2’。如果不加的话就会创建Ionic 1项目了。
注意:当前所有Ionic 2项目默认使用TypeScript。由于TypeScript是一个ES6的扩展,所以可以在TypeScript项目里面直接使用ES6,但是所有的Javascript必须是.ts,而不是.js。
下面我们开始研究枯燥的blank模板项目。项目创建成功之后,立刻将项目作为当前目录,这样我们就可以对他做更多事情了。
> 运行如下命令转到Ionic项目目录

cd MyFirstApp

如果对命令行或者终端不熟悉的话,先考虑读下这个。虽然内容是针对Ionic 1的,但是里面有关于命令行界面工作原理的内容。

添加平台

终于,我们要开始使用Cordova制作我们的应用了(实际上Ionic CLI生成的应用是一个Cordova应用),首先我们得添加我们的目标平台。如果要添加Android平台的话,那么运行这个命令:

ionic platform add android

添加iOS平台的话,运行:

ionic platform add ios

如果你制作的是这两个平台应用的话,那么你都应该运行一下。这样你的项目就可以构建对应平台的应用了。
在这里我简单解释一下,我们大部分的代码将会在app文件夹内,同时你也可以在你的项目下找到一个名为platforms的文件夹——对应平台的相关配置都是存放在此处的。后续我们会集体讲一遍。

运行应用

HTML5移动应用的美好之处在于你可以一边开发一边做浏览器中查看他。但是如果你直接利用浏览器打开index.html文件的话,估计你会遭遇到不开心的事情。
Ionic项目是需要到服务端上运行的——意思是你不能直接访问这些文件,也不是意味着你需要把他放到互联网上去,你可以将一个完全自容的Ionic应用部署到应用商店去(这个我们后面会学到)。幸运的是,Ionic提供一个了一个简单的在本地网络服务器同步开发和测试的方法。
> 运行如下命令可以在浏览器中预览你的应用:

ionic serve

这个命令会打开一个新的浏览器,浏览器会打开你当前应用在本地服务器上运行的地址。目前,他看起来应该是这样的:

1.1.2.jpg

这个命令不仅可以给你查看你的应用,当你代码改动的时候,他会实时更新显示。让你编辑或者保存任何文件的时候,你不用在浏览器中重新刷新页面就可以看到更改自动映射到浏览器中了。

停止此进程请使用:

Ctrl + C

同时请记住,运行了ionic serve后不能运行其他Ionic CLI命令来。你需要通过 Ctrl + C 终止此命令然后运行指定的命令。
(译者注:Windows上可以重新开一个命令行来运行)

更新应用

有时候你可能需要更新到新的Ionic版本。更新项目中的ionic版本最简单的方法是先更新Ionic CLI:

npm install -g ionic

或者

sudo npm install -g ionic

然后,更新项目中的package.json,你应该可以在其中看到这样的一部分:

"dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/platform-server": "^2.0.0",
    "@ionic/storage": "^1.0.3",
    "ionic-angular": "^2.0.0-rc.1",
    "ionic-native": "^2.2.3",
    "ionicons": "^3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
},
"devDependencies": {
    "@ionic/app-scripts": "^0.0.33",
    "typescript": "^2.0.3"
},

只要改掉ionic-angular的版本号到最新的版本号,然后在项目文件夹中运行:

npm install

就可以了。这个命令将自动抓取最新版的框架并添加到你的项目中来。
重要:记住,如果需要更新package.json其他依赖库到最新版本的话也是一样的操作。
在新版本发布之后,先阅读更新日志查看是否有任何重大变更,因为如果有的话你就有可能需要修改部分项目代码了。
通常做法是利用更新后的Ionic CLI新建一个项目,然后将你在个人代码覆盖进去。如果不想这么做的话,一定要确保仔细阅读了更新日志,然后相应的更新你的依赖库和代码。随着Ionic 2越来越稳定,后续变动其实也不会很大,所以这也不会是个太大的问题。

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

推荐阅读更多精彩内容