小程序云数据库综合操作_4

小程序云数据库综合操作 - 完整总结笔记

一、项目结构与代码组织

1. 全局数据库初始化

javascript 复制代码

// 全局初始化云数据库（避免重复创建）
const db = wx.cloud.database();

// 单条数据的目标doc ID（替换成你自己的真实ID）
const TARGET_DOC_ID = 'ba046a62695d11ea0ae6b9781aa1c85f';

优点：

避免在每个函数中重复初始化数据库
提高代码复用性和可维护性

二、数据查询操作（CRUD中的Read）

1. 获取单条指定ID的数据

javascript 复制代码

getOneData: function() {
  wx.showLoading({ title: '加载中...' });
  
  db.collection('user')
    .doc(TARGET_DOC_ID)  // 按指定ID查询单条数据
    .get()
    .then(res => {
      wx.hideLoading();
      // 把单条数据更新到列表（方便页面展示）
      this.setData({ list: [res.data] });
    })
    .catch(err => {
      wx.hideLoading();
      console.error('获取单条数据失败:', err);
    });
}

2. 获取多条数据（带数量限制）

javascript 复制代码

getMultipleData: function() {
  wx.showLoading({ title: '加载中...' });
  
  db.collection('user')
    .limit(10)  // 限制获取10条，避免性能问题
    .get()
    .then(res => {
      wx.hideLoading();
      this.setData({ list: res.data });
    })
    .catch(err => {
      wx.hideLoading();
      console.error('获取多条数据失败:', err);
    });
}

3. 获取全部数据

javascript 复制代码

getAllData: function() {
  wx.showLoading({ title: '加载中...' });
  
  db.collection('user')
    .get()  // 去掉limit，获取全部数据
    .then(res => {
      wx.hideLoading();
      this.setData({ list: res.data });
    })
    .catch(err => {
      wx.hideLoading();
      console.error('获取全部数据失败:', err);
    });
}

查询操作总结：

单条查询：.doc(id).get()
多条查询：.limit(n).get()
全部查询：.get()

三、数据添加操作（CRUD中的Create）

javascript 复制代码

addData: function() {
  wx.showLoading({ title: '添加中...' });
  
  db.collection('user').add({
    data: {
      username: 'SAKURA',
      age: 20,
      jobs: '上学堂·小米',
      icon: 'https://example.com/avatar.jpg'
    }
  }).then(res => {
    wx.hideLoading();
    console.log('添加成功:', res);
    // 添加后重新获取全部数据，更新列表
    this.getAllData();
  }).catch(err => {
    wx.hideLoading();
    console.error('添加失败:', err);
  });
}

关键点：

使用.add({data: {...}})添加数据
系统会自动生成_id字段
添加成功后重新获取数据以更新视图

四、数据删除操作（CRUD中的Delete）

1. 确认删除（前端交互）

javascript 复制代码

deleteItem: function(e) {
  // 从按钮的data-id中获取要删除的文档ID
  const id = e.currentTarget.dataset.id;
  if (!id) {
    wx.showToast({ title: '数据ID异常', icon: 'none' });
    return;
  }

  // 弹出确认删除提示（重要：防止误操作）
  wx.showModal({
    title: '确认删除',
    content: '删除后无法恢复，确定吗？',
    success: (res) => {
      if (res.confirm) {
        this.performDelete(id);  // 用户确认后执行删除
      }
    }
  });
}

2. 执行删除操作（分离业务逻辑）

javascript 复制代码

performDelete: function(id) {
  wx.showLoading({ title: '删除中...' });
  
  db.collection('user').doc(id).remove()
    .then(res => {
      wx.hideLoading();
      if (res.stats.removed === 1) {
        wx.showToast({ title: '删除成功', icon: 'success' });
        // 删除后重新获取全部数据
        this.getAllData();
      } else {
        wx.showToast({ title: '删除失败', icon: 'error' });
      }
    })
    .catch(err => {
      wx.hideLoading();
      console.error('删除失败:', err);
      
      // 根据错误码提供友好提示
      let errorMsg = '删除失败';
      if (err.errCode === -502003) errorMsg = '无删除权限';
      if (err.errCode === -502001) errorMsg = '数据不存在';
      
      wx.showToast({
        title: errorMsg,
        icon: 'none',
        duration: 3000
      });
    });
}

删除操作关键点：

分离确认和执行逻辑，提高代码可维护性
提供详细的错误信息反馈
删除后立即更新视图

五、页面结构与条件渲染

1. WXML结构

xml 复制代码

<!-- 功能按钮区 -->
<view class="btn-group">
  <button type="primary" bindtap="getOneData">获取一条数据</button>
  <button type="primary" bindtap="getMultipleData">获取多条数据</button>
  <button type="primary" bindtap="getAllData">获取全部数据</button>
  <button type="primary" bindtap="addData">添加数据</button>
</view>

