快捷導(dǎo)航

微信小程序在其他頁面監(jiān)聽globalData中值的變化

更新時(shí)間：2019年07月15日 10:18:01 作者：甚時(shí)躍馬歸來

這篇文章主要給大家介紹了關(guān)于微信小程序如何在其他頁面監(jiān)聽globalData中值的變化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

這幾天去面試，多次碰到同一個(gè)知識點(diǎn)。而且有一次面試挺有趣的，是關(guān)于小程序的。共有3個(gè)問題。

1、小程序中Page.watch()方法是做什么用的？

2、小程序中如何在其他頁面中監(jiān)聽到globalData中值的變化？

3、如果在app.js執(zhí)行登錄部分的代碼，由于時(shí)序問題，如何處理其他頁面請求時(shí)未獲取到身份識別標(biāo)記的情況。（session，userid等）。（大意是：怎么能夠保證其他頁面請求是在登錄之后？）

知識點(diǎn)

有經(jīng)驗(yàn)的同學(xué)可能一下子就看出來了，這其實(shí)說的是同一個(gè)東西，那就是Object.defineproperty()這個(gè)方法。

下面我來嘗試回答一下：

第一題：小程序中并沒有Page.watch()方法，但其實(shí)這里面試官的要問的東西就是第二題的題目，也就是屬性監(jiān)聽器。

第二題：由于要監(jiān)聽到globalData中的值的變化，所以一般要在globalData改變時(shí)回調(diào)一個(gè)方法。例如我們監(jiān)聽一個(gè)name屬性，大致代碼如下：

// app.js中
//app.js
App({
 onLaunch: function () {
 let that = this
 // 在這里用定時(shí)器模擬網(wǎng)絡(luò)請求的過程
 setTimeout(function(){
  that.globalData.name = 'pxh'
 },3000) 
 },
 // 這里這么寫，是要在其他界面監(jiān)聽，而不是在app.js中監(jiān)聽，而且這個(gè)監(jiān)聽方法，需要一個(gè)回調(diào)方法。
 watch:function(method){
 var obj = this.globalData;
 Object.defineProperty(obj,"name", {
  configurable: true,
  enumerable: true,
  set: function (value) {
  this._name = value;
  console.log('是否會被執(zhí)行2')
  method(value);
  },
  get:function(){
  // 可以在這里打印一些東西，然后在其他界面調(diào)用getApp().globalData.name的時(shí)候，這里就會執(zhí)行。
  return this._name
  }
 })
 },
 globalData: {
 userInfo: null,
 _name:'msr'
 }
})


// 然后在index.js中的聲明周期中實(shí)現(xiàn)
onLoad: function (options) {
 let that = this;
 getApp().watch(that.watchBack)
 },
 watchBack: function (name){
 console.log(22222);
 console.log('this.name==' + name)
 }

看看執(zhí)行效果（可以看到，我們在其他界面完美實(shí)現(xiàn)了監(jiān)聽到globalData的變化）