一. 在uni-app项目中, 链接SQLite
前端开发人员 应特殊需求, 需通过链接SQLite(关系型数据库) ,存储大量数据在Android/ios上
在项目中勾选此选项,确保相关权限
二、代码实现
html
<template>
<view class="content">
<image class="logo" src="@/static/logo.png"></image>
<view class="text-area">
<text class="title">I fine</text>
</view>
</view>
</template>
<script>
export default {
async onLoad() {
try {
// 1. 打开数据库
await this.openDB();
// 2. 检查表是否存在（调试用）
await this.debugShowTables();
// 3. 建表
await this.createTable();
// 4. 显式事务插入数据
await this.insertWithTransaction();
// 5. 查询验证
await this.selectSQL();
// 6. 主动关闭数据库（重要！）
await this.closeDB();
} catch (error) {
console.error('初始化失败:', error);
}
},
methods: {
// 打开数据库（强化错误处理）
openDB() {
return new Promise((resolve, reject) => {
plus.sqlite.openDatabase({
name: 'first',
path: '_doc/hello.db',
success: (e) => {
console.log('✅ 数据库连接成功',e);
resolve();
},
fail: (e) => {
console.error('❌ 连接失败:', e);
reject(`连接失败: ${JSON.stringify(e)}`);
}
});
});
},
// 创建表（增加IF NOT EXISTS）
async createTable() {
try {
await this.executeSql(
`CREATE TABLE IF NOT EXISTS locations (
id INTEGER PRIMARY KEY AUTOINCREMENT,
address TEXT NOT NULL,
area TEXT,
age INTEGER DEFAULT 0
)`
);
console.log('✅ 表创建成功');
} catch (e) {
throw new Error(`建表失败: ${e}`);
}
},
// 使用显式事务插入
async insertWithTransaction() {
try {
await this.executeSql('BEGIN TRANSACTION');
await this.executeSql(
`INSERT INTO locations (address, area, age)
VALUES ('北京', '安乐林', 11)`
);
await this.executeSql(
`INSERT INTO locations (address, area, age)
VALUES ('上海', '浦东新区', 23)`
);
await this.executeSql('COMMIT');
console.log('✅ 事务提交成功');
} catch (e) {
await this.executeSql('ROLLBACK');
throw new Error(`事务失败: ${e}`);
}
},
// 查询方法（增强调试）
async selectSQL() {
try {
const data = await this.selectSql('SELECT * FROM locations');
console.log('🔍 查询结果:', JSON.stringify(data, null, 2));
} catch (e) {
throw new Error(`查询失败: ${e}`);
}
},
// 关闭数据库（新增方法）
closeDB() {
return new Promise((resolve) => {
plus.sqlite.closeDatabase({
name: 'first',
success: () => {
console.log('🗃️ 数据库已关闭');
resolve();
},
fail: (e) => {
console.warn('关闭数据库异常:', e);
resolve(); // 即使失败也继续
}
});
});
},
// 调试：显示所有表（新增方法）
async debugShowTables() {
try {
const tables = await this.selectSql(
"SELECT name FROM sqlite_master WHERE type='table'"
);
console.log('📑 当前数据库表:', tables);
} catch (e) {
console.warn('表查询失败:', e);
}
},
// 通用SQL执行（保持原样）
executeSql(sql) {
return new Promise((resolve, reject) => {
plus.sqlite.executeSql({
name: 'first',
sql: sql, // 强制刷新 Write-Ahead Logging
success: () => {
console.log('强制刷新日志成功')
resolve()
},
fail: (e) => {
console.error('刷新失败:', e)
reject()
}
});
});
},
// 通用查询（保持原样）
selectSql(sql) {
return new Promise((resolve, reject) => {
plus.sqlite.selectSql({
name: 'first',
sql: sql,
success: (data) => resolve(data),
fail: (e) => reject(JSON.stringify(e))
});
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>控制台输出 ,我们可以看到执行日志
最佳方案,是把代码封装到一个公共库,需要增删改查数据 直接调用指定方法即可 , 有其他好的建议欢迎指导, 交流前端相关技术
有需要可视化预览 Sqlite中的数据表, 可看下一章ADB工具实现