uniapp本地数据库_uniapp中使用sqlite对本地缓存下数据进行处理

先说下我决定用sqlite的条件：

主要是流程处理，需要在无网络的情况下实现，数据量多的时候用h5的缓存完全不够，在看了文档之后选择使用SQLite ，早起在mui的时候使用的indexDB；

因为在社区也没收到具体的，所以写下记录下也和小伙伴分享下，有啥问题可以互相交流下。

该文档中用到的两个点 (SQLite 和vue中的mixin)

我这有两个环境，我先说一个简单；

主页菜单进去 到列表界面 从该步骤开始缓存本地数据；

从列表点击进入到详情，并在详情操作。有网络正常，无网络时存入表中，当切换到有网情况后，进行提交；

使用SQLite时需要先开权限，在配置文件中，如下图

SQLite官方demo ； 在hbuilderX 下新建demo pages/API/sqlite/sqlite 下官方提供的sqlite使用。为了使用方便，我把需要的单独提出来；

该出贴出function 代码，不做具体说明；

function openComDB(name, path, callback) {

plus.sqlite.openDatabase({

name: name,

path: path,

success: function(e) {

// plus.nativeUI.alert('打开数据库成功');

callback(e)

},

fail: function(e) {

// plus.nativeUI.alert("打开数据库失败");

callback(e);

}

})

}

function executeSQL(name, sql, callback) {

plus.sqlite.selectSql({

name: name,

sql: sql,

success: function(e) {

// console.log("查询数据库:" + name + ",表:" + sql + ";的");

// console.log(JSON.stringify(e));

callback(e);

},

fail: function(e) {

console.log("查询数据库失败:" + JSON.stringify(e));

callback(e);

}

})

}

export{

openComDB,

executeSQL

}

该出 进入正题；

在需要用到的vue文件下，引入上方function； 路径是自己的；

import {openComDB,executeSQL,dropSQL} from '../../common/env.js'

说下简单的思路：

1.进入lists界面，先判断是否有网络，有网络正常调用，无网络时需要判断本地数据库中是否有数据，无数据则第一次进入。有数据需要调用本地数据中的数据；

ps

在有些uni使用上可能会和现在的有点出入，因为这个是早期写的NFC写入的功能，用的nvue的，还是weex的模式下。

贴上部分相关代码

created() {

this.getNetworkType(); //初始化网络当前状态；

uni.onNavigationBarButtonTap((e) => {

//该处是因为的导航栏右边加了两个筛选条件。可以忽略。 不过如果做离线需要筛选的，筛选条件等数据同样需要缓存

if (e.index == 1) {

this.pickType();

} else if (e.index == 0) {

this.pickBuild()

}

})

},

methods: {

getNetworkType() {

//获取网络信息

uni.getNetworkType({

success: res => {

this.netWork = res.networkType;

this.isOpenDB();

}

})

},

isOpenDB() {