微信小程序全局变量监听

微信小程序的 app.js ，作用是：

👉 定义全局数据、初始化程序、并实现一个"全局监听数据变化"的工具方法。

我按「整体作用 → 每一块解释 → 具体使用例子」一步步给你讲，保证你能用得上。

一、整体在干什么？（一句话版）

这是小程序的全局入口文件，用来
初始化全局数据、保存公共状态、并实现一个类似 Vue watch 的监听机制。

二、逐段解释代码含义

1、App({}) ------ 小程序的入口

复制代码

App({

整个小程序 只会有一个 App
所有页面都能通过 getApp() 访问这里的数据和方法

2、生命周期：onLaunch / onShow

复制代码

onLaunch() {
  const tabarList=[]
  tabarList.push("agriculturalproductinformation")
  tabarList.push("cart")
  this.globalData.tabarList=tabarList
},

含义：

onLaunch：小程序第一次启动时执行
这里初始化了一个 tabarList（底部导航可见页面）

📌 最终效果：

复制代码

globalData.tabarList = [
  "agriculturalproductinformation",
  "cart"
]

4️⃣ setWatcher ------ 自定义"监听器"

复制代码

setWatcher(data, watch) {
  Object.keys(watch).forEach(v => {
    this.observe(data, v, watch[v]);
  })
}

作用：

👉 监听 data 中某个属性的变化，一变就执行回调

这是在模拟：

Vue 的 watch
React 的状态监听

5️⃣ observe ------ 真正监听变化的核心

复制代码

observe(obj, key, watchFun) {
  var val = obj[key];
  Object.defineProperty(obj, key, {
    set(value) {
      val = value;
      watchFun(value, val);
    },
    get() {
      return val;
    }
  })
}

含义：

使用 Object.defineProperty
重写属性的 get / set
当你 给某个变量重新赋值时，自动执行监听函数

📌 重点：

不是微信自带的，这是你们自己写的高级用法

6️⃣ globalData ------ 全局数据仓库

复制代码

globalData: {
  name: null,
  goodsList: [],
  detailList: {},
  detailId: null,
  tabarList:[],
  userInfo:{},
  total:"",
  editorContent:''
}

作用：

存储整个小程序都可能用到的数据
类似「全局状态管理」

三、举一个【真实可用】的例子 🌰

🎯 场景：监听商品总价变化

① 页面中使用 setWatcher

复制代码

const app = getApp()

Page({
  data: {
    total: 0
  },

  onLoad() {
    app.setWatcher(this.data, {
      total: (newVal) => {
        console.log('总价变化了：', newVal)
      }
    })
  },

  addPrice() {
    this.setData({
      total: this.data.total + 10
    })
  }
})

② 点击按钮触发变化

复制代码

<button bindtap="addPrice">加 10 元</button>

③ 控制台输出

复制代码

总价变化了： 10
总价变化了： 20

📌 这就是 setWatcher + observe 的实际效果

四、为什么要这样写？

不用这个监听，会怎样？

只能在当前页面处理
页面之间不好同步数据

用了它：

全局数据一变，自动响应
适合：
- 购物车总价
- 登录状态
- tabBar 显示/隐藏
- 富文本编辑内容同步

五、一句话总结（你可以直接背）

这段代码用于初始化微信小程序的全局状态，并通过 Object.defineProperty 实现对数据变化的监听机制，使程序能够在数据变更时自动执行对应逻辑，提升了系统的响应性和可维护性。

如果你愿意，我可以帮你：

把这套 监听机制改成更安全的写法
或直接告诉你 哪些地方不推荐这样用（面试加分点）
或结合你的 农产品购物车做一个完整示例

项目例子：

app.js

复制代码

App({
  globalData: {
    cartTotal: 0
  },

  // 监听器注册
  setWatcher(data, watch) {
    
    Object.keys(watch).forEach(key => {
      console.log("key",key)
      this.observe(data, key, watch[key])
      console.log("watch",watch[key])
    })
   
  },

  observe(obj, key, watchFun) {
    let val = obj[key]
    console.log("val",val)
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set(value) {
        val = value
        watchFun(value)
      },
      get() {
        return val
      }
    })
  }
})

test页面

test.js

复制代码

// pages/test/test.js
const app=getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ko:1,
    total:10
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.setData({
      ko: this.data.ko
    })

    // 监听 total 变化
    app.setWatcher(this.data, {
      total: (newVal) => {
        console.log('购物车总价变化为：', newVal)
      }
    })
    console.log("this.data",this.data)
  },

  addMore() {
    this.setData({
      ko: this.data.total + 5
    })
  }
})

test.wxml

复制代码

<!--pages/test/test.wxml-->
<text>pages/test/test.wxml</text>
<button bind:tap="addMore">增加</button>