uniapp小知识点一

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

uniapp的生命周期分两种应用生命周期和页面生命周期

1. 应用生命周期，仅在App.vue里使用应用生命周期函数钩子

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化

App.vue代码

// 只能在App.vue里监听应用的生命周期 
export default { 
    onLaunch: function() {
        console.log('App Launch') 
    }, 
    onShow: function() { 
        console.log('App Show') 
    }, 
    onHide: function() { 
        console.log('App Hide') 
    } 
} 

2. 常用的页面生命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序
onPageScroll	监听页面滚动，参数为Object	nvue暂不支持
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序	2.8.1+

小程序检查版本升级 工具函数

function checkMiniProgramUpdate(){
    const updateManager = uni.getUpdateManager();
    updateManager.onCheckForUpdate(res=> {
    // 请求完新版本信息的回调
    // console.log(res.hasUpdate);
    if(res.hasUpdate){
        updateManager.onUpdateReady(readyRes=> {
            uni.showModal({
                title: '更新提示',
                content: '新版本已经准备好，是否重启应用？',
                success:res => {
                    if (res.confirm) {
                        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                        updateManager.applyUpdate();
                    }
                }
            });
        });
    }
    });

    updateManager.onUpdateFailed(res=>{
        // 新的版本下载失败
        console.log("🚀 ~ file: App.vue ~ line 26 ~ res", res)
        uni.showModal({
            title: "已经有新版本了哟~",
            content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~"
        });
    });
}