<!-- 数据列表：条件渲染 -->
<view class="list" wx:if="{{list.length > 0}}">
  <view wx:for="{{list}}" wx:key="_id" class="item">
    <image src="{{item.icon}}" class="avatar" mode="widthFix"></image>
    <view class="info">
      <text class="name">{{item.username}}</text>
      <text class="age">年龄: {{item.age}}</text>
      <text class="jobs">{{item.jobs}}</text>
      <!-- 删除按钮：传递数据ID -->
      <button class="delete-btn" bindtap="deleteItem" data-id="{{item._id}}">删除</button>
    </view>
  </view>
</view>

<!-- 空数据提示 -->
<view class="empty-tip" wx:else>暂无数据，请先添加</view>

2. 条件渲染技巧

wx:if="{``{list.length > 0}}"：有数据时显示列表
wx:else：无数据时显示提示信息
两个条件分支必须在同一父节点下

六、用户体验优化技巧

1. 加载状态管理

javascript 复制代码

// 开始加载
wx.showLoading({ title: '加载中...' });

// 结束加载
wx.hideLoading();

2. 操作反馈提示

javascript 复制代码

// 成功提示
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 1500
});

// 失败提示
wx.showToast({
  title: '操作失败',
  icon: 'error',
  duration: 2000
});

// 确认对话框（重要操作前）
wx.showModal({
  title: '确认操作',
  content: '确定要执行此操作吗？',
  success: (res) => {
    if (res.confirm) {
      // 用户点击确定
    }
  }
});

3. 错误处理优化

javascript 复制代码

.catch(err => {
  console.error('完整错误信息:', err);
  
  // 根据错误码提供友好提示
  const errorMap = {
    '-502001': '数据不存在或已被删除',
    '-502003': '无权限执行此操作',
    '-504001': '网络连接失败，请检查网络',
    '-504002': '请求超时，请稍后重试'
  };
  
  const errorMsg = errorMap[err.errCode] || '操作失败，请重试';
  
  wx.showToast({
    title: errorMsg,
    icon: 'none',
    duration: 3000
  });
});

七、CSS样式建议

css 复制代码

/* 按钮组样式 */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20rpx 0;
}

.btn-group button {
  margin: 10rpx;
  flex: 1;
  min-width: 150rpx;
}

/* 列表样式 */
.list {
  margin-top: 30rpx;
}

.item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  margin: 10rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

/* 头像样式 */
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

/* 信息区域 */
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.age, .jobs {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 5rpx;
}

/* 删除按钮 */
.delete-btn {
  background-color: #e64340;
  color: white;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
  margin-top: 10rpx;
  align-self: flex-start;
}

/* 空数据提示 */
.empty-tip {
  text-align: center;
  color: #999;
  font-size: 32rpx;
  margin-top: 100rpx;
}

八、安全与性能最佳实践

1. 权限管理

查询权限：通常设置为所有用户可读
写权限：仅创建者可写，或通过云函数控制
删除权限：特别注意权限验证

2. 性能优化

javascript 复制代码

// 1. 限制查询数据量
.limit(10)  // 避免一次性获取过多数据

// 2. 合理使用索引
// 在云开发控制台为常用查询字段创建索引

// 3. 避免重复查询
// 使用缓存或合理的数据更新策略

3. 代码组织建议

分离关注点：将确认逻辑和执行逻辑分离
错误处理统一：使用统一的错误处理机制
状态管理：合理管理加载状态和页面状态

九、完整操作流程总结

初始化：
javascript 复制代码
```
const db = wx.cloud.database();
```
查询数据：
- 单条：.doc(id).get()
- 多条：.limit(n).get()
- 全部：.get()
添加数据：
javascript 复制代码
```
.add({data: {...}})
```
删除数据：
- 获取ID：e.currentTarget.dataset.id
- 确认操作：wx.showModal()
- 执行删除：.doc(id).remove()
更新视图：
- 操作成功后调用getAllData()重新获取数据
- 使用this.setData({list: res.data})更新页面
用户体验：
- 加载提示：wx.showLoading()
- 成功/失败反馈：wx.showToast()
- 重要操作确认：wx.showModal()

十、常见问题与解决方案

1. 删除权限问题

问题：返回errCode: -502003
原因：小程序端只能删除有_openid且匹配的数据
解决方案：

在云函数中执行删除操作
确保数据包含正确的_openid字段

2. 数据渲染问题

问题：数据更新后页面不刷新
原因：setData未正确调用
解决方案：

javascript 复制代码

// 确保在异步操作成功后调用setData
.then(res => {
  this.setData({ list: res.data });
})

3. 网络错误

问题：errCode: -504001
原因：网络连接失败
解决方案：

检查网络连接
添加重试机制
提供友好的错误提示

通过这个完整的示例，你已经掌握了小程序云数据库的基本CRUD操作。关键是要理解每个操作的使用场景、权限限制以及如何优化用户体验。在实际开发中，根据具体需求选择合适的查询方式，并始终考虑数据安全和性能优化。