个人技术总结——微信小程序实时数据自动更新_微信小程序自动更新

很多时候我们需要把我们刚输入的数据实时显示出来，比如我们提交一条评论，希望它能马上显示出来；修改待办的优先级，它能马上发生变化；完成一条待办，需要让它及时变成完成的状态。

在微信小程序中如果是将组件内的data数据直接显示可以调用this.setData()修改（PS:直接修改 this.data是无法改变页面的状态的，还会造成数据不一致），小程序会自动更新信息并显示。但如果不是从data中直接显示数据，那就需要先进行一些操作，再通过setData更新页面数据。接下来我将结合本次课程项目，将使用到的方法整合成一项技术（如果有不完整或错误的地方欢迎指正）：

技术概述

技术：微信小程序实时数据自动更新
应用场景：

• 即时反馈用户输入，如即时显示评论、状态更改、任务进度更新。
• 数据联动，跨组件或页面间状态同步。

学习原因：
提升用户体验，保证数据展示实时性与一致性。

技术难点：

• 异步数据处理：确保数据更新与UI同步无误。
• 跨组件通信：高效准确传递更新信号。
• 状态管理：复杂状态监听与更新逻辑。

---

技术详述

1. 页面间数据更新

介绍：

需要跨页面通信，专注计时页面计时结束时传输完成标识，待办页面接收并更新已完成的task，通过使用Storage 实现

实现：

步骤
使用wx.setStorageSync存储完成标识，如taskRefresh。
onShow中检测并处理taskRefresh，更新任务列表后清除标识。

代码示例
父页面：

//专注页面 setStorageSync 提醒待办页面更新
api.post(...).then(() => {
    //提醒待办页面更新
  wx.setStorageSync('taskRefresh', true);
});
1
2
3
4
5

子页面：

//待办页面 getStorageSync 监听更新提醒
onShow() {
  this.checkAndRefresh();
}
checkAndRefresh() {
    // 检查缓存中是否有从其他页面传来的刷新指令
  const taskRefresh = wx.getStorageSync('taskRefresh');
  if (taskRefresh === 'true') {
      // 刷新任务列表
    this.loadTaskList();
      // 清除刷新标记，避免每次返回都刷新
    wx.removeStorageSync('taskRefresh');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 父子组件间数据更新

介绍：

父组件是滚动面板，子组件是自定义组件myTask，需要在子组件点击删除后提醒父组件将该子组件删除，子组件使用triggerEvent提醒父组件更新，父组件使用bind事件监听子组件更新提醒

实现：

步骤

子组件通过triggerEvent触发updateData事件。
父组件bind:updateData监听该事件，调用以更新列表。

代码示例
子组件：

//子组件：请求后端删除该任务并提醒父组件更新
deleteTask() {
  api.del(...).then(() => {
      //提醒父组件更新列表
    this.triggerEvent('updateData');
  });
}
1
2
3
4
5
6
7

父组件：

<myTask bind:updateData="onMyTaskUpdate" ...></myTask>
1

//父组件：在使用子组件时bind:updateData="onMyTaskUpdate"
onMyTaskUpdate() {
  this.loadTaskList();
}
1
2
3
4

3. 组件内数据更新

介绍：

后端传输的属性是level，在task组件上显示的是标签，需要使用observers监听level属性修改让标签也更新

实现：

步骤：

使用observers监听特定属性（如level），
属性变化时自动调用新值更新相关UI元素。

代码示例

data: {
  tagTypeList: ["success", "primary", "danger"],
  tagName: ["低", "中", "高"]
},
observers: {
//监听属性修改
  'level': function() {
    this.setData({
      tagType: this.tagTypeList[this.data.level - 1],
      tagName: this.tagTypeName[this.data.level - 1]
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

---

问题与解决

异步问题：避免直接在异步操作后立即读取数据，使用observers确保数据同步更新后再处理。

比如：实时刷新评论，可以自定义一个flag属性，在发布完评论后修改flag，组件监听flag

observers: {
    //监听属性修改
    'flag': function () {
      this.getCommentList()
    }
  },
1
2
3
4
5
6

//post请求发布评论
api.post('/user/comment/add', {
       content: this.data.comment_text,
       articleId: this.data.comment_pr_id,
       fatherId: this.data.now_reply
     }).then(() => { 
       this.setData({
         flag: !this.data.flag
       })
     })
1
2
3
4
5
6
7
8
9
10

为什么不在post().then中直接调用this.getCommentList()呢，那当然是因为：

api.post 是一个异步操作，意味着它不会立即完成。立即调用 this.getCommentList()（在数据实际更新之前），那么它可能会基于旧的数据状态进行操作，这可能导致不一致或错误的结果。容易出现刷新的数据还是没更新前的。[恼]

---

总结

微信小程序实时数据更新通过setData、跨页面通信机制及observers监听等实现。关键在于理解异步编程模式，确保数据操作与UI更新同步，以及合理设计组件间通讯机制，维持状态一致性。针对问题，通过合理设计逻辑与API利用可有效解决异步及状态不一致难题。