返回

微信小程序教程：通信与缓存助力小程序开发

前端

微信小程序通信与缓存的精髓

通信机制

页面通信

页面通信允许您在不同的页面之间交换数据。使用 wx.navigateTo 等 API 将数据附加到 URL 参数中。或者，您可以使用 wx.setStorage 和 wx.getStorage 将数据存储在本地。跨页面通信可以通过 wx.onMessage 和 wx.postMessage 实现。

wx.navigateTo({
  url: 'page2?data=' + JSON.stringify({ id: 123 }),
});

组件通信

组件通信提供了一种在父组件和子组件之间传递数据的方法。通过 props 传递数据，通过 ref 获取子组件，或使用 $emit 和 $on API 进行通信。

<parent>
  <child @update="handleUpdate" />
</parent>

<script>
export default {
  methods: {
    handleUpdate(data) {
      // 处理来自子组件的数据
    },
  },
};
</script>

缓存机制

本地存储

本地存储使您可以将数据存储在设备上。使用 wx.setStorage 和 wx.getStorage 轻松存储和检索数据。

云存储

云存储提供了无限的数据存储，可以通过 wx.cloud.database API 访问。使用 wx.cloud.getTempFileURL 获取文件的临时下载链接。

wx.setStorage({
  key: 'my_data',
  data: { name: 'John', age: 30 },
});

wx.cloud.database().collection('users').add({
  name: 'Jane',
  age: 25,
});

app.js 文件

定义全局变量

app.js 文件包含 globalData 对象，可用于在小程序范围内共享变量。

App({
  globalData: {
    userInfo: null,
  },
});

初始化小程序

在 onLaunch 函数中执行小程序初始化，例如加载数据或设置默认配置。

App({
  onLaunch: function () {
    wx.setNavigationBarTitle({
      title: 'MyApp',
    });
  },
});

监听生命周期

监听小程序的生命周期事件，例如 onShow 和 onHide，以根据小程序状态执行特定操作。

App({
  onShow: function () {
    console.log('App shown');
  },
});

缓存使用技巧

  • 本地存储大小有限，使用云存储存储大量数据。
  • 本地存储数据在小程序卸载时丢失，而云存储数据不会丢失。
  • 考虑数据敏感性和保密性，选择合适的存储机制。

常见问题解答

  1. 如何清除本地存储？

    • 使用 wx.clearStorage 函数。

  2. 云存储是否免费？

    • 云存储可能会产生费用，具体取决于数据大小和读写操作次数。

  3. 如何监听组件事件？

    • 使用 $on API 在组件中监听事件。

  4. 如何通过父组件更新子组件数据？

    • 通过 props 传递数据，或使用父组件方法更新子组件状态。

  5. 本地存储和云存储的优点是什么？

    • 本地存储访问速度快，而云存储提供了无限存储和跨设备共享。