Avant-propos :
Un résumé du cycle de vie de uin-app.
Entrée officielle : site officiel d'uni-app
cycle de vie des applications
uni-app Les fonctions de cycle de vie d'application suivantes sont prises en charge :
| Nom de la fonction | illustrer |
|---|---|
| onLaunch | Déclenché lorsque l' uni-app initialisation est terminée (déclenché une seule fois globalement) |
| surAfficher | Au uni-app démarrage, ou de l'arrière-plan à l'affichage de premier plan |
| surMasquer | En uni-app passant du premier plan au second plan |
| sur erreur | uni-app Déclenché lorsqu'une erreur est signalée |
| onUniNViewMessage | Pour nvue surveiller les données envoyées par la page, vous pouvez vous référer à la communication entre nvue et vue |
| onUnhandledRejection | Écouteur d'événement pour le rejet de promesse non géré (2.8.1+) |
| onPageNotFound | Il n'y a pas de fonction d'écoute sur la page |
| onThemeChange | Surveiller les changements de thème du système |
Remarquer
- Le cycle de vie de l'application ne peut être
App.vuesurveillé que dans et n'est pas valide dans les autres pages. - Saut de page lors du lancement, si vous rencontrez une erreur d'écran blanc, veuillez vous référer à naviguer vers le saut 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 la carte, le code de l'applet) et on constate que la page n'existe pas, et la page ne sera pas déclenchée si l'api saute sur une page qui n'existe pas ( comme uni.navigateTo)
cycle de vie des pages
uni-app Les fonctions de cycle de vie de page suivantes sont prises en charge :
| Nom de la fonction | illustrer | Différence de plate-forme Description | Version minimale |
|---|---|---|---|
| onInit | Surveiller l'initialisation de la page, ses paramètres sont les mêmes que le paramètre onLoad, ce sont les données transmises sur la page précédente, le type de paramètre est Object (utilisé pour les paramètres de page) et l'heure de déclenchement est antérieure à onLoad | Applet Baidu | 3.1.0+ |
| en charge | Surveiller le chargement de la page, son paramètre est les données transmises par la page précédente et le type de paramètre est Objet (pour le transfert de paramètre de page), reportez-vous à l' exemple | ||
| surAfficher | Affichage de la page du moniteur. Déclenché à chaque fois que la page apparaît à l'écran, y compris le retour d'un point de page subordonné pour révéler la page actuelle | ||
| onReady | Écoutez 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 la page n'entre dans l'animation. | ||
| surMasquer | Surveiller le masquage de la page | ||
| onUnload | Surveiller le déchargement de la page | ||
| onResize | Surveiller les changements de taille de fenêtre | Application, applet WeChat | |
| onPullDownRefresh | Surveillez l'action déroulante de l'utilisateur, généralement utilisée pour l'actualisation déroulante, reportez-vous à l' exemple | ||
| onReachBottom | L'événement que la page défile vers le bas (pas le défilement de la vue de défilement vers le bas) est souvent utilisé pour dérouler la page de données suivante. Voir les notes ci-dessous pour plus de détails | ||
| onTabItemTap | Déclenché lorsque l'onglet est cliqué, le paramètre est Objet, voir les notes ci-dessous pour plus de détails | Applet WeChat, Applet QQ, Applet Alipay, Applet Baidu, H5, App | |
| onShareAppMessage | L'utilisateur clique sur le coin supérieur droit pour partager | Applet WeChat, applet QQ, applet Alipay, applet byte, applet Feishu, applet Kuaishou | |
| onPageScroll | Surveiller le défilement des pages, le paramètre est Objet | nvue ne prend pas en charge actuellement | |
| onNavigationBarButtonTap | Écoutez l'événement de clic du bouton de la barre de titre natif, le paramètre est Objet | Application、H5 | |
| onBackPress | Monitor page return, return event = {from:backbutton,navigateBack} , backbutton signifie que la source est le bouton arrière supérieur gauche ou la touche de retour Android ;navigateBack signifie que la source est uni.navigateBack ; description détaillée et utilisation : onBackPress explication détaillée . L'applet Alipay ne peut être déclenchée que par des fonctions réelles et ne peut surveiller que le retour causé par non-navigateBack et ne peut pas empêcher le comportement par défaut. | application, H5, applet Alipay | |
| onNavigationBarSearchInputChanged | Écoutez l'événement de changement de contenu d'entrée de la zone de saisie de recherche de la barre de titre native | Application、H5 | 1.6.0 |
| onNavigationBarSearchInputConfirmed | Écoutez l'événement de recherche de la zone de saisie de recherche de la barre de titre native, qui est déclenchée lorsque l'utilisateur clique sur le bouton "Rechercher" du clavier logiciel. | Application、H5 | 1.6.0 |
| onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发） | App、H5 | 1.6.0 |
| onShareTimeline | 监听用户点击右上角转发到朋友圈 | 微信小程序 | 2.8.1+ |
| onAddToFavorites | 监听用户点击右上角收藏 | 微信小程序 | 2.8.1+ |
onInit使用注意
- 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
- 其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑
- 不依赖页面传参的逻辑可以直接使用 created 生命周期替代
onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。
如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档
onPageScroll （监听滚动、滚动监听、滚动事件）参数说明：
| 属性 | 类型 | 说明 |
|---|---|---|
| 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 回调参数对象说明：
| 属性 | 类型 | 说明 |
|---|---|---|
| from | String | 触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法。支付宝小程序端不支持返回此字段 |
export default {
data() {
return {};
},
onBackPress(options) {
console.log('from:' + options.from)
}
}注意
- nvue 页面weex编译模式支持的生命周期同weex，具体参考：weex生命周期介绍。
- 支付宝小程序真机可以监听到非
navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为
组件生命周期
uni-app Le cycle de vie pris en charge par le composant est le même que le cycle de vie des composants standard de Vue. Il n'y a pas d'onLoad au niveau de la page ni d'autres cycles de vie ici :
| Nom de la fonction | illustrer | Différence de plate-forme Description | Version minimale |
|---|---|---|---|
| avantCréer | Appelé après l'initialisation de l'instance. voir les détails | ||
| créé | Appelé immédiatement après la fin de la création de l'instance. voir les détails | ||
| avant le montage | Appelé avant le début du montage. voir les détails | ||
| monté | Appelé après le montage sur l'instance. Pour plus de détails , veuillez noter : Il n'est pas certain que tous les sous-composants soient montés ici. Si vous devez effectuer des opérations une fois que les sous-composants sont entièrement montés, vous pouvez utiliser la $nextTickdocumentation officielle de Vue. |
||
| avant la mise à jour | Appelé lorsque les données sont mises à jour, avant que le DOM virtuel ne soit corrigé. voir les détails | Uniquement pris en charge sur la plate-forme H5 | |
| mise à jour | Ce hook est appelé après les rendus et les correctifs du DOM virtuel en raison de modifications de données. voir les détails | Uniquement pris en charge sur la plate-forme H5 | |
| avant de détruire | Appelé avant que l'instance ne soit détruite. À cette étape, l'instance est toujours entièrement disponible. voir les détails | ||
| détruit | Appelé après la destruction de l'instance de Vue. Après l'appel, tout ce qui est indiqué par l'instance Vue sera dissocié, tous les écouteurs d'événements seront supprimés et toutes les instances enfants seront détruites. voir les détails |