Ionic2調(diào)用本地SQlite實(shí)例
普通的app用ionic內(nèi)置的Storage存儲(chǔ)鍵值對(duì)的方式可以滿足日常的使用,但是有時(shí)候遇到一些奇怪的需求。比如說有個(gè)網(wǎng)友留言說做一個(gè)離線版的App,怎樣調(diào)用本地Sqlite執(zhí)行SQL語句。問題描述清楚直接上代碼。
需要說明的是SQLite是手機(jī)內(nèi)置的數(shù)據(jù)庫存儲(chǔ)方式,在Ionic2中需要安裝相應(yīng)的插件和安裝包。過程很簡單
第一步
安裝插件、并加入項(xiàng)目
$ ionic plugin add cordova-sqlite-storage $ npm install --save @ionic-native/sqlite
第二步
把服務(wù)加入到src/app/app.moudle.ts
... import { SQLite } from '@ionic-native/sqlite'; ... providers: [ ... SQLite ] ...
第三步
使用數(shù)據(jù)庫,常規(guī)來說,這一步應(yīng)該封裝成公共服務(wù)或者工具類。類中是具體的創(chuàng)建數(shù)據(jù)庫,調(diào)用數(shù)據(jù)庫,CRUD等方法。這里只是說明原理,直接調(diào)用
import { Component } from '@angular/core'; import { SQLite, SQLiteObject } from '@ionic-native/sqlite'; @Component({ selector: 'page-hello-ionic', templateUrl: 'hello-ionic.html' }) export class HelloIonicPage { constructor( private sqlite: SQLite) { } database :SQLiteObject; ngOnInit(){ this.initDB(); } initDB(){ this.sqlite.create({ name: 'data.db', location: 'default' }) .then((db: SQLiteObject) => { db.executeSql('create table t_log(name VARCHAR(32))', {})//建表 .then(() => console.log('Executed SQL')) .catch(e => console.log(e)); this.database = db; db.executeSql("insert into t_log values('123')",{});//插入數(shù)據(jù) }) .catch(e => console.log(e)); } //查詢 query() { let results = this.database.executeSql("select * from t_log",{}); alert(data.rows.length); alert(data.rows.item(0).name); }) } }
最后一步
這一步一定要生成app安裝到手機(jī)才能得到結(jié)果,畢竟是調(diào)用手機(jī)內(nèi)置的SQLite。
ionic build android
用上面的命令構(gòu)建APP并安裝到手機(jī)看看效果吧
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js給對(duì)象動(dòng)態(tài)添加、設(shè)置、刪除屬性名與屬性值實(shí)例代碼
由于項(xiàng)目需要常常會(huì)遇到為某一個(gè)對(duì)象動(dòng)態(tài)添加屬性的情況,下面這篇文章主要給大家介紹了關(guān)于js給對(duì)象動(dòng)態(tài)添加、設(shè)置、刪除屬性名與屬性值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11Array.prototype.concat不是通用方法反駁[譯]
ECMAScript 5.1規(guī)范中指出,數(shù)組方法concat是通用的(generic).本文反駁了這一結(jié)論,因?yàn)閷?shí)際上并不是這樣的2012-09-09webpack如何自動(dòng)生成網(wǎng)站圖標(biāo)詳解
這篇文章主要給大家介紹了關(guān)于webpack如何自動(dòng)生成網(wǎng)站圖標(biāo)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01JS正則表達(dá)式判斷有效數(shù)實(shí)例代碼
這篇文章主要介紹了JS正則表達(dá)式判斷有效數(shù)實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03JS實(shí)現(xiàn)表格響應(yīng)式布局技巧
這篇文章主要為大家介紹了JS實(shí)現(xiàn)表格響應(yīng)式布局技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07用javascript來實(shí)現(xiàn)動(dòng)畫導(dǎo)航效果的代碼
javascript來實(shí)現(xiàn)動(dòng)畫導(dǎo)航效果是通過定時(shí)器與鼠標(biāo)事件響應(yīng)相結(jié)合,動(dòng)態(tài)修改頁面元素屬性實(shí)現(xiàn)的動(dòng)畫導(dǎo)航效果,需要的朋友可以參考一下2007-12-12