第一步
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);
}