微信小程序onload()和onshow()的使用

最新推荐文章于 2026-02-11 03:54:47 发布

原创最新推荐文章于 2026-02-11 03:54:47 发布 · 8k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文探讨了微信小程序中onLoad和onShow的生命周期区别。onLoad在页面加载时调用，用于获取参数；onShow在页面显示时调用，包括启动或从隐藏到显示，可被多次调用。文章通过实例分析了如何在页面跳转时传递参数以及如何实现在页面间同步刷新数据。

微信小程序onload()和onshow()的使用

声明周期onLoad与onShow的区别？

onLoad页面加载时调用，可以获取参数，通过options，只调用一次。
onShow页面显示时调用(启动/页面从隐藏到启动)，可调用多次。

业务场景

一、跳转携带参数

从A页面跳转到B页面，B页面读取传递过来的参数

A页面

    goChangeNickname: function() {
        var name = this.data.nickname;      
        wx.navigateTo({
            url: "/pages/edit-partial-info/index?type=nickname&nickname="+name
        });
    },

B页面

  //页面加载时
  onLoad: function (options) {
    var me = this;
    console.log(options);
    debugger;
    me.setData({
      nickname: options.nickname,
      intro: options.intro,
      type: options.type
    })
  }

二、页面间同步刷新数据

总共有AB先后两个页面，同时显示相同的数据。

现在在B页面修改完数据，返回，A页面同步更新

这里涉及到页面从隐藏到启动，因此使用onShow()

  //页面加载时
  onShow: function (options) {
    var me = this;
    var user = app.getGlobalUserInfo();
    var serverUrl = app.serverUrl;
    // 调用后端
    wx.request({
      url: serverUrl + '/user/queryUserInfo?userId=' + user.id,
      method: "GET",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        var result = res.data.data;
        if (res.data.status == 200) {
          me.setData({
            type: me.options.type,
            userId: result.id,
            avatarUrl: result.avatarUrl,
            nickname: result.nickName,
            intro: result.intro,
            sex: result.gender,
            college: "",
            grade: result.grade
          })
        }
      },
      fail: function () {
        console.log("获取用户信息失败~~")
      }
    })
  },