微信小程序:App与Page构造器

328 阅读4分钟

App与Page构造器

App 构造器

App构造器位于 app.js 里面,整个应用只有这一个

生命周期钩子函数

如果你有 vue 或者 react 的开发经验,那么生命周期钩子函数也是非常熟悉的。所谓生命周期钩子函数,就是在一些固定的时间点自动触发的函数。

在 App 构造器中,我们能够书写的生命周期钩子函数如下:

image-20230111133925087

什么叫做进入后台状态?

用户点击右上角的关闭按钮,或者按手机设备的Home键离开小程序,此时小程序并没有被销毁,这种情况称为“小程序进入后台状态”。

注意,onLaunch、onShow 这两个生命周期钩子函数是接收一个参数的。

因为打开小程序的方式多种多样,有些时候,我们需要根据不同的打开方式,做一些不同的业务处理。

示例如下:

image-20230111134912620

获取全局数据

在微信小程序中,我们有些时候需要不同的页面共享一些公共的数据。

在诸如 vue、react 这种框架中,有专门的状态处理库,在微信小程序中,通过的是 globalData 来共享数据。

globalData 位于 App 构造器中,如下图:

image-20230111135222913

其他页面如何获取公共的数据?

非常简单,在各个页面的 js 文件中,通过 getApp 函数首先获取到 App 的实例,之后访问该实例的 globalData 数据即可

const app = getApp()
console.log("globalData: ",app.globalData);

有一点一定要注意,虽然在小程序中有多个页面,但是多个页面的 JS 跑在一个线程中,这也就意味着假设你在当前页面设置了定时器,从一个页面跳到另外一个页面,之前所设置的计时器并不会被清除掉。所以需要我们在离开页面的时候手动的来清理掉这些计时器。

另外还有一点,虽然我们通过 getApp 能够获取到 App 的实例,但是一般仅仅是拿来获取 globalData,不要去主动调用生命周期钩子函数,生命周期钩子函数应当是在对应的时间点主动触发的。

Page 构造器

Page构造器位于每个页面的 JS 下面。

我们之前实际上已经接触过一个 Page 构造器的配置项,那就是 data。通过配置 data 里面的数据,可以指定在页面中渲染一些动态的数据。

生命周期钩子函数

Page 除了配置 data 配置项以外,还以配置相应的生命周期钩子函数。

能够配置的选项如下表:

image-20230111140518750
  • onLoad:页面销毁之前会调用一次,当前页面已经加载好了
  • onShow:每次当前页面被显示的时候会调用
  • onReady:页面销毁之前会调用一次,表示当前页面已经渲染完毕

什么算是页面销毁?或者说什么时候页面会被销毁?

当前页面使用wx.redirectTo或wx.navigateBack返回到其他页时,当前页面会被微信客户端销毁回收

和 App 构造器中的生命周期钩子函数相同,不要去主动调用,而是应该在对应的时间点自动触发。总之你记住,只要是生命周期钩子函数,都应该是自动的触发,而不应该去手动的调用。

关于参数的传递

在进行页面跳转的时候,往往存在一种情况,就是当前页面需要传递一个 id 给新的页面,新的页面就根据当前这个 id 显示详情信息。

在跳转的时候,可以通过如下的方式来进行跳转:

wx.navigateTo({ url: '/pages/detail/detail?id=1&other=abc' })

实际上就和我们 GET 请求传参是一样的。

接下来的问题就是新的页面如何拿到这个参数?

在 onLoad 生命周期钩子中,可以接收一个参数,通过该参数就能够拿到前一个页面传递过来的参数:

Page({
  onLoad: function(option) {
      console.log(option.id)
      console.log(option.other)
  }
})

data 中配置数据

最后就是关于设置 Page 构造器中 data 里面数据的问题,通过 this.setData 来进行设置。该方法接收两个参数,一个是新的数据,另一个是页面随着数据更新重新渲染后的回调函数。

editTestHandle(){
  this.setData({
    test : "aaaaaa"
  }, function(){
    console.log("修改完毕,页面已经更新了")
  })
}

设置的时候,只需要设置更新的数据即可。

同时还有如下的注意点:

  1. 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
  2. 由于setData是需要两个线程的一些通信消耗,为了提高性能,每次设置的数据不应超过1024kB。
  3. 不要把data中的任意一项的value设为undefined,否则可能会有引起一些不可预料的bug。

官方文档:developers.weixin.qq.com/ebook?actio…