ionic3启动页面

来源:互联网 发布:脱脂牛奶 知乎 编辑:程序博客网 时间:2024/05/21 14:46

第一步
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);}
原创粉丝点击