微信小程序——监听全局变量改变则运行某个方法、A页面触发B页面的某个方法（非页面栈）、组件（observers监听某个值的变化）

1、监听全局变量改变则运行某个方法

场景1：微信小程序首页页面渲染快，wx.login是异步执行慢，导致首页中变量不是最新的
app.js代码：

// app.js
App({
    watch: function (method) {
        //监听函数
        var obj = this.globalData
        Object.defineProperty(obj, 'clock', {
            configurable: true,
            enumerable: true,
            set: function (value) {
                this._name = value;
                method(value);
            },

            get: function () {
                return this._name
            }
        })
    },

    globalData: {
        clock: "" //要监听的变量
    },

    onLaunch: function () {
       let that=this
        // 登录
        wx.login({
            success: res => {
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
                console.log("login成功")
                that.globalData.clock="22"//改变clock的值，使得触发监听
            }
        })
    }
})

index.js的代码：

// pages/index1/index1.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        typeList: 1
    },
    watchBack: function (value) {
        //要执行的方法        
        console.log("==这里可以运行指定的方法==")
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let that = this;
        getApp().watch(that.watchBack) //注册监听
        console.log("页面onLoad")
    },

   
})

2、A页面触发B页面的某个方法(由上面1衍生)

项目结构：

app.js页面代码：

// app.js
App({
    watch: function (method) {
        //监听函数
        var obj = this.globalData
        Object.defineProperty(obj, 'clock', {
            configurable: true,
            enumerable: true,
            set: function (value) {
                this._name = value;
                method(value);
            },

            get: function () {
                return this._name
            }
        })
    },

    globalData: {
        clock: "" //要监听的变量
    },

    onLaunch: function () {
    
    }

})

index.js页面代码：

// pages/index1/index1.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        typeList: 1
    },
    watchBack: function (value) {
        //要执行的方法        
        console.log("==这里可以运行指定的方法==")
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let that = this;
        getApp().watch(that.watchBack) //注册监听
        console.log("页面onLoad")
    },

    gotoindex2(e) {
        wx.navigateTo({
            url: '../index1/index1',
        })
    }


})

index.wxml页面代码：

<view class="container">
  <button type="primary" bindtap="gotoindex2">跳转</button>
</view>

index1.js页面代码：

// pages/index1/index1.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },

    setClockVaule(){
        getApp().globalData.clock="33" //改变全局变量clock的值，使得触发监听
    }
})

index1.wxml页面代码：

<button type="primary" bindtap="setClockVaule">触发改变全局变量clock的值</button>

3、子组件–监听某个值的变化：

 observers: {
          'typeList': function(typeList) {
            // 在 typeList被设置时，执行这个函数
            // console.log("typeList有改变触发------------>",typeList)          
          }
        },

放在与 methods方法同级的位置