小程序的一个页面对象

2023-10-18 19:37:22

全局对象globalData

在app.js中我们可以定义一个globalData全局变量(默认已经定义)，这个变量将会在内存中全局保存，可以用来保存整个小程序的一些公用的数据，例如当前用户的数据，其他页面页可以非常方便的访问获取该全局变量数据。只需要通过内部函数app=getApp() 获取模块对象app，然后通过app.globalData访问app中定义globalData值，同时也可以进行修改。

app.js

App({
  //当小程序初始化启动，会触发 onLaunch（全局只触发一次）
  onLaunch: function () {
  },
  // 定义一个全局的变量globalData，内部定义了一个用户信息
  globalData:{
    userInfo: null, 
  }
})

在其他任意的页面中，通过导入app模块，从而使用全局的globalData信息。

var app = getApp();     // 获取全局模块app
Page({
    data: {
      },
      onShow:function(){       // 该函数每次页面加载都会执行
          app.globalData.userInfo   // 访问全局变量
      }
});

注意：修改一个页面修改globalData之后，其他页面不会立即自动变化，因为页面并不会自动加载更新全局，可以在需要及时更新的模块中调用setData刷新，获取最新的globalData。

globalData对象是保存在内存中，客户端小程序每次退出时都会清理该值，如果想要下次启动小程序时候自动加载该数据，需要将数据持久化到本地存储中。下次打开小程序时，从本地存储中读取数据再次创建globalData。涉及的几个操作本地储存的api如下

wx.getStorageSync(‘userInfo‘);             // 获取本地储存中的userinfo对应的值
wx.setStorageSync(‘userInfo‘,globalData.userinfo);   // 保存globalData中的数据。
wx.removeStorageSync("userInfo")           // 删除本地存储

在globalData中的同级变量中，还存在一个内置的钩子函数 -- onLaunch，该函数在每次启动小程序时候会自动加载，所以在该方法中去读取上次退出时的本地文件信息就比较适合。

onLaunch: function () {
    var userinfo = wx.getStorageSync(‘userInfo‘); 
    globalData.Userinfo = userinfo
  },

在需要时候我们可以手动的调用api持久化globaldata中的，例如保存用户信息时，在用户登录之后就将数据持久化保存，而用户退出时删除这些持久化的数据即可。

App({

  // 每次启动小程序时候，尝试在本地文件中加载用户信息
  onLaunch: function() {
    var userInfo = wx.getStorageSync(‘userInfo‘);
    if (userInfo) {
      this.globalData.userInfo = userInfo;
    }
  },
  // 全局值 
  globalData: {
    userInfo: null
  },
  // 当用户登录之后，会调用函数，并传入用户数据，进行持久化的保存
  initUserInfo: function(tokenInfo, userInfo) {
    var info = {
      nickName: tokenInfo.nickName,
      avatarUrl: tokenInfo.avatarUrl,
      token: tokenInfo.token,
      phone: tokenInfo.phone
    };
    this.globalData.userInfo = info   // 保存到globalData中
    wx.setStorageSync(‘userInfo‘, info);  // 再写入文件
  },

  // 登出操作，调用该函数删除持久化的数据
  logoutUserInfo:function(){
    wx.removeStorageSync(‘userInfo‘);
    this.globalData.userInfo=null;
  }
})

页面对象Data

data是保存该页面中值的地方，内部保存的可以实现小程序前端的双向绑定，当然默认是单向的，也就是说，data中定义了变量A，小程序在前端使用{{A}}的语法使用了A变量，那么该A变量在前端显示的值就是data中变量A的值。同时，如果data中的A变量的值被改变，前端页面显示的值也会进行改变。

setData

想要在改变data中值的同时，同时改变前端值，需要使用setData函数去重新设置该key对应的值。例如

data:{
    A:123
    B:[
        {
            name:"top",
            "age":32
        }
        {
            name:"tom",
            age:23
        }
    ]
}
clickchange:function(){
    this.setData({A:100})   // 修改A
    this.setData({B: ["B[1].age"]:18 })   // 局部修改B中tom的年纪，其他不变
}

简单定义了一个函数，在函数中执行了this.setdata方法，分别修改A和B的值，这里对B的值进行的局部修改，不能直接使用 B[1].age的方式修改，而是需要使用其字符串的形式，然后通过[]符号，setData会将字符串解析为变量的属性访问规则，从而去修改这个局部age信息。

页面的生命周期函数

页面的周期函数(执行顺序)：

onLoad（触发一次，监听页面第一次被加载）
onShow（每次展示这个页面，就会自动执行这个函数）
onReady（触发一次：监听页面初次渲染完成）
onHide（每次跳转到其他页面时候，页面隐藏，将会自动执行，例如使用naviagte的方式跳转）
onUnload（卸载页面，小程序关闭时候触发）
onPullDownRefresh（监听用户下拉动作时候触发）
onReachBottom（页面上拉触底事件的处理函数）
onShareAppMessage（用户点击右上角分享）

全局的周期函数

onLaunch 小程序启动时加载

页面调用栈

微信的各个页面在跳转中，会维护一个页面栈对象，这样可以方便的点击返回上一个页面。通过全局函数getCurrentPages可以获取当前的页面栈中的所有对象。并可以通过索引获取，例如上一个页面索引未 length - 2，当前为length -1

var pages = getCurrentPages();       // 获取页面跳转的栈信息
prevPage = pages[pages.length-2];    // 获取一个页面对象

从页面栈中获取的值其实是对应的该页面的page对象。该对象中还保存着离开页面那一刻保存的值和定义的方法。我们可以直接获取并修改这些值，例如修改上一个页面中得data，然后返回上一个页面

var pages = getCurrentPages();       // 获取页面跳转的栈信息
prevPage = pages[pages.length-2])

prePage.setData( {"abc":123} )       // 调用上一个页面的setdata修改该值即可

这个使用方式在小程序中也是非常常用，在新的页面中进行多个值的选择，并将选择的值设置到上一个页面中，返回上一个页面时候，可以使用该值进行操作。