Une analyse approfondie du cycle de vie d'uni-app

Remarque

• Le cycle de vie de l'application ne peut être surveillé que dans App.vue, et la surveillance sur d'autres pages n'est pas valide.
App.vue中监听，在其它页面监听无效。
• onlaunch里进行页面跳转，如遇白屏报错，请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答
• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

页面生命周期

uni-appSaut de page au lancement, si vous rencontrez une erreur d'écran blanc, veuillez vous référer à la note de navigation pour sauter de page dans le cycle de vie du lancement - Questions et réponses DCloud

Cycle de vie des pages

onInit Notes d'utilisationonInit使用注意

• 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
• 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
• 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档

onPageScroll （监听滚动、滚动监听、滚动事件）参数说明：

注意

• onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。
• 如果想实现滚动时标题栏透明渐变，在App和H5下，可在pages.json中配置titleNView下的type为transparent，参考。
• 如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。
• 在App、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考。
• onBackPress上不可使用async，会导致无法阻止默认返回

onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
    console.log("滚动距离为：" + e.scrollTop);
},

onTabItemTap 返回的json对象说明：

注意

• onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。
• 如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用plus.nativeObj.view放一个区块盖住原先的tabitem，并拦截点击事件。
• 支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作

onTabItemTap : function(e) {
    console.log(e);
    // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
},

onNavigationBarButtonTap 参数说明：

onNavigationBarButtonTap : function (e) {
    console.log(e);
    // e的返回格式为json对象：{"text":"测试","index":0}
}

onBackPress

• Seule la bibliothèque de base du programme Baidu Mini 3.260 ou supérieure prend en charge le cycle de vie onInit
• D'autres versions ou plates-formes peuvent utiliser le cycle de vie onLoad en même temps pour des raisons de compatibilité, veillez à éviter d'exécuter à plusieurs reprises la même logique
• La logique qui ne repose pas sur les paramètres de la page peut être directement remplacée par le cycle de vie créé

• Ne écrivez dans onPageScroll Interagissez avec des js complexes, par exemple en modifiant fréquemment la page. Parce que ce cycle de vie est déclenché dans la couche de rendu, du côté non-h5, js est exécuté dans la couche logique, et il y a une perte de communication entre les deux couches. Si l'échange de données entre les deux couches est fréquemment déclenché pendant le processus de défilement, cela peut entraîner un décalage.
• Si vous souhaitez obtenir un dégradé transparent de la barre de titre lors du défilement, dans App et H5, vous pouvez configurer le type sous titleNView dans pages.json pour qu'il soit transparent, pour référence.
• Si vous devez faire défiler le plafond pour fixer certains éléments, il est recommandé d'utiliser la mise en page collante CSS et de vous référer au marché des plug-ins. Il existe également d'autres plug-ins de plafond implémentés par js sur le marché des plug-ins, mais leurs performances ne sont pas bonnes. Vous pouvez les rechercher vous-même en cas de besoin.
• Dans App, l'applet WeChat et H5, vous pouvez également utiliser wxs pour surveiller le défilement, pour référence ; dans app-nvue, vous pouvez utiliser bindx pour surveiller le défilement, pour référence.
• async ne peut pas être utilisé sur onBackPress, ce qui entraînera l'échec de l'empêchement du retour par défaut

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

• onTabItemT ap est souvent utilisé pour cliquer sur l'onglet actuel, faire défiler ou actualiser la page actuelle. Si vous cliquez sur un autre tabitem, le changement de page sera définitivement déclenché.
• Si vous souhaitez cliquer sur un tabitem du côté de l'application sans accéder à la page, vous ne pouvez pas utiliser onTabItemTap. Vous pouvez utiliser plus.nativeObj.view pour placer un bloc pour couvrir le tabitem d'origine et intercepter le clic. événement.
• La plateforme d'applet Alipay onTabItemTap est déclenchée après avoir cliqué sur un tabitem non actuel, elle ne peut donc pas être utilisée pour mettre en œuvre l'opération de retour en haut

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

注意

• nvue 页面weex编译模式支持的生命周期同weex，具体参考：weex生命周期介绍。
• 支付宝小程序真机可以监听到非navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

推荐：《uniapp教程》