【微信小程序】.js文件的代码结构与Page页面的生命周期

在这里插入图片描述

🏆今日学习目标：第十期——.js文件的代码结构与page页面的生命周期 😃创作者：颜颜yan_ ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：25分钟 🎉专栏系列：我的第一个微信小程序

文章目录

• 前言
• .js文件默认代码结构
• 页面的生命周期
  • 生命周期函数
  • 特定事件处理函数
• 总结

前言

哈喽大家好，本次是微信小程序专栏的第十期。上期post页面已经完成，本期将为该页面加入js啦。 本期的主要内容是了解.js文件的代码结构与Page页面的生命周期，后续应用会详细讲解噢~ 注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~

.js文件默认代码结构

如下是js文件的默认代码结构。默认代码结构包含了我们可能使用到的代码结构，整个页面执行了一个Page({...})方法，参数是一个Object对象，用来指定页面的初始数据（data）、生命周期函数（on开头的函数）、事件处理函数等。

// pages/post/post.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     * option为页面跳转所带来的参数
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

页面的生命周期

生命周期函数

一个页面从创建到卸载，会经历加载、显示、渲染、隐藏、卸载 五个周期。 MINA框架分别提供了5个生命周期函数来监听这5个特定的生命周期，以方便开发者可以在这些特定的时刻执行一些自己的代码逻辑，它们分别是：

1. onLoad：监听页面加载，一个页面只会调用一次。
2. onShow：监听页面显示，每次打开页面都会调用。
3. onReady：监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
4. onHide：监听页面隐藏。
5. onUnload：监听页面卸载。

接下来，我们做一个小测试来了解生命周期函数的触发时机。

在这里插入图片描述

可以看到，一个页面要正常显示，必须经历3个生命周期：加载、显示、渲染，执行顺序：onLoad、onShow、onReady。 注意：onShow的执行时刻是在onReady之前。

在这里插入图片描述

注意：

• onHide和onUnload这两个函数的触发需要执行一些API操作。当页面执行navigateTo方法或者使用小程序tab栏切换页面时会执行onHide函数，当页面执行redirectTo或者navigateBack的时候会执行onUnload函数。 - onLoad与onReady在整个页面的生命周期中只会执行1次，除非这个页面被执行力onUnload卸载掉了。
• onHide与onShow在一次生命周期中可能会执行多次。
• 小程序仅在第一次First Render完成后，提供了监听函数onReady。onReady仅用来监听“第一渲染”完成。

特定事件处理函数

1. onPullDownRefresh：监听用户下拉动作的事件处理函数。
2. onReachBottom：页面上拉触底事件的处理函数。
3. onShareAppMessage：用户点击右上角分享。

总结

以上就是今天的学习内容啦~ 如果有兴趣的话可以订阅专栏，持续更新呢~ 咱们下期再见~