监听全局共享数据

在微信小程序中，如果你想监听 App 对象中的公共数据并实现实时更新，可以使用 Behavior 和 Observer 来实现。以下是一个示例，展示如何在页面和组件中监听 App 中的公共数据，并在数据变化时自动更新。

1. 创建一个观察者类

首先，创建一个简单的观察者类 Observable，用于管理数据的变化和通知订阅者。

// utils/observable.js
class Observable {
  constructor(data) {
    this._data = data;
    this._observers = [];
  }

  get(key) {
    return this._data[key];
  }

  set(key, value) {
    if (this._data[key] !== value) {
      this._data[key] = value;
      this.notify();
    }
  }

  observe(callback) {
    this._observers.push(callback);
  }

  unobserve(callback) {
    this._observers = this._observers.filter((cb) => cb !== callback);
  }

  notify() {
    this._observers.forEach((callback) => callback(this._data));
  }
}

module.exports = Observable;

2. 在 App 中使用 Observable

在 app.js 中引入并使用 Observable 类。

// app.js
const Observable = require("./utils/observable");

App({
  globalData: new Observable({
    sharedData: {
      message: "Initial Message",
    },
  }),

  onLaunch: function () {
    console.log("App launched");
  },

  setGlobalData: function (key, value) {
    this.globalData.set(key, value);
  },
});

3. 创建一个 Behavior 来监听公共数据

创建一个 Behavior，并在其中设置对 App 公共数据的监听。

// behaviors/global-data-listener.js
const app = getApp();

module.exports = Behavior({
  data: {
    sharedData: {},
  },

  attached: function () {
    // 订阅全局数据的变化
    const that = this;
    app.globalData.observe(function (changes) {
      if (changes.hasOwnProperty("sharedData")) {
        that.setData({ sharedData: changes.sharedData });
      }
    });

    // 初始化数据
    this.setData({ sharedData: app.globalData.get("sharedData") });
  },

  detached: function () {
    // 取消订阅（可选）
    app.globalData.unobserve();
  },
});

4. 在组件中使用 Behavior

在需要监听 App 公共数据的组件中引入这个 Behavior。

组件示例

// components/my-component/my-component.js
Component({
  behaviors: [require('../../behaviors/global-data-listener')],

  properties: {
    // 定义属性
  },

  methods: {
    // 组件的方法
  }
});

// components/my-component/my-component.wxml
<view>
  <text>Shared Data: {{sharedData.message}}</text>
</view>

5. 在页面中使用组件

在页面中引入并使用组件。

<!-- pages/index/index.wxml -->
<view>
  <text>Shared Data: {{sharedData.message}}</text>
  <button bindtap="updateGlobalData">Update Global Data</button>
  <my-component />
</view>

页面示例

// pages/index/index.js
const app = getApp();

Page({
  behaviors: [require("../../behaviors/global-data-listener")],

  data: {
    localMessage: "Local Message",
  },

  onLoad: function () {
    console.log("Page loaded");
  },

  updateGlobalData: function () {
    const newData = { message: "Updated Message" };
    app.setGlobalData("sharedData", newData);
  },
});

6. 确保路径正确

确保 global-data-listener.js 文件的路径是正确的。假设你的项目结构如下：

project
├── app.js
├── utils
│   └── observable.js
├── behaviors
│   └── global-data-listener.js
├── pages
│   └── index
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
└── components
    └── my-component
        ├── my-component.js
        ├── my-component.json
        ├── my-component.wxml
        └── my-component.wxss

7. 检查控制台输出

如果仍然报错，请检查微信开发者工具的控制台输出，查看具体的错误信息。常见的问题包括路径错误、文件名错误等。

8. 清理缓存

有时候微信开发者工具可能会有缓存问题，尝试清理缓存或重启开发者工具。

9. 使用相对路径

确保你在 require 时使用的是相对路径。例如，在 pages/index/index.js 和 components/my-component/my-component.js 中引入 Behavior 时，路径应该是 ../../behaviors/global-data-listener。

通过以上步骤，你应该能够在 App 中的数据发生变化时，自动更新到所有使用了 global-data-listener Behavior 的组件中。这样就实现了公共数据变更后的实时同步。希望这些示例能够帮助你更好地理解和实现微信小程序中的数据监听和更新。