更新记录
1.0.1(2025-04-03) 下载此版本
1、新增npm下载: npm i zbh-sqlite 2、更新readme.md 3、executesql 执行方法 保留事务操作
1.0.0(2025-04-02) 下载此版本
基于uni-app对HTML5+的sqlite支持,封装API使用
平台兼容性
Vue2 | Vue3 |
---|---|
× | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
zbh-sqlite 1.0.1
工欲善其事必先利其器
实现思路:uni-app支持sqlite,使用的是 HTML5+ API Reference
方法:
openDatabase: 打开数据库
isOpenDatabase: 判断数据库是否打开
closeDatabase: 关闭数据库
transaction: 执行事务
executeSql: 执行增删改等操作的SQL语句
selectSql: 执行查询的SQL语句
回调方法:
SQLiteSuccessCallback: SQLite操作成功回调函数
SQLiteFailCallback: SQLite操作失败回调函数
原生Android开发都知道操作数据库的流程是: 打开数据库 -> 开启事务 -> 执行SQL/查询SQL(查询可不用事务) -> 关闭事务 -> 关闭数据库
封装原理:
核心保留执行SQL/查询SQL, 将数据库打开/关闭、事务开启/关闭封装;
在此基础上封装增删改为通用方法,只需要传表名、列名、列值;
查询暂未封装, 业务不一样要查询的数据也不一样(后续可能会封装一些通用的查询方法)
!!!创建表方法未封装,表的管理、创建表方法示例 在dbtable-manage.js里,操作前先把表建好(后续优化,以及表列的增删改操作)
!!!建议: 当前版本的数据库操作肯定是不足的,对每张表建议管理在一起,例如在根目录/插件目录下建一个db目录,然后建要用的表文件(用户表user.js, 城市表city.js...)
使用:
1、App.vue 相关配置
import sqlite from '@/uni_modules/zbh-sqlite/components/zbh-sqlite/index.js'
import table from '@/uni_modules/zbh-sqlite/components/zbh-sqlite/dbtable-manage.js'
onLaunch: function() {
// 修改数据库名称
sqlite.dbName = 'xxx';
// 修改数据库路径
sqlite.dbPath = '_doc/xxx.db';
// 初始化数据表(暂未拥有更改表字段功能)
table.init();
},
2、新建表: 查看dbtable-manage.js 后续页面传值要对应好表列名,参考快速开始data的user与dbtable-manage.js的user
安装方式
1、DCloud 插件市场 zbh-sqlite 通过 HBuilder 导入插件包或配置 manifest.json
2、npm 安装
npm install zbh-sqlite@1.0.0
快速开始
import sqlite from '@/uni_modules/zbh-sqlite/components/zbh-sqlite/index.js'
import table from '@/uni_modules/zbh-sqlite/components/zbh-sqlite/dbtable-manage.js'
export default {
data() {
user: {
// 表字段: 字段值
username: 'admin',
password: '123'
}
},
methods: {
// 查询所有
selectAll(){
sqlite.selectAll(table.name.USER).then(res => {
...
}).catch(e =>){
...
}
},
// 新增
insert(){
sqlite.add(table.name.USER, this.user).then(res => {
...
}).catch(e =>){
...
}
}
}
}