ionic

article/2025/10/20 23:32:17

 #一、ionic的安装运行 
1.安装nodejs 
2.npm install -g cordova ionic 
npm i -g cordova ionic 
3.创建项目 
ionic start myApp tabs 
4.ionic -v 是ionic 的cli版本 
5.ionic serve 
6.ionic g component actionsheet 必写component 

 // 根模块 告诉ionic如何组装应用 

 // 引入 angular 以及ionic的系统模块 
 import { NgModule, ErrorHandler } from '@angular/core'; 
 import { BrowserModule } from '@angular/platform-browser'; 
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 

 // 引入根组件 
 import { MyApp } from './app.component'; 

 // 页面 自定义的组件 
 import { AboutPage } from '../pages/about/about'; 
 import { ContactPage } from '../pages/contact/contact'; 
 import { HomePage } from '../pages/home/home'; 
 import { TabsPage } from '../pages/tabs/tabs'; 

 // ionic打包成app以后配置启动画面 以及导航条的服务 
 import { StatusBar } from '@ionic-native/status-bar'; 
 import { SplashScreen } from '@ionic-native/splash-screen'; 

 //引入components模块 
 import { ComponentsModule } from '../components/components.module'; 


@ NgModule({ 
 declarations: [ //声明组件 
 MyApp, 
 AboutPage, 
 ContactPage, 
 HomePage, 
 TabsPage 
], 
 imports: [ // 依赖的模块 
 BrowserModule, 
 ComponentsModule, 
 IonicModule. forRoot( MyApp) 
], 
 bootstrap: [ IonicApp], // 启动的模块 
 entryComponents: [ // 配置不会再模板中使用的组件 
 MyApp, 
 AboutPage, 
 ContactPage, 
 HomePage, 
 TabsPage 
], 
 providers: [ // 配置服务 
 StatusBar, 
 SplashScreen, 
{ provide: ErrorHandler, useClass: IonicErrorHandler} 
] 
}) 
 export class AppModule {} 