Ionic2调用本地SQlite实例

2024-12-23 21:27:07

普通的app用ionic内置的Storage存储键值对的方式可以满足日常的使用，但是有时候遇到一些奇怪的需求。比如说有个网友留言说做一个离线版的App，怎样调用本地Sqlite执行SQL语句。问题描述清楚直接上代码。

需要说明的是SQLite是手机内置的数据库存储方式，在Ionic2中需要安装相应的插件和安装包。过程很简单

第一步

安装插件、并加入项目

$ ionic plugin add cordova-sqlite-storage
$ npm install --save @ionic-native/sqlite

第二步

把服务加入到src/app/app.moudle.ts

...
import { SQLite } from '@ionic-native/sqlite';
...
providers: [
 ...
 SQLite
]
...

第三步

使用数据库，常规来说，这一步应该封装成公共服务或者工具类。类中是具体的创建数据库，调用数据库，CRUD等方法。这里只是说明原理，直接调用

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')",{});//插入数据
  })
  .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安装到手机才能得到结果，毕竟是调用手机内置的SQLite。
ionic build android

用上面的命令构建APP并安装到手机看看效果吧

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

ionic实现滑动的三种方式

在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动.本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式.实现滑动的基本原理,有两个容器A.B,假如A在外层,B在内层:外层的A宽度或高度固定,内层容器B宽度或者高度大于A即可实现滚动. 实现方式 1). ion-scroll 利用ionic自带的滑动指令 <ion-view view-title="Dashboard"> <ion-content class="padding
ionic实现可滑动的tab选项卡切换效果

