| onUniNViewMessage |
对 nvue
| Nom de la fonction |
Description |
onLaunch | Déclenché lorsque l'initialisation de uni-app est terminée (globale Déclenché une seule fois) |
onShow | Lorsque uni-app est lancé ou passe au premier plan depuis l'arrière-plan |
onHide | Lorsque uni-app entre au premier plan L'arrière-plan |
onError 🎜 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 :
|
nom de la fonction |
description |
description de la différence de plate-forme |
version minimale
|
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 |
3.1.0+
|
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
| App, applet WeChat
|
.
| onPullDownRefresh | Surveillez les actions déroulantes de l'utilisateur, généralement utilisées pour l'actualisation déroulante, reportez-vous à l'exemple
|
|
| onReachBottom | L'é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-dessous |
|
|
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 Baidu, H5, App
|
| onShareAppMessage | Les utilisateurs cliquent sur le coin supérieur droit pour partager
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
|
onNavigation 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, H5 | 1.6.0
|
onNavigationBarSearchInputClicked
| É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 |
|
onShareTimeline
| Écoutez les utilisateurs qui cliquent sur le coin supérieur droit pour transférer vers Moments |
Applet WeChat |
2.8.1+ |
|
onAddToFavorites
| Moniteur pour que les utilisateurs cliquent en haut à droite coin pour la collection |
Applet WeChat |
2.8 .1+ |
|
onInit Notes d'utilisationonInit使用注意
- 仅百度小程序基础库 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
- 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
onPageScroll (écoute de défilement, écoute de défilement, événements de défilement) Description du paramètre : |
|
| Attributs
TypeDescription |
|
scrollTop | Numéro La distance à laquelle la page a défilé dans le sens vertical (unité px) 🎜🎜🎜🎜🎜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教程》
|
