发布时间:2023-05-06 文章分类:WEB开发, 电脑百科 投稿人:李佳 字号: 默认 | | 超大 打印

小程序问题:封装公共组件的onLoad方法不生效

素材编辑 | 宋大狮

排版运营 | 小唐狮

ONE 问题描述

因为许久没有接触小程序项目,今天在做小程序项目时,为了节省时间,将要修改的页面组件直接拿出来封装成了公共组件,同时也没多想就直接使用了。于是就出现了页面数据不能加载的问题,在一番打印查找之后,发现是组件中onLoad方法一直没有执行,导致内部的方法没有调用,表格里的数据没有拿到。

小程序问题:封装公共组件的onLoad方法不生效

TWO 解决过程

尝试一:

思路:onLoad方法没有执行,考虑是否是页面未重新加载导致。

实现:使用onShow方法,把onLoad方法中的函数搬到onLoad方法中调用。

结果:失败,onShow方法依然没有执行。

小程序问题:封装公共组件的onLoad方法不生效

尝试二:

思路:既然不是声明周期的问题,考虑是否有其它Api可用。

实现:在网上一番搜索,并查阅微信小程序开发文档,发现创建页面组件用的是Page构造器,创建公共组件用的是Component构造器。然后在Component构造器的lifetimes配置项中,使用与onLoad方法同等作用的attached 方法,发现内部的方法成功调用,拿到表格数据。

结果:成功,表格数据成功渲染。

小程序问题:封装公共组件的onLoad方法不生效

THERE 知识总结

总结一:

小程序创建公共组件。

Component({
    // 用于监听 properties 和 data 的变化
    behaviors: [],

    // 属性定义
    properties: {
        // 未简化的定义方式
        myProperty: { 
        type: String,
        value: ''
        },
        // 简化的定义方式
        myProperty2: String 
    },

    // 数据定义,可用于模板渲染
    data: {}, 

    // 组件生命周期声明对象(最重要的生命周期是 created attached detached)
    lifetimes: {
        // 在组件实例刚刚被创建时执行
        created: function () { },
        // 在组件实例进入页面节点树时执行
        attached: function () { },
        // 在组件实例被从页面节点树移除时执行
        detached: function () { },
    },

    // 组件所在页面的生命周期声明对象
    pageLifetimes: {
        // 页面被展示
        show: function () { },
        // 页面被隐藏
        hide: function () { },
        // 页面尺寸变化
        resize: function () { },
    },

    // 组件的方法
    methods: {
        onMyButtonTap: function(){
            this.setData({
                // 更新属性和数据的方法与更新页面数据的方法类似
            })
        },
    }
})

总结二:

小程序创建页面组件。

Page({
  // 数据定义,可用于模板渲染
  data: {
    text: "This is page data."
  },

  // 监听页面加载
  onLoad: function () { },

  // 监听页面显示
  onShow: : function () { },

  // 监听页面初次渲染完成
  onReady: : function () { },

  // 监听页面隐藏
  onHide: : function () { },

  // 监听页面卸载
  onUnload: : function () { },

  // 页面的方法
  onTabItemTap () { },
})

总结三:

uni中组件onLoad方法不执行解决

uni中,在页面当中引用公共组件时onLoad方法不执行 ,可以使用vue自带生命周期函数created、mounted ,或者使用$refs获取组件中的方法并调用来解决。

FOUR 集思广益

欢迎各位大佬对此类问题留言或私信指教,让大家一起学习提高!

- END -

ABOUT 关于作者