1. 創(chuàng)建一個(gè)ionic模板項(xiàng)目

$ionic start IonicDemo tabs && cd ./IonicDemo
$ionic cordova platform add ios

2. 安裝插件

$ionic cordova plugin add cordova-sqlite-storage
$npm i -S @ionic-native/sqlite@^4.0.0 //指定版本號(hào)兼容ionic3

3. 修改文件

替換/IonicDemo/src/app/app.module.ts為

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 { SQLite } from '@ionic-native/sqlite';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    SQLite,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

替換/IonicDemo/src/pages/about/about.html為

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <button ion-button (click)="initDataBase()">初始化數(shù)據(jù)庫</button>
  
  <button ion-button (click)="insertData('Tom', '12345678910')">插入數(shù)據(jù)</button> 
  
  <button ion-button (click)="updateData('Tom', '12312312312')">更新數(shù)據(jù)</button> 

  <button ion-button (click)="deleteData('Tom')">刪除數(shù)據(jù)</button> 

  <button ion-button (click)="queryData('Tom')">查詢數(shù)據(jù)</button> 

</ion-content>

替換/IonicDemo/src/pages/about/about.ts為

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage {

  database: SQLiteObject;

  constructor(public navCtrl: NavController,private sqlite:SQLite,public toastCtrl : ToastController) {

  }
  /*
    //頁面加載時(shí)調(diào)用
    ionViewDidLoad() {
      this.initDataBase();
    }
  
    //頁面即將進(jìn)入時(shí)調(diào)用
    ionViewWillEnter() {
      this.initDataBase();
    }
  */
    //創(chuàng)建數(shù)據(jù)庫
  initDataBase(){
    this.sqlite.create({
      name: 'data.db',
      location: 'default'
    })
      .then((db: SQLiteObject) => {
        db.executeSql('create table if not exists person(id integer primary key autoincrement,name varchar(20),phone varchar(11))', [])
          .then(() => console.log('Executed SQL'))
          .catch(e => console.log(e));

        this.database = db;
      });
  }

  //增
  insertData (name: string, phone: string) {
      this.database.executeSql('insert into person(name,phone) values(?,?)', [name, phone])
      .then(() => {
          let toast = this.toastCtrl.create({
          message: 'insertData success',
          duration: 2000,
          position: 'top'
          });
        toast.present(toast);
    
      })
      .catch(e => console.log(e))
  }

  //改
  updateData(name: string, phone: string) {
        this.database.executeSql('update person set phone=?  where name=?', [phone, name])
      .then(() => {
          let toast = this.toastCtrl.create({
          message: 'updateData success',
          duration: 2000,
          position: 'top'
          });
        toast.present(toast);
    
      })
      .catch(e => console.log(e))
  }

  //刪
  deleteData(name: string) {
        this.database.executeSql('delete from person where name=?', [name])
      .then(() => {
          let toast = this.toastCtrl.create({
          message: 'deleteData success',
          duration: 2000,
          position: 'top'
          });
        toast.present(toast);
    
      })
      .catch(e => console.log(e))
  }

  //查
  queryData(name: string) {
      this.database.executeSql("select phone from person where name=?", [name]).then((data) => {
          let toast;
          if (data.rows.length != 0) {
              toast = this.toastCtrl.create({
                  message: '數(shù)據(jù)已存在',
                  duration: 2000,
                  position: 'top'
              });
              toast.present(toast);
        } else {
              toast = this.toastCtrl.create({
                  message: '數(shù)據(jù)不存在',
                  duration: 2000,
                  position: 'top'
              });
        }
        toast.present(toast);
    });
  }
}

4. 編譯項(xiàng)目

$ionic build --prod
$ionic cordova prepare ios

5. 在Xcode中運(yùn)行項(xiàng)目

它應(yīng)該是這樣的

Simulator Screen Shot - iPhone 11 Pro Max - 2019-11-29 at 01.17.08.png

在模擬器about頁面中可以看到幾個(gè)菜單素邪，在點(diǎn)擊"初始化數(shù)據(jù)庫"之后就可以增刪改查了！

控制臺(tái)會(huì)打印沙盒中DB的路徑齿风，可以查看結(jié)果是否正確！

Just do it！