Eine ausführliche Analyse des Lebenszyklus der Uni-App

Dieser Artikel vermittelt Ihnen relevantes Wissen über den uniappDeklarationszyklus. Er stellt hauptsächlich Fragen im Zusammenhang mit dem Anwendungsdeklarationszyklus, dem Seitenlebenszyklus und dem Komponentenlebenszyklus vor.

Empfohlen: „uniapp-Tutorial“

Anwendungslebenszyklus

uni-app unterstützt die folgenden Anwendungslebenszyklusfunktionen: uni-app 支持如下应用生命周期函数：

函数名

说明

onLaunch

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

onShow

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

onHide

当 uni-app 从前台进入后台

onError

当 uni-app 报错时触发

onUniNViewMessage

对 nvueonLaunchWird ausgelöst, wenn die uni-app-Initialisierung abgeschlossen ist (global). wird nur einmal ausgelöst) onShowwenn uni-app gestartet wird, oder tritt aus dem Hintergrund in den Vordergrund, um onHidewenn uni-app anzuzeigen code> tritt aus dem Vordergrund ein. Der Hintergrund <td></td>onError

Funktionsname	Beschreibung

🎜 wird ausgelöst, wenn uni-app einen Fehler meldet🎜🎜🎜🎜onUniNViewMessage🎜🎜, um die vom nvue Seite, siehe nvue to vue Communication🎜🎜🎜🎜onUnhandledRejection🎜🎜Reject Event Listening-Funktion für unhandled Promise (2.8.1+)🎜🎜🎜🎜onPageNotFound🎜🎜Die Seite verfügt nicht über eine Listening-Funktion🎜🎜🎜 🎜onThemeChange🎜🎜Hörsystem-Themenwechsel🎜🎜🎜🎜<p><strong>Hinweis</strong></p> <ul> <li>Der Anwendungslebenszyklus kann nur in <code>App.vue überwacht werden, und die Überwachung auf anderen Seiten ist ungültig. App.vue中监听，在其它页面监听无效。

onlaunch里进行页面跳转，如遇白屏报错，请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答

onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）

页面生命周期

uni-appOnlaunch-Seitensprung: Wenn Sie auf einen weißen Bildschirmfehler stoßen, lesen Sie bitte die Navigation, um zur Seite zu springen. Hinweis im Onlaunch-Lebenszyklus – DCloud Q&A

onPageNotFound Die Seite wurde tatsächlich geöffnet (z. B. durch Teilen einer Karte, Mini-Programmcode) und festgestellt wird, dass die Seite nicht existiert, wird der API-Sprung zu der Seite, die nicht existiert, nicht ausgelöst (z. B. uni.navigateTo)

Seitenlebenszyklus

uni-app unterstützt die folgenden Seitenlebenszyklusfunktionen: Mindestversion3.1.0+Überwachen Sie die Pulldown-Aktionen des Benutzers, die im Allgemeinen für die Pulldown-Aktualisierung verwendet werden, siehe BeispielDas Ereignis, wenn die Seite nach unten scrollt (nicht scrollt). -Ansicht nach unten), wird häufig zum Herunterziehen der nächsten Datenseite verwendet. Einzelheiten finden Sie in den Hinweisen unten. Baidu-Applet, H5, App onPageScrollHören Sie sich das Scrollen der Seite an, der Parameter ist Object.nvue wird noch nicht unterstützt ?? uni.navigateBack; Detaillierte Beschreibung und Verwendung: onBackPress ausführliche Erklärung. Das Alipay-Applet kann nur von einer realen Maschine ausgelöst werden, kann nur Rücksendungen überwachen, die nicht durch „navigationBack“ verursacht wurden, und kann das Standardverhalten nicht verhindern. Suchen Sie nach nativen Titeln. Suchereignis im Sucheingabefeld der Leiste, das ausgelöst wird, wenn der Benutzer auf der Softtastatur auf die Schaltfläche „Suchen“ klickt. onShareTimelineÜberwachen Sie, ob Benutzer auf die obere rechte Ecke klicken, um zu Moments weiterzuleiten Ecke zum SammelnWeChat-Applet

onInit Hinweise zur VerwendungonInit使用注意

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

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

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

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

	Funktionsname	Beschreibung	Beschreibung der Plattformunterschiede
	onInit	listening Seiteninitialisierung, ihre Parameter sind die gleichen wie die onLoad-Parameter, bei denen es sich um die auf der vorherigen Seite übergebenen Daten handelt. Der Parametertyp ist Objekt (wird für Seitenparameter verwendet). . Die Auslösezeit liegt früher als bei onLoad	Baidu Mini Program
	onLoad	Der Parameter ist der auf der vorherigen Seite übergebene Parameter Siehe das Beispiel
	onShow	, um die Seitenanzeige zu überwachen. Wird jedes Mal ausgelöst, wenn die Seite auf dem Bildschirm erscheint, einschließlich der Rückkehr von der Seite auf niedrigerer Ebene, um die aktuelle Seite anzuzeigen. Beachten Sie, dass bei hoher Rendering-Geschwindigkeit die Seiteneintragsanimation ausgelöst wird, bevor die Seitendeinstallation abgeschlossen ist	onPullDownRefresh
			onReachBottom
		App, H5, Alipay-Applet ation BarSearchInputConfirmed	App, H5 1.6 .0
		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

