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这一些技术。