ionic2ionic2入门


备注

Ionic 2是一种跨平台的移动开发技术。此框架专为构建混合移动应用程序而构建,也可用于桌面应用程序。它是一次写入,随处运行的技术。它使用Web /技术,如JavaScript / Typescript,Angular 2,HTML和CSS(SCSS / LESS)。 Ionic2应用程序在>=android 4.4上运行良好,但你想在android 4.1上运行到android 4.3你必须使用交叉步行

安装或设置

由于Ionic 2每天都在变得越来越好,请随时查看官方文档以了解最新的变化和改进。

先决条件:您需要NodeJS才能构建Ionic 2项目。您可以在此处下载并安装节点并了解有关npm和Ionic 2 在此处使用的软件包的更多信息。


1.安装Ionic 2

与Ionic 1一样,您可以使用Ionic CLI或GUI在浏览器中快速构建和测试应用程序。它甚至具有与您的Ionic 1应用程序配合使用的所有功能,因此您无需更改任何内容!

要使用Ionic 2,只需从npm安装离子:

$ npm install -g ionic
 

如果出现EACCES错误,请按照此处的说明为节点提供所需的权限。

2.创建您的第一个应用程序

安装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中的相匹配

您可以在浏览器中使用新应用程序!

3.构建到设备

您还可以在物理设备或设备模拟器上构建新应用程序。你需要Cordova才能继续。

要安装Cordova,请运行:

$ npm install -g cordova
 

查看用于构建iOS应用程序的iOS模拟器文档(注意:您无法在OSX以外的任何操作系统上构建iOS设备或模拟器),或者使用Genymotion文档构建Android应用程序。

在iOS设备上运行:

要构建iOS应用程序,您需要在OSX计算机上工作,因为您需要cocoa框架才能为ios构建,如果是这样的话,您首先需要通过运行将该平台添加到cordova以下命令:

$ 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应用程序!

Ionic也有实时重装。因此,如果您要开发应用程序并查看模拟器/设备上的实时更改,可以通过运行以下命令来执行此操作:

对于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 代表live-reload, c 代表控制台日志, s 代表服务器日志。这将允许您查看执行期间是否存在任何错误/警告。

适用于Windows的构建

如果要为Windows构建项目,则需要在Windows计算机上工作。首先,通过运行以下命令将windows平台安装到ionic2项目:

$ionic cordova platform add windows
 

然后运行以下命令:

$ionic cordova run windows
 

在浏览器中运行

$ionic serve
 

用于chrome浏览器检查设备。(键入chrome浏览器的地址栏)

chrome://inspect/#devices