先说下我决定用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() {
console.log('是否打开数据库');
var isOpen = plus.sqlite.isOpenDatabase({
name: 'nfc', //数据库的名字
path: '_doc/nfcList.db' //地址
});
console.log(!isOpen);
if (!isOpen) {
console.log('Unoepned:' + isOpen);
// plus.nativeUI.alert('Unopened!');
this.openDB(); //打開DB
} else {
// plus.nativeUI.alert('Opened!');
this.isNet();
// this.getLocalType();
}
},
openDB() {
//SQLite
openComDB('nfc', '_doc/nfcList.db', res => {
console.log('打开数据库');
this.isNet();
});
},
isNet(){
//网络问题；
if (this.netWork == 'wifi' || this.netWork == '4g') {
//在有网络情况下，会先情况之前的表，为了防止没有及时更新到数据。update我是嫌麻烦，没这样写。就这样暴力写了。
console.log('wifi || 4g ');
this.dropTable("pointLists");
this.dropTable("codeTypeTable");
this.dropTable("codeTable");
this.dropTable("statusTable")
//删了之后创建表
this.createCodeTable();
this.createCodeTypeTable();
this.createBuildTable();
this.createLists();
this.createUpateStatus(); // 离线时更新
//然后把数据插入进去
this.getTabType(); //初始化格式
this.getPonitType(); //获取code。默认值
this.getCodeType(); // 类型下的选择项；
this.getBuilds(); // 获取建筑物数据
} else {
//无网络时；
console.log('初始化无网络');
this.getTabType(); //初始化格式
this.locCodeTypeItem();
this.selBuildFun();
}
//上面贴的drop，create，insert 我会在下面贴出部分代码。不会全部贴.SQL语句不会的建议百度找文档多看下，无非就是增删改查
},
}
整个代码贴上太长了，我还是分段写吧；
本身就是个带tab类型的列表。延用nvue 的 weex的形式，未改成uniapp形式，如需参照此处tab，需要看之前的官方demo。 建议用官方新的uniapp模式，我是懒得改。
//初始化
getTabType() {
//初始化列表；
let ary = [];
for (let i = 0; i < this.tabBars.length; i++) {
let aryItem = {
loadingText: "",
data: [],
pageNum: 1
}
ary.push(aryItem);
}
this.newsitems = ary;
if(this.netWork == "wifi" || this.netWork == "4g"){
this.getPointList() //默认加载未处理； 有网络下，正常调用接口
}else{
this.selPointList() //无网络下调用数据库表中的数据；
}
},
再有网络调用接口时需要将 数据insert到创建的数据表中；
创建数据库中的表
我的思路是整个app为一个数据库，有各种不同的表。 目前只有nfc中用到了，所以数据库的name 就取名 nfc 了，未进行修改；
现在正儿八经的创建表；
用简单的建筑信息为例；根据自己需要的进行创建表；
createBuildTable() {
//创建建筑物类型表；
var sqlTable = 'create table if not exists buildTable("id" INT(10) NOT NULL UNIQUE,"name" CHAR,"gridCode" CHAR)'
executeSQL('nfc', sqlTable, res => {})
},
在有网调用接口时，insert 表；需要与上方创建的完全对应，最后一个不加 “,” 只有不对应就会报错
insertBuildCode() {
for (var i = 0; i < this.builds.length; i++) {
var sqlInsert = "insert into buildTable values('";
sqlInsert += this.builds[i].id + "','";
sqlInsert += this.builds[i].name + "','";
sqlInsert += this.builds[i].gridCode + "'";
sqlInsert += ')';
executeSQL('nfc', sqlInsert, res => {
})
}
this.getLocBuilds() //插入成功后，就可以查看结果。此处用到就直接赋值，没用到，或者别处用到，就在别处调用
},
getLocBuilds() {
executeSQL('nfc', 'select * from buildTable', res => {
console.log("建筑物查询结果");
this.builds = res;
this.selBuildFun()
})
},
查看就这样，就写个简单的例子。列表数据比较多。就不放上。如果详情的数据是通过detailById 接口调用，list表的需要将详情的数据加进去。
当整个数据存上后，就是点击list跳转到detail界面。
detail正常的vue文件。
有网络时正常查看，进行提交操作。
无网络时，查看本地数据库的表。
所有创建和插入都是在list进行的，detail.vue中 进行 查看，和更改，如果需要删除 也可。 (因为在list就很有可能是无网络的情况，所以所有的数据都在列表获取到了)
list ---> detail
可以带id ，也可以带json、建议带唯一的id就可以了，可以在detail select 出需要的数据；
我这里是觉着数据已经在list存上了，detail不如直接使用，不管用网络无网络，本身做提交，后台也不会不停的改数据。
比较严谨的可以有网络时候调用详情接口，无网络时在本地查。
查询代码上面贴了列子此处就不放上了。
简单说一下离线提交。会用到VUE的mixin。
离线提交的思路 。在list的时候需要创建 提交的 表 locSubTable(随便起的名字方便后面提到) ，并在最后 加上 flag 字段 (这个自己随意) 类型INT 。因为没有布尔。所以在插入的时候需要用flag 0,1 进行判断是否需要缓存提交。
0 为 false 1 为 true ；
在detail 内，若 是离线时进行提交，在 locSubTable 进行insert 。最后flag 插入 为 0 ；
在无网络切换至 wifi/4g下，查询 locSubTable 表 where flag = 0 的数据。 返回的 res.length = 0 的时候，无离线提交。
ren.length 有数据需要循环提交。接口提交成功之后需要。update locSubTable 中的 flag = 1 。表示缓存的数据已经被成功提交掉。
还需要更新下list 表的数据，将状态从 未处理 update 为 已处理 (此处更改是因为我的列表是tab类型。流程处理后的状态需要及时更新掉。)
写之前是打算贴代码的，写上之后发现不知道从哪里下手贴，只能说下处理的思路。
后面简单说下mixin的使用。是为了在全局监听网络变化，并能在app下进行离线提交。
在社区找到了uniapp是可以支持的。不过好像用的也不多。(此处该贴上官方链接，找到补上)
因为监听网络切换的时候，界面不会只停留在当前页。但是每个页面都写上也太多了，后来在vue的文档中找到了mixin 混入
《当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项 》
在写的时候也发现的一些坑，会一起记录下。(如果写完发现太多了那我就是被疫情在家憋惨了，憋成了话痨，尴尬)
再common中新建 mixin.js ； mixin的基础使用，可以在vue官方文档查找。
var isLoc ={
data() {
return {} // 有需要的data，也可以加上，我没有用到。
},
methoad:{
//因为需要在其他地方查数据库，所以依旧在最开始打开数据库
isOpenDB() {
console.log("mixin 中是否打开数据库");
var isOpen = plus.sqlite.isOpenDatabase({
name: 'nfc',
path: '_doc/nfcList.db'
});
console.log("数据库是否打开：" + !isOpen);
if (!isOpen) {
console.log('unopen:' + isOpen)
this.openDB()
}
},
openDB() {
openComDB('nfc', '_doc/nfcList.db', res => {
console.log("mixin:打开数据库");
this.getLocUser()
})
},
selStatusList() {
//查询是否有离线写入，未提交数据； flag == 0 false。
// console.log("切换至网络，查询是否有缓存未提交数据");
executeSQL('nfc', 'select * from statusTable where flag = 0', res => {
// console.log(res)
// console.log(res.length);
for (var i = 0; i < res.length; i++) {
this.submitPointFun(res[i].id); //返回的参数根据实际情况来的。
}
})
},
submitPointFun(curId) { // 提交巡检接口
//提交接口
getData({id: curId},data => { //填自己的接口、本身这个我封了下，按照自己的来。
urlFuc("xxxxxxxx", data, res => {
console.log("当前ID：" + curId + "提交成功");
//返回 成功后， 对列表的数据进行update 。
this.updatePointStatus(curId);
this.updatePointList(curId)
});
});
},
updatePointStatus(curId) {
// 切换至有网络后，提交成功后，更新已提交成功数据 更新巡检点状态
//修改flag = 1 - true ；
var updateSQL = 'update statusTable set flag = 1 where id = ' + curId;
executeSQL('nfc', updateSQL, res => {
console.log("更新数据");
})
},
updatePointList(curId) {
// 状态更改后，更改列表改ID的数据
var updateSQL = 'update pointLists set status = "已关联" where id = ' + curId;
console.log(updateSQL);
executeSQL('nfc', updateSQL, res => {
console.log("更新列表数据")
})
},
},
}，
created() {
this.isOpenDB();
uni.onNetworkStatusChange((res) => {
//监听网络
console.log('MIXIN 下监听网络');
// console.log(res.isConnected);
// console.log(res.networkType);
if (res.networkType == 'none') {
console.log('无网络');
// that.seleceByType();
} else if (res.networkType == 'wifi' || res.networkType == '4g') {
console.log('wifi');
//切换到有网络时，需要查看是否有离线数据，并进行提交。
this.selStatusList(); //查询是否有离线数据
this.selLocTaskList();
// that.getNfCList();
}
})
}
}
export {
isLoc
}
引用
import {
isLocData
} from '../../common/mixin.js'
export default {
mixins: [isLocData],
data(){}
}
遇到的坑，
最开始想放在app.vue下的。 但是安装后会白屏。后来改到main.vue下。
这是一个比较简单的使用，后面还有一个有点复杂的使用，离线提交的时候上报多选择数据和 图片，备注等信息。 (离线图片的时候，需要注意进程关掉再开，之前的缓存图片地址就没了，会导致离线上传时图片的丢失。所以建议不要手动关掉进程，或者将图片存下来，成功后再删掉。)
之后因为图片临时缓存的问题，我在本地存了，提交成功后，删除本地存的文件。(离线中mixin.js一样)
imageList ,当前图片显示，因为会多张图上传。
var files = [];
console.log(data.length);
var that = this;
//将临时文件存为本地文件，不受进程关闭的影响
for (var i = 0; i < data.length; i++) {
uni.saveFile({
tempFilePath: data[i],
success: img => {
var savedFilePath = img.savedFilePath;
console.log(savedFilePath);
that.imageList.push(savedFilePath)
console.log("tupian ")
console.log(that.imageList)
// files.push(savedFilePath);
// console.log(files);
// console.log(JSON.stringify(files));
}
})
}
成功后记得删除本地
removeSaveFiles(filePath) {
//移除本地存储文件；
console.log("需要删除的地址")
console.log(filePath)
uni.removeSavedFile({
filePath: filePath,
complete: function(res) {
console.log(res);
}
});
},
状态也有 未处理，处理中，已结束。多个tabs。用法还是一样的。不做说明了。开始以为就一点点的。没想到会写这么多。
希望有帮助，这个sqlite 也是这次的时候使用过的，之前也没有。毕竟是个前端，搞的时候也问了后台一些思路。可能不是很完美，如果有什么好的建议也可以和我说。
补充说明
有小伙伴在指出
文档中 增删改 使用
void plus.sqlite.executeSql(options);
查询 使用
void plus.sqlite.selectSql(options);
最开始没发现，我封装的 plus.sqlite.selectSql(options); 增删改查都可以使用，也没碰到什么问题。
建议大家按照官方的来使用。
7292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