利用ionic的slide-box组件实现可滑动的tab,主要是监听tab点击以及slide页面滑动的事件,做相应的处理,用ng-repeat循环,优化.简略了代码,有需要的同学可以看看. 先来张效果图: 用到的css代码: .tab_default{ border-bottom:solid 1px #F2F2F2; padding:6px 0; } .tab_select{ border-bottom:solid 1px #3E89F5; box-shadow:0 -3px 8px #C1D3
Ionic+AngularJS实现登录和注册带验证功能

登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li
Ionic快速安装教程

今天就让我们学习一下如何安装 Ionic 在自己的电脑上搭建一个简单的小应用.很多的网站上面都会写很复杂的安装方法,其实刚开始学习ionic的初学者,特别是没有很多编程经验的小伙伴是不是会吓跑了?感觉那么复杂需要安装什么node.js的环境啊., 安装最新版本的cordova啊- - 其实不需要那么麻烦的.告诉大家我在做项目的时候怎么使用ionic的吧. 第一种方法:直接引入使用第一步 .首先下载Ionic ionic 最新版本下载地址:http://ionicframework.com/do
Ionic2创建App启动页左右滑动欢迎界面

摘要: 每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy! 效果如下本文例子和上图稍有不同,主要功能如下: 每滑动一下展示一张全屏图片: 滑动到最后一页才出现启动按钮: 欢迎界面只在第一次安装启动时出现. 下面就让我们一步一步实现这个功能: 1.创建应用: 使用Ionic2创建应用非常简单,只需在V1的命令后跟上--v2即可,如下: ionic start ionic2-welcome
Ionic2系列之使用DeepLinker实现指定页面URL

Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由.这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的router可以提供更灵活的配置.比如在首页是一个Tabs页面的情况下,如何控制用户看到的第一项Tab?默认情况下都是会导航到第一个Tab,而且地址栏的URL并不会跟随页面的切换而变化.好在Ionic2提供了一种类似路由的DeepLinker功能,可以实现以上目的. DeepLinker与NavControl
Ionic如何创建APP项目

前面的章节中我们已经学会了ionic 框架如何导入到项目中. 接下来我们将为大家介绍如何创建一个 ionic APP 应用. ionic 创建 APP 使用 HTML.CSS 和 Javascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如下: 大家按照步骤在自己的编辑器上来认真的完成这个APP的创建吧. <!DOCTYPE html> <html> <head> <meta charset="ut
Ionic2调用本地SQlite实例

普通的app用ionic内置的Storage存储键值对的方式可以满足日常的使用,但是有时候遇到一些奇怪的需求.比如说有个网友留言说做一个离线版的App,怎样调用本地Sqlite执行SQL语句.问题描述清楚直接上代码. 需要说明的是SQLite是手机内置的数据库存储方式,在Ionic2中需要安装相应的插件和安装包.过程很简单第一步安装插件.并加入项目 $ ionic plugin add cordova-sqlite-storage $ npm install --save @ionic-na
ionic2 tabs 图标自定义实例

一.准备资源 tabs icon 的svg格式的矢量图片二.生成字体样式文件打开icoMoon网站去制作字体文件. 三.使用字体文件解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下.并且将其目录下的styles.css文件命名为wecare.scss(这个名称是你字体的文件名称),再将其拷贝到ionic2项目的src/assest/fonts目录下.下来我们去修改wecare.scss文件. 修改@font-face中的引用地址. $font-pa
java通过url读取远程数据并保持到本地的实例代码

前几天老姐突然告诉我,她在JD上买了本电子图书,如何买完发现,只能在线或者使用它自己的阅读器看,很不方便,让我给想想办法. 如何我就开始琢磨,最开始,我直接使用Acrobat Reader打开,发现只有目录,没有其他,而且页面上面的都存在,我想可能在正确的内容上增加了一块蒙版,只能用"钥匙"的人可以过滤它,要破解别人的编辑器,短时间肯定是不行的的,网上也有很多人想到的是使用自动化脚本去自动对官方阅读器截图,但是我发现,截图不是一页一页的,这就很懵逼了.最后只能通过在线阅读这条线来想办法
Android WebView调用本地相册的方法

本文实例为大家分享了Android WebView调用本地相册的具体实现方法,供大家参考,具体内容如下首先要知道android本身的WebView是并不支持调用手机文件并上传的,其次WebView的内核在android每次更新的时候都是不太一样的,也是够坑爹的:不过需求又不能改,H5需要调用系统相册,还好最后还是找到方法解决了,就是要重写里面的一个方法,不过这种情况也是在5.0之前有效,5.0之后就需要重写另外的一个方法,先将这些方法一个个的列出注意在这里我们需要重写的方法是在这个WebCh
JS实现调用本地摄像头功能示例

本文实例讲述了JS实现调用本地摄像头功能.分享给大家供大家参考,具体如下: 今天学习了一下js调用本地摄像头,其实是实现不是很麻烦,下面是代码部分,连接上Tomcat服务器,然后再到网页上打开即可以看到效果了..快来玩一下吧! <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <
Go语言resty http包调用jenkins api实例

目录前言 Resty特色演示例子简单get请求增强get请求灵活post请求多文件上传文件下载实战例子构造一个jenkins客户端获取jenkins job信息无参构建job 查看构建日志 job开关(启用禁用job) 小结前言在前两篇文章中都使用HttpRequest这个http包来做api的请求然后github上面还有一个更有名,星星更多,社区也更活跃的http包Resty 最近11月3号又发布了一个新版本,项目参与者多达75个,标星有5.2k Resty特色支
go 代码的调试---打印调用堆栈的实例

本文介绍如何打印调用堆栈进行go代码的调试. 打印堆栈使用的runtime package中的Stack()函数 func Stack(buf []byte, all bool) int Stack formats a stack trace of the calling goroutine into buf and returns the number of bytes written to buf. If all is true, Stack formats stack traces of
mybatis调用存储过程的实例代码

一.提出需求查询得到男性或女性的数量, 如果传入的是0就女性否则是男性二.准备数据库表和存储过程 create table p_user( id int primary key auto_increment, name varchar(10), sex char(2) ); insert into p_user(name,sex) values('A',"男"); insert into p_user(name,sex) values('B',"女"); ins
Kotlin 语言中调用 JavaScript 方法实例详解

Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J
C语言中调用Swift函数实例详解

C语言中调用Swift函数实例详解在Apple官方的<Using Swift with Cocoa and Objectgive-C>一书中详细地介绍了如何在Objective-C中使用Swift的类以及如何在Swift中使用Objective-C中的类.在后半部分也介绍了如何在Swift中使用C函数,不过对于如何在C语言中使用Swift函数却只字未提.这里我就为大家分享一下如何在C语言中调用Swift函数. 我们首先要知道的是,所有Swift函数都属于闭包.其次,Swift函数的调用约定与

Ionic2调用本地SQlite实例

相关推荐

随机推荐