微信小程序开发显示数据

### 如何在微信小程序中正确显示数据

#### 准备工作
为了确保能够在微信小程序中正确显示数据，需先完成必要的准备工作。这包括但不限于创建项目并配置好云开发环境[^1]。

#### 创建页面结构
定义用于展示数据的小程序页面布局，在`index.wxml`文件内编写如下HTML标签来构建基本框架：

<!-- index.wxml -->
<view class="container">
    <!-- 循环渲染todo列表项 -->
    <block wx:for="{{todos}}" wx:key="id">
        <text>{{item.content}}</text>
    </block>

    <!-- 添加新待办事项表单 -->
    <form bindsubmit="addTodoSubmit">
      <input name="content" placeholder="输入新的待办事项"/>
      <button type="primary">添加</button>
    </form>
</view>

此部分通过循环遍历`todos`数组中的每一项，并将其内容作为文本节点呈现出来；同时提供了一个简单的表单让用户可以提交新增加的任务条目。

#### 数据获取与更新逻辑
接下来是在对应的JS脚本(`index.js`)里处理业务逻辑的部分，这里主要涉及两个方面的工作——初始化加载已有数据以及响应用户的交互操作（即增加新记录）。具体做法如下所示：

// index.js
Page({
  data: {
    todos: [] // 存储所有的待办事项
  },

  onLoad() {
    this.getTodos();
  },

  getTodos() {
    const db = wx.cloud.database();

    db.collection('todos').get().then(res => {
      console.log('[数据库查询] 成功:', res.data);
      
      this.setData({ 
          todos: res.data.map(item => ({...item, id: item._id})) 
      });
    }).catch(err => {
      console.error('[数据库查询] 失败:', err);
    })
  },
  
  addTodoSubmit(e) {
    let content = e.detail.value.content.trim();
    
    if (!content.length) return;

    const db = wx.cloud.database();

    db.collection('todos').add({
      data: { content }
    }).then(() => {
      // 刷新视图以反映最新状态
      this.getTodos();
    }).catch(console.error);

    // 清除输入框的内容
    this.selectComponent('.my-form').resetField('content');
  }
})

上述代码片段实现了当页面初次载入时自动拉取云端存储的数据填充至前端界面的功能，并允许用户经由表单提交新的待办事项后即时同步刷新界面上的信息。