由于Ionic 2每天都在变得越来越好,因此请始终查看官方文档以跟踪最新的更改和改进。
先决条件:您将需要NodeJS才能构建Ionic 2项目。您可以在此处下载并安装节点,并在此处了解有关npm和Ionic 2使用的软件包的更多信息。
与Ionic 1一样,您可以使用Ionic CLI或GUI在浏览器中快速构建和测试应用程序。它甚至具有与Ionic 1应用程序一起使用的所有功能,因此您无需更改任何内容!
要使用Ionic 2,只需从npm安装ionic:
$ npm install -g ionic
安装CLI后,运行以下命令启动您的第一个应用程序:
$ ionic start MyIonic2Project
默认情况下使用选项卡模板,但是您可以通过传递标志来选择另一个模板。例如:
$ ionic start MyIonic2Project tutorial $ cd MyIonic2Project $ npm install
这将使用教程模板。
要运行您的应用,请进入您的项目目录并运行ionic serve -lc:
$ ionic serve -lc
-l激活页面的实时重新加载,-c显示控制台日志。如果您在构建应用程序时遇到问题,请确保package.json与ionic2-app-base中的匹配
您还可以在物理设备或设备仿真器上构建新应用。您将需要Cordova才能继续。
要安装Cordova,请运行:
$ npm install -g cordova
请查看用于构建iOS应用程序的iOS模拟器文档(注意:您无法在除OSX之外的任何操作系统上构建至iOS设备或模拟器),或查看Genymotion文档以构建Android应用程序。
在iOS设备上运行:
要构建iOS应用,您需要在OSX计算机上工作,因为您将需要可可框架才能针对ios进行构建,如果是这种情况,您首先需要通过运行以下命令:
$ ionic cordova platform add ios
您将需要Xcode才能编译到iOS设备。
最后,使用以下命令运行您的应用程序:
$ ionic cordova run ios
在Android设备上运行:
Android的步骤几乎相同。首先,添加平台:
$ ionic cordova platform add android
然后安装Android SDK,使您可以编译到Android设备。尽管Android SDK附带了一个模拟器,但速度确实很慢。Genymotion更快。安装后,只需运行以下命令:
$ ionic cordova run android
就是这样!祝贺您构建了第一个Ionic 2应用程序!
离子也有实时重装。因此,如果您要开发应用程序并查看在模拟器/设备上实时进行的更改,则可以通过运行以下命令来做到这一点:
对于iOS:
$ ionic cordova emulate ios -lcs
请注意,在iOS 9.2.2上,livereload不起作用。如果要使用livereload,请config.xml添加以下内容来编辑文件:
<allow-navigation href="*"/>
然后在<platform name="ios">:
<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist"> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict> </config-file>
对于Android:
$ ionic cordova run android -lcs
这些l代表实时重载,c控制台日志和s服务器日志。这将使您查看执行期间是否有任何错误/警告。
Windows版
如果要为Windows构建项目,则需要在Windows计算机上工作。首先,通过运行以下命令将Windows平台安装到ionic2项目中:
$ionic cordova platform add windows
然后只需运行以下命令:
$ionic cordova run windows
在浏览器中运行
$ionic serve
用于chrome浏览器检查设备。(在chrome浏览器的地址栏中输入)
chrome://inspect/#devices