• Nur Baidu Mini Program Basic Library 3.260 oder höher unterstützt den onInit-Lebenszyklus
• Andere Versionen oder Plattformen können den onLoad-Lebenszyklus verwenden Achten Sie gleichzeitig aus Kompatibilitätsgründen darauf, die wiederholte Ausführung derselben Logik zu vermeiden
• Logik, die nicht auf Seitenparametern basiert, kann direkt durch den erstellten Lebenszyklus ersetzt werden

onReachBottomVerwendungshinweis kann in Seiten gefunden werden. Definieren Sie den Triggerabstand am Ende einer bestimmten Seite in json. Wenn er beispielsweise auf 50 eingestellt ist, wird die Seite auf 50 Pixel gescrollt unten wird das onReachBottom-Ereignis ausgelöst. Wenn die Scroll-Ansicht verwendet wird und die Seite nicht scrollt, wird das untere Ereignis nicht ausgelöst. Informationen zu Ereignissen, bei denen Scroll-View nach unten scrollt, finden Sie in der Dokumentation von Scroll-View Attribut Typ Beschreibung NumberDie Entfernung, um die die Seite in vertikaler Richtung gescrollt wurde (Einheit px)

onPageScroll (Scroll-Überwachung, Scroll-Überwachung, Scroll-Ereignisse) Parameterbeschreibung:
		scrollTop

🎜🎜🎜🎜🎜Hinweis🎜🎜

• Schreiben Sie nicht in onPageScroll Interagieren Sie mit komplexen JS, z. B. häufigem Ändern der Seite. Da dieser Lebenszyklus in der Rendering-Schicht ausgelöst wird, wird js auf der Nicht-h5-Seite in der Logikschicht ausgeführt, und es kommt zu einem Kommunikationsverlust zwischen den beiden Schichten. Wenn der Datenaustausch zwischen den beiden Ebenen während des Scrollvorgangs häufig ausgelöst wird, kann es zu Verzögerungen kommen.
• Wenn Sie beim Scrollen in App und H5 einen transparenten Verlauf der Titelleiste erreichen möchten, können Sie den Typ unter titleNView in page.json als Referenz als transparent konfigurieren.
• Wenn Sie die Decke scrollen müssen, um bestimmte Elemente zu reparieren, wird empfohlen, das CSS-Sticky-Layout zu verwenden und auf den Plug-in-Markt zu verweisen. Es gibt auch andere von js implementierte Decken-Plug-Ins auf dem Plug-In-Markt, deren Leistung jedoch nicht gut ist. Sie können bei Bedarf selbst danach suchen.
• In App, WeChat-Applet und H5 können Sie wxs auch zum Überwachen des Scrollens als Referenz verwenden; in app-nvue können Sie bindingx zum Überwachen des Scrollens als Referenz verwenden.
• async kann nicht auf onBackPress verwendet werden, was dazu führt, dass die Standardrückgabe nicht verhindert werden kann

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

🎜onTabItemTap Zurückgegebene JSON-Objektbeschreibung: 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜String🎜🎜Die Seriennummer des angeklickten tabItem, beginnend bei 0🎜 🎜🎜 🎜pageP ath🎜🎜String🎜🎜 Der Seitenpfad des angeklickten tabItem🎜🎜🎜🎜text🎜🎜String🎜🎜Der Schaltflächentext des angeklickten tabItem🎜🎜🎜🎜🎜🎜Note🎜🎜

• onTabItem Tippen ist oft Wird verwendet, um auf das aktuelle Tab-Element zu klicken, einen Bildlauf durchzuführen oder die aktuelle Seite zu aktualisieren. Wenn Sie auf ein anderes Tabelement klicken, wird auf jeden Fall ein Seitenwechsel ausgelöst.
• Wenn Sie auf der App-Seite auf ein Tabitem klicken möchten, ohne zur Seite zu springen, können Sie onTabItemTap nicht verwenden. Sie können plus.nativeObj.view verwenden, um einen Block zu platzieren, der das ursprüngliche Tabitem abdeckt und den Klick abfängt Ereignis.
• Die Alipay-Applet-Plattform onTabItemTap wird nach dem Klicken auf ein nicht aktuelles Tabitem ausgelöst und kann daher nicht verwendet werden, um den Vorgang des Zurückklickens nach oben zu implementieren

rrreee🎜onNavigationBarButtonTap Parameterbeschreibung: 🎜🎜🎜🎜🎜Attribute🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜index🎜🎜Number🎜🎜Der Index der nativen Titelleistenschaltfläche. Array🎜🎜🎜 🎜rrreee🎜on BackPress Rückruf Beschreibung des Parameterobjekts: 🎜🎜🎜🎜🎜Attributes🎜🎜Type🎜🎜Description🎜🎜🎜🎜🎜🎜from🎜🎜String🎜🎜Quelle für das Auslösen des Rückgabeverhaltens: „Backbutton“ – Navigation in der oberen linken Ecke bar-Schaltfläche und Android-Return-Taste; 'navigateBack' – uni.navigateBack()-Methode. 🎜Das Alipay-Applet unterstützt die Rückgabe dieses Feldes nicht🎜🎜🎜🎜🎜

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教程》

Das obige ist der detaillierte Inhalt vonEine ausführliche Analyse des Lebenszyklus der Uni-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!