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

Cet article vous apporte des connaissances pertinentes sur le cycle de déclaration uniapp. Il présente principalement les problèmes liés au cycle de déclaration des applications, au cycle de vie des pages et au cycle de vie des composants. J'espère qu'il sera utile à tout le monde.

Recommandé : "tutoriel uniapp"

Cycle de vie des applications

uni-app prend en charge les fonctions de cycle de vie des applications suivantes : uni-app 支持如下应用生命周期函数：

函数名

说明

onLaunch

当uni-app 初始化完成时触发（全局只触发一次）

onShow

当 uni-app 启动，或从后台进入前台显示

onHide

当 uni-app 从前台进入后台

onError

当 uni-app 报错时触发

onUniNViewMessage

对 nvueonLaunchDéclenché lorsque l'initialisation de uni-app est terminée (globale Déclenché une seule fois) onShowLorsque uni-app est lancé ou passe au premier plan depuis l'arrière-plan onHideLorsque uni-app entre au premier plan L'arrière-plan onError

Nom de la fonction	Description

🎜 est déclenché lorsque uni-app signale une erreur🎜🎜🎜🎜onUniNViewMessage🎜🎜 pour surveiller les données envoyées par le nvue page, veuillez vous référer à nvue pour vue Communication🎜🎜🎜🎜onUnhandledRejection🎜🎜Fonction d'écoute d'événement de rejet pour Promise (2.8.1+) non gérée🎜🎜🎜🎜onPageNotFound🎜🎜La page n'a pas de fonction d'écoute🎜🎜🎜🎜onThemeChange 🎜🎜Changement de thème du système d'écoute🎜🎜🎜🎜

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

onPageNotFound La page a effectivement été ouverte (par exemple, en partageant une carte, code Mini programme) et on constate que la page n'existe pas, elle sera déclenchée. Le saut de l'API vers la page qui n'existe pas ne sera pas déclenché (comme uni.navigateTo)

Cycle de vie des pages

uni-app prend en charge les fonctions de cycle de vie des pages suivantes : version minimale3.1.0+App, applet WeChat. onPullDownRefreshSurveillez les actions déroulantes de l'utilisateur, généralement utilisées pour l'actualisation déroulante, reportez-vous à l'exempleonReachBottomL'événement lorsque la page défile vers le bas (ne défile pas -vue vers le bas), souvent utilisé pour dérouler la page de données suivante. Pour plus de détails, consultez les notes ci-dessousApplet WeChat, applet QQ, applet Alipay. Applet Baidu, H5, ApponShareAppMessageLes utilisateurs cliquent sur le coin supérieur droit pour partageronNavigation BarSearchInputConfirmed Écouter les titres natifs Événement de recherche de la zone de saisie de recherche dans la barre, déclenché lorsque l'utilisateur clique sur le bouton « Rechercher » du clavier virtuel. App, H51.6.0onNavigationBarSearchInputClickedonShareTimelineonAddToFavorites

onInit Notes d'utilisationonInit使用注意

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

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

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

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

	nom de la fonction	description	description de la différence de plate-forme
	onInit	écoute Initialisation de la page, ses paramètres sont les mêmes que les paramètres onLoad, qui sont les données transmises sur la page précédente. Le type de paramètre est Object (utilisé pour les paramètres de la page. ). L'heure de déclenchement est antérieure à onLoad	Baidu Mini Program
	onLoad	Écoutez le chargement de la page. Son paramètre est les données transmises sur la page précédente. pour les paramètres de la page). Référez-vous à l'exemple
	onShow	pour surveiller l'affichage de la page. Déclenché chaque fois que la page apparaît à l'écran, y compris le retour de la page de niveau inférieur pour révéler la page actuelle
	onReady	écoute pour l'achèvement du rendu initial de la page. Notez que si la vitesse de rendu est rapide, elle sera déclenchée avant que l'animation d'entrée de page ne soit terminée. Désinstallation de la page
	onResize	Surveiller les changements de taille de la fenêtre
	onTabItemTap	Déclenché lorsque l'on clique sur l'onglet. Le paramètre est Objet. Pour plus de détails, veuillez consulter les notes ci-dessous
		Applet WeChat, applet QQ, applet Alipay, applet Byte, applet Feishu, applet Kuaishou
onPageScroll	Écoutez le défilement des pages, le paramètre est Object	nvue n'est pas encore pris en charge
onNavigationBarButtonTap	Écoutez l'événement de clic sur le bouton de la barre de titre natif, le paramètre est Object	App, H5
onBackPress	Écoutez le retour de la page, événement de retour = {from:backbutton, naviguerBack}, le bouton de retour signifie que la source est le bouton de retour dans le coin supérieur gauche ou la touche de retour Android naviguerBack signifie que la source est ; uni.navigateBack ; Description détaillée et utilisation : explication détaillée de onBackPress. L'applet Alipay ne peut être déclenchée que par une machine réelle, ne peut surveiller que les retours qui ne sont pas provoqués par NavigBack et ne peut pas empêcher le comportement par défaut.	app, H5, applet Alipay
onNavigationBarSearchInputChanged	Surveiller l'événement de changement de contenu d'entrée de la zone de saisie de recherche de la barre de titre native	App, H5	1.6.0
Écoutez l'événement de clic sur la zone de saisie de recherche de la barre de titre native (déclenché uniquement lorsque la configuration searchInput désactivée dans pages.json est vraie)	App, H5	1.6 .0
Écoutez les utilisateurs qui cliquent sur le coin supérieur droit pour transférer vers Moments	Applet WeChat	2.8.1+
Moniteur pour que les utilisateurs cliquent en haut à droite coin pour la collection	Applet WeChat	2.8 .1+

属性	类型	说明
scrollTop	Number	页面在垂直方向已滚动的距离（单位px）

注意

• 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对象说明：

属性	类型	说明
index	String	被点击tabItem的序号，从0开始
pagePath	String	被点击tabItem的页面路径
text	String	被点击tabItem的按钮文字

注意

• 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 参数说明：

属性	类型	说明
index	Number	原生标题栏按钮数组的下标

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éé

onReachBottomLa note d'utilisation peut être trouvée dans les pages. Définissez la distance de déclenchement onReachBottomDistance au bas d'une page spécifique dans json. Par exemple, si elle est définie sur 50, alors lorsque la page défile à 50 pixels à partir du. en bas, l'événement onReachBottom sera déclenché. Si la vue par défilement est utilisée et que la page ne défile pas, l'événement du bas ne sera pas déclenché. Pour les événements où scroll-view défile vers le bas, veuillez vous référer au document de scroll-view Attributs TypeDescription NuméroLa distance à laquelle la page a défilé dans le sens vertical (unité px)

onPageScroll (écoute de défilement, écoute de défilement, événements de défilement) Description du paramètre :
		scrollTop

🎜🎜🎜🎜🎜Remarque🎜🎜

• 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)
    }
}

🎜onTabItemTap Description de l'objet json renvoyé : 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜String🎜🎜Le numéro de série de l'onglet cliqué, à partir de 0🎜 🎜🎜 🎜pageP ath🎜🎜String🎜🎜 Le chemin de la page de l'onglet cliqué🎜🎜🎜🎜text🎜🎜String🎜🎜Le texte du bouton de l'onglet cliqué🎜🎜🎜🎜🎜🎜Note🎜🎜

• 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

rrreee🎜onNavigationBarButtonTap Description du paramètre : 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜Number🎜🎜L'indice du tableau de boutons de la barre de titre natif🎜🎜 🎜🎜rrreee🎜on BackPress rappel Description de l'objet paramètre : 🎜🎜🎜🎜🎜Attributes🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜from🎜🎜String🎜🎜Source du déclenchement du comportement de retour : 'backbutton' - navigation dans le coin supérieur gauche bouton de barre et touche de retour Android ; 'navigaBack'——méthode uni.navigateBack(). 🎜L'applet Alipay ne prend pas en charge le renvoi de ce champ🎜🎜🎜🎜🎜

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

注意

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

组件生命周期

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

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

推荐：《uniapp教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!