ionic3启动页面

宰父正真
2023-12-01

第一步
1.在pages下添加welcome页面
2.命令行ionic g page welcome;

在app.component.ts导入welcome页面

第二步
1.下载数据库及其插件(其他数据库也可,如IndexedDB;下面只讲H5只带的和storage数据库的用法)
数据库: ionic cordova plugin add cordova-sqlite-storage
插件:npm install –save @ionic/storage
2.H5自带数据库 (无需下载)

第三步
1.配置插件
在app.module.ts下面添加

  '''impot { IonicStorageModule } from '@ionic/storage'''
   imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    '''IonicStorageModule.forRoot()''',
  ],  
在app.component.ts上添加
'''import { Storage } from '@ionic/storage';'''
'''export class MyApp { 
  rootPage: any; 

  constructor(platform: Platform, public storage: Storage) {

    this.storage.get('firstIn').then((result) => { 
      result=false
      if(result){  
        this.rootPage = HomePage; 
      } 
      else{
        this.storage.set('firstIn', true);
        this.rootPage = WelcomePage;
      }

    }
    );'''  

2.H5原生在app.component.ts下添加

    rootPage: any;//HomePage或TabsPage删掉

    var flag = localStorage.getItem("firstIn");
    if( flag == undefined ){
      localStorage.setItem("firstIn", "1");
      this.rootPage=WelcomePage;
    }else{
      this.rootPage=TabsPage;
    }

第四步
完结撒花!!!

从welcome跳到首页的方法:

  goToHome(){
  this.navCtrl.setRoot(TabsPage);
}
 类似资料: