中国制造网官方网站首页,马化腾做的电商网站,做足球预测的网站,有没有专门做家乡图片的网站不管是真机还是H5#xff0c;都有提供sqlite数据库进行存储数据。那么我们只要封装好函数就能随意调用了。如果只是存储简单的键值对形式的话#xff0c;ionic官网也提供了一个兼容网页的storage#xff0c;https://ionicframework.com/docs/storage#xff0c;但只能key/v…不管是真机还是H5都有提供sqlite数据库进行存储数据。那么我们只要封装好函数就能随意调用了。如果只是存储简单的键值对形式的话ionic官网也提供了一个兼容网页的storagehttps://ionicframework.com/docs/storage但只能key/value 当然value可以是Json。但是很多时候为了前后端数据保存一致所以前端也采用多字段存储那么只能自己封装函数处理了。*如果websql支持的浏览器无法满足自己的需求请使用IndexedDB1. 安装数据库操作插件$ ionic cordova plugin add cordova-sqlite-storage$ npm install --save ionic-native/sqlite所有的原生插件和自定义provider都要在app.module的providers中声明import { SQLite } from ionic-native/sqlite;NgModule({declarations: [MyApp],imports: [HttpModule,JsonpModule,BrowserModule,IonicModule.forRoot(MyApp, {})],bootstrap: [IonicApp],entryComponents: [MyApp],providers: [SQLite]})export class AppModule { }2. 封装调用函数控制台输入命令创建provider$ ionic g provider native执行后目录如下1.png填入//异步问题进行修改import { SQLite, SQLiteObject } from ionic-native/sqlite;import { Injectable } from angular/core;import { Platform , Events } from ionic-angular;import { StorageServiceProvider } from ../../providers/storage-service/storage-service;Injectable()export class NativeProvider {database: SQLiteObject;win_db: any;//H5数据库对象win: any window;//window对象constructor( private platform: Platform,private sqlite: SQLiteprivate events: Events,private storage: StorageServiceProvider) { }/*** 创建数据库*/createDb() {if (this.isMobile()) {this.sqlite.create({name: data.db,location: default}).then((db: SQLiteObject) {this.database db;//创建表如果已存在就创建if (this.storage.read(db:create) ! Yes) {//创建表this.createTable();} else {this.events.publish(db:create);}}).catch(e {this.showAlert(this.text.CREATE_DB);this.events.publish(db:create);});} else {//H5数据库存储注意测试浏览器兼容websql w3c没维护try {this.win_db this.win.openDatabase(data.db, 1.0, database, 5 * 1024 * 1024);//声明H5 数据库大小this.createTable();} catch (err) {console.log(创建数据库失败)}}}/*** 创建表*/async createTable() {// this.querySql(, []);//可能存在多个执行创建表语句只需最后一个使用awaitawait this.executeSql(CREATE TABLE remindMaster(remind_id INTEGER PRIMARY KEY AUTOINCREMENT,user_id TEXT,state TEXT , content TEXT,remind_time TEXT,create_time TEXT), []);this.events.publish(db:create);this.storage.write(db:create, Yes);}/*** 执行语句*/executeSql(sql: string, array: Array): Promise {return new Promise((resolve, reject) {if (this.isMobile()) {if (!!!!this.database) {this.database.executeSql(sql, array).then((data) {resolve(data);}, (err) {reject(err);console.log(Unable to execute sql: err);});} else {return new Promise((resolve) {resolve([]);});}} else {if (this.win_db) {return this.execWebSql(sql, array).then(data {resolve(data);}).catch(err {console.log(err);});}}});}/*** 查询H5数据库*/execWebSql(sql: string, params: Array): Promise {return new Promise((resolve, reject) {try {this.win_db.transaction((tx) {tx.executeSql(sql, params,(tx, res) resolve(res),(tx, err) reject(err));},(err) reject(err));} catch (err) {reject(err);}});}/*** 是否真机环境* return {boolean}*/isMobile(): boolean {return this.platform.is(mobile) !this.platform.is(mobileweb);}}3. 调用删除app.html里的默认root属性图片.png在程序初始化的时候调用创建数据库(即app.component.ts里)constructor(private statusBar: StatusBar,private splashScreen: SplashScreenprivate nativeProvider: NativeProvider) {platform.ready().then(() {// Okay, so the platform is ready and our plugins are available.// Here you can do any higher level native things you might need.this.init();//初始化});}init(){//确保异步执行完后才隐藏启动动画this.events.subscribe(db:create, () {//创建数据库与表成功后才关闭动画跳转页面this.statusBar.styleDefault();this.splashScreen.hide();this.nav.setRoot(TabsPage);})//初始化创建数据库this.nativeProvider.createDb();}在所需页面引入调用即可//插入数据this.nativeProvider.executeSql(INSERT INTO remindMaster(user_id,state,content,remind_time,create_time) VALUES (?,?,?,?,?),[1, 0, haha, 2017-12-14, new Date().getTime().toString()]);//查询数据//如果使用直接拼接sql查询需要注意参数加 否则真机sqlite查看不到数据 例如(SELECT remind_id,state,user_id,content,remind_time,create_time FROM remindMaster WHERE state0 AND user_id ${user_id } ORDER BY remind_time ASC, []this.nativeProvider.executeSql(SELECT remind_id,state,user_id,content,remind_time,create_time FROM remindMaster WHERE state? AND user_id ? ORDER BY remind_time ASC, [0,1]).then(data {if (!!!!data !!!!data.rows data.rows.length 0) {for (let i 0; i data.rows.length; i) {console.log(data.rows.item(i));}}});4. 浏览器查看image.png
