ionic 创建 APP
ionic 创建 APP
Ionic是一个完整的开源的移动端Web App开发框架，它使用web技术，使得我们能够使用HTML，CSS和JavaScript来构建移动应用程序。Ionic使得我们能够在不同平台上开发高质量、交互式和前沿的WebApp。下面就具体讲解ionic创建APP的方法。
第一步：安装ionic
打开命令行工具，输入以下指令：
npm install -g ionic
安装成功后，使用以下指令创建一个项目：
ionic start myApp tabs
指令中的myApp是将要创建的项目名称，tabs则表示我们使用的是ionic提供的模版。如果不需要使用模版，可以将tabs替换为blank。
第二步：启动ionic
进入项目目录，输入以下指令：
cd myApp
ionic serve
指令中的myApp改成我们自己项目的名称即可，上述指令将会自动编译并启动程序，默认情况下，程序将在本地8080端口运行。在浏览器中打开http://localhost:8080，即可访问我们的应用。
第三步：修改页面
使用VS Code等编辑器打开我们的项目，修改src/pages目录的文件。在ionic中，每个页面都被声明为组件，对应页面文件的文件名就是组件名。我们可以在src/pages目录下创建一个新的文件作为我们自定义的页面，例如，src/pages/home/home.html，src/pages/home/home.ts，代码如下：
<!-- home.ts -->
import { Component } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor() {}
}
<!-- home.html -->
<ion-header>
<ion-navbar color="primary">
<ion-title>
My App
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h1>Hello, Ionic!</h1>
</ion-content>
这里演示的是一个最简单的页面，它包括：一个Header，一个Content。Header是展示在页面顶部的导航栏，Content包含页面的主体内容。其中ion-header和ion-navbar表示Header，ion-content表示Content。
第四步：添加页面到路由
将页面添加到应用导航中，需要在src/app/app.module.ts文件中将其引入。具体方法如下：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home'; //这里新增
@NgModule({
declarations: [
MyApp,
HomePage //这里新增
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage//这里新增
],
providers: []
})
export class AppModule {}
Home页面已经被添加到了routing模块中，我们只需要更改app.component.ts文件就可以让其显示：
import { Component } from '@angular/core';
import { HomePage } from '../pages/home/home'; //这里新增
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage; //这里更改
}
第五步：编译，发布应用
当我们完成了APP的制作后，就需要将其编译并打包发布，这里我们仅提供android平台的打包方式，具体方法如下：
首先，确保在电脑上安装了Android开发环境
然后，进入项目目录，输入以下指令：
ionic cordova platform add android
接着，输入以下指令编译APP：
ionic cordova build android
等待编译完成后，在项目目录/platforms/android/app/build/outputs/apk/下，会生成一个apk文件，这就是我们的APP。我们可以将此apk文件发布到应用市场。
以上就是ionic创建APP的全部过程，需要注意的点是，在开发APP前，需要先了解一些ionic所用到的技术：HTML，CSS和JavaScript，AngularJS和Typescript这一些技术。