Inhaltsverzeichnis
1. Lebenszyklus
二、生命周期函数
Heim WeChat-Applet Mini-Programmentwicklung Lassen Sie uns über den Lebenszyklus (Funktion) im WeChat-Applet sprechen

Lassen Sie uns über den Lebenszyklus (Funktion) im WeChat-Applet sprechen

Nov 01, 2021 am 10:24 AM
小程序 微信 生命周期

In diesem Artikel werfen Sie einen Blick auf den Lebenszyklus im WeChat-Applet, welche Lebenszyklusfunktionen es gibt und sprechen über den Auslösezeitpunkt und seine Wirkung. Ich hoffe, dass er für alle hilfreich ist!

Lassen Sie uns über den Lebenszyklus (Funktion) im WeChat-Applet sprechen

1. Lebenszyklus

1. Was ist ein Lebenszyklus?

Lebenszyklus (Lebenszyklus) bezieht sich auf die gesamte Phase eines Objekts von der Erstellung über die Ausführung bis zur Zerstörung, wobei der Schwerpunkt auf einem Zeitraum liegt (Life Cycle) 是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段,强调的是一个时间段

2. 小程序的生命周期

  • 小程序的 启动,表示 生命周期的开始
  • 小程序的 关闭,表示 生命周期的结束
  • 中间小程序运行的过程,就是小程序的生命周期

3. 小程序生命周期分类

  • 应用生命周期 特指小程序从启动 --> 运行 --> 销毁的过程

  • 页面生命周期 特指小程序中,每个页面的加载 --> 渲染 --> 销毁的过程

  • 注意:页面的生命周期范围较小,应用程序的生命周期范围较大

Lassen Sie uns über den Lebenszyklus (Funktion) im WeChat-Applet sprechen

二、生命周期函数

1. 什么是生命周期函数?

  • 小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行

  • 生命周期函数的作用:

    • 允许程序员在特定的生命周期时间点上,执行某些特定的操作
    • 例如,页面刚加载的时候,在生命周期函数中自动发起数据请求,获取当前页面的数据
  • 注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

2. 应用的生命周期函数

  • app.js 是小程序执行的入口文件,在 app.js 中必须调用 App() 函数,且只能调用一次。其中,App() 函数是用来注册并执行小程序的

  • App(Object) 函数接收一个 Object 参数,可以通过这个 Object 参数,指定小程序的生命周期函数

  • app.js 中的代码

代码如下(示例):

App({

  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () { },

  /**
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) { },

  /**
   * 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () { },

  /**
   * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
   */
  onError: function (msg) { }
})
Nach dem Login kopieren

3. 页面的生命周期

  • 每个小程序页面,必须拥有自己的 .js 文件,且必须调用 Page() 函数,否则报错。其中 Page() 函数用来注册小程序页面

  • Page(Object) 函数接收一个 Object 参数,可以通过这个 Object 参数,指定页面的生命周期函数

  • page.js

代码如下(示例):

//index.js
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { }
})
Nach dem Login kopieren

4. 组件的全部生命周期

组件有哪些生命周期?分别是什么时候?

2
生命周期参数描述
created在组件实例刚刚被创建时执行
attached在组件实例进入页面节点树时执行
ready在组件在视图层布局完成后执行
moved在组件实例被移动到节点树另一个位置时执行
detached在组件实例被从页面节点树移除时执行
errorObject Error
  • Der Start des Miniprogramms stellt den Beginn des Lebenszyklus
  • den Abschluss< von dar das Miniprogramm< /code>, das das Ende des <code>Lebenszyklus
  • Der laufende Prozess des Zwischen-Applets ist der Lebenszyklus des Applets
🎜🎜🎜3. Klassifizierung des Programmlebenszyklus🎜🎜🎜
  • 🎜Anwendungslebenszyklus Bezieht sich insbesondere auf den Prozess des Startens –> Ausführens –> des Seitenlebenszyklus Bezieht sich insbesondere auf den Lade--> Rendering--> Zerstörungsprozess jeder Seite im Miniprogramm🎜
  • 🎜🎜Hinweis🎜: Der Lebenszyklusbereich der Seite ist klein und der Lebenszyklus Anwendungsbereich größer🎜
🎜Lassen Sie uns über den Lebenszyklus (Funktion) im WeChat-Applet sprechen🎜🎜🎜 2. Lebenszyklusfunktion 🎜🎜🎜🎜🎜 1. Was ist eine Lebenszyklusfunktion? 🎜🎜🎜
  • 🎜Die vom Miniprogramm-Framework bereitgestellten integrierten Funktionen werden zusammen mit dem Lebenszyklus automatisch der Reihe nach ausgeführt🎜
  • 🎜Die Rolle der Lebenszyklusfunktion: 🎜
    • Erlauben Sie Programmierern, bestimmte Vorgänge zu bestimmten Lebenszykluszeitpunkten auszuführen
    • Wenn die Seite beispielsweise gerade geladen wird, wird in der Lebenszyklusfunktion automatisch eine Datenanforderung initiiert, um die Daten abzurufen der aktuellen Seite
    • li>
  • 🎜🎜Hinweis🎜: Der Lebenszyklus betont den Zeitraum und die Lebenszyklusfunktion betont den Zeitpunkt. 🎜
🎜🎜🎜2. Anwendungslebenszyklusfunktion 🎜🎜🎜
  • 🎜app.js ist die Eintragsdatei für die Applet-Ausführung, in App() muss in >app.js aufgerufen werden und kann nur einmal aufgerufen werden. Unter anderem wird die Funktion App() zum Registrieren und Ausführen kleiner Programme verwendet. 🎜
  • 🎜Die Funktion App(Object) erhält einen Object< /code>-Parameter, Sie können diesen <code>Object-Parameter verwenden, um die Lebenszyklusfunktion des Miniprogramms anzugeben🎜
  • 🎜Der Code in app.js</ code>🎜</ li></ul>🎜Der Code lautet wie folgt (Beispiel):🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>lifetimes: { attached () { console.log(&amp;#39;在组件实例进入页面节点树&amp;#39;) }, detached () { console.log(&amp;#39;在组件实例被从页面节点树移除&amp;#39;) } }, attached () { console.log(&amp;#39;~~~~~在组件实例进入页面节点树&amp;#39;) }, detached () { console.log(&amp;#39;~~~~~在组件实例被从页面节点树移除&amp;#39;) }, /** * 组件的初始数据 */ data: { // rgb 的颜色值对象 _rgb: { r: 0, g: 0, b: 0 }, // 根据 rgb 对象的三个属性,动态计算 fullColor 的值 fullColor: &amp;#39;0, 0, 0&amp;#39; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div>🎜🎜🎜3. Seitenlebenszyklus🎜🎜🎜<ul><li>🎜Jede Miniprogrammseite muss ihr eigenes < haben code>.js< /code>-Datei und die Funktion <code>Page() muss aufgerufen werden, andernfalls wird ein Fehler gemeldet. Unter anderem wird die Funktion Page() verwendet, um die Seite des Miniprogramms zu registrieren🎜
  • 🎜Die Funktion Page(Object) empfängt ein Object -Parameter: Sie können die Lebenszyklusfunktion der Seite über diesen Object-Parameter🎜
  • 🎜page.js🎜
🎜Code Wie folgt (Beispiel): 🎜rrreee🎜🎜🎜4. Der gesamte Lebenszyklus von Komponenten🎜🎜🎜🎜Was sind die Lebenszyklen von Komponenten? Wann sind sie unterschiedlich? 🎜🎜
LebenszyklusParameter Beschreibung
erstellt🎜Keine🎜 🎜Wird ausgeführt, wenn die Komponenteninstanz gerade erstellt wird🎜🎜
attached🎜Keine 🎜🎜Wird ausgeführt, wenn die Komponenteninstanz in den Seitenknotenbaum eintritt🎜🎜
bereit🎜Keine 🎜🎜 in Die Komponente Wird ausgeführt, nachdem das Ansichtsebenenlayout abgeschlossen ist🎜🎜
moved🎜Keine🎜🎜Wird ausgeführt, wenn die Komponenteninstanz an eine andere Position im Knotenbaum verschoben wird 🎜🎜
freigegeben🎜Keine🎜🎜Wird ausgeführt, wenn die Komponenteninstanz aus dem Seitenknotenbaum entfernt wird</ code>🎜🎜 <tr><td align="center">error🎜<td align="center"><code>Object Error🎜🎜Wird immer dann ausgeführt, wenn eine Komponentenmethode einen Fehler auslöst🎜🎜🎜🎜

5. 组件主要的生命周期函数

data在哪个生命周期中初始化完毕?

组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

最重要的生命周期是 created, attached, detached ,包含一个组件实例生命流程的最主要时间点。

  • 组件实例刚刚被创建好时, created 生命周期被触发

    • 此时还不能调用 setData
    • 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段
  • 在组件完全初始化完毕、进入页面节点树后, attached 生命周期被触发

    • this.data 已被初始化完毕
    • 这个生命周期很有用,绝大多数初始化工作可以在这个时机进行
  • 在组件离开页面节点树后, detached 生命周期被触发

    • 退出一个页面时,会触发页面内每个自定义组件的detached 生命周期被触发
    • 如果组件还在页面节点树中,则 detached 会被触发。
    • 此时适合做一些清理性质的工作

6. lifetimes 节点

同时以两种方式声明生命周期函数,会执行哪个?

生命周期方法可以直接定义在 Component 构造器的第一级参数中,组件的的生命周期也可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)

lifetimes: {
  attached () {
    console.log(&#39;在组件实例进入页面节点树&#39;)
  },
  detached () {
    console.log(&#39;在组件实例被从页面节点树移除&#39;)
  }
},

attached () {
  console.log(&#39;~~~~~在组件实例进入页面节点树&#39;)
},
detached () {
  console.log(&#39;~~~~~在组件实例被从页面节点树移除&#39;)
},

/**
 * 组件的初始数据
 */
data: {
  // rgb 的颜色值对象
  _rgb: {
    r: 0,
    g: 0,
    b: 0
  },
  // 根据 rgb 对象的三个属性,动态计算 fullColor 的值
  fullColor: &#39;0, 0, 0&#39;
}
Nach dem Login kopieren
Nach dem Login kopieren

更多编程相关知识,请访问:编程入门!!

Das obige ist der detaillierte Inhalt vonLassen Sie uns über den Lebenszyklus (Funktion) im WeChat-Applet sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Es gibt Gerüchte, dass „das iPhone 16 WeChat möglicherweise nicht unterstützt', und Apples technischer Berater in China sagte, dass man mit Tencent über App-Store-Provisionen kommuniziert Es gibt Gerüchte, dass „das iPhone 16 WeChat möglicherweise nicht unterstützt', und Apples technischer Berater in China sagte, dass man mit Tencent über App-Store-Provisionen kommuniziert Sep 02, 2024 pm 10:45 PM

Vielen Dank an die Internetnutzer Qing Qiechensi, HH_KK, Satomi Ishihara und Wu Yanzu aus Südchina für die Übermittlung von Hinweisen! Laut Nachrichten vom 2. September gibt es aktuelle Gerüchte, dass „das iPhone 16 WeChat möglicherweise nicht unterstützt.“ Als Reaktion darauf antwortete ein Reporter von Shell Finance bei Apples offizieller Hotline, ob iOS-Systeme oder Apple-Geräte weiterhin unterstützt werden könnten Verwenden Sie WeChat und WeChat. Die Frage, ob es weiterhin im Apple App Store gelistet und heruntergeladen werden kann, erfordert eine Kommunikation und Diskussion zwischen Apple und Tencent, um die zukünftige Situation zu bestimmen. Software App Store und WeChat Problembeschreibung Der technische Berater des Software App Store wies darauf hin, dass Entwickler möglicherweise Gebühren zahlen müssen, um Software im Apple Store bereitzustellen. Ab einer bestimmten Anzahl an Downloads muss Apple für weitere Downloads entsprechende Gebühren zahlen. Apple kommuniziert aktiv mit Tencent,

Deepseek Image Generation Tutorial Deepseek Image Generation Tutorial Feb 19, 2025 pm 04:15 PM

Deepseek: Ein leistungsstarkes Werkzeug für KI -Bildgenerierung! Deepseek selbst ist kein Werkzeug zur Bildgenerierung, aber seine leistungsstarke Kerntechnologie unterstützt viele KI -Malwerkzeuge. Möchten Sie wissen, wie Sie Deepseek verwenden, um Bilder indirekt zu generieren? Bitte lesen Sie weiter! Generieren Sie Bilder mit Deepseek-basierten KI-Tools: In den folgenden Schritten werden die folgenden Tools verwendet. Wählen Sie den Zeichnungsmodus aus: Wählen Sie "AI -Zeichnung" oder eine ähnliche Funktion aus und wählen Sie den Bildtyp entsprechend Ihren Anforderungen wie "Anime Avatar", "Landschaft" aus, "Landschaft".

Mit der Angelegenheit vertraute Personen antworteten, dass „WeChat das Apple iPhone 16 möglicherweise nicht unterstützt': Gerüchte sind Gerüchte Mit der Angelegenheit vertraute Personen antworteten, dass „WeChat das Apple iPhone 16 möglicherweise nicht unterstützt': Gerüchte sind Gerüchte Sep 02, 2024 pm 10:43 PM

Gerüchte, dass WeChat das iPhone 16 unterstützt, wurden entlarvt. Vielen Dank an die Internetnutzer Xi Chuang Jiu Shi und HH_KK für die Übermittlung von Hinweisen! Laut Nachrichten vom 2. September gibt es heute Gerüchte, dass WeChat das iPhone 16 möglicherweise nicht unterstützt. Sobald das iPhone auf das iOS 18.2-System aktualisiert wird, kann es WeChat nicht mehr verwenden. Laut „Daily Economic News“ erfuhren mit der Angelegenheit vertraute Personen, dass es sich bei diesem Gerücht um ein Gerücht handelt. Antwort von Apple: Laut Shell Finance antwortete der technische Berater von Apple in China, dass die Frage, ob WeChat weiterhin auf iOS-Systemen oder Apple-Geräten genutzt werden könne und ob WeChat weiterhin im Apple App Store gelistet und heruntergeladen werden dürfe, geklärt werden müsse Nur durch Kommunikation und Diskussion können wir die zukünftige Situation bestimmen. Derzeit kommuniziert Apple aktiv mit Tencent, um zu bestätigen, ob Tencent dies auch weiterhin tun wird

Gateio Chinesische offizielle Website Gate.io Trading Platform Website Gateio Chinesische offizielle Website Gate.io Trading Platform Website Feb 21, 2025 pm 03:06 PM

Gate.io, eine 2013 gegründete führende Kryptowährungs -Handelsplattform, bietet chinesischen Nutzern eine vollständige offizielle chinesische Website. Die Website bietet eine breite Palette von Dienstleistungen, darunter Spot -Handel, Futures -Handel und -kredite, und bietet besondere Funktionen wie chinesische Schnittstelle, reichhaltige Ressourcen und Community -Unterstützung.

Liste der Bearbeitungsgebühren für die OKX -Handelsplattform Liste der Bearbeitungsgebühren für die OKX -Handelsplattform Feb 15, 2025 pm 03:09 PM

Die OKX -Handelsplattform bietet eine Vielzahl von Zinssätzen, einschließlich Transaktionsgebühren, Auszahlungsgebühren und Finanzierungsgebühren. Bei Spot -Transaktionen variieren die Transaktionsgebühren je nach Transaktionsvolumen und VIP -Ebene und übernehmen das "Market Maker -Modell", dh der Markt, für jede Transaktion eine niedrigere Handhabungsgebühr. Darüber hinaus bietet OKX eine Vielzahl von Futures -Verträgen an, darunter Währungsstandardverträge, USDT -Verträge und Lieferverträge, und die Gebührenstruktur jedes Vertrags ist ebenfalls unterschiedlich.

Gateio Exchange App Old Version Gateio Exchange App Old Version Download Kanal Gateio Exchange App Old Version Gateio Exchange App Old Version Download Kanal Mar 04, 2025 pm 11:36 PM

Gateio Exchange-App-Kanäle für alte Versionen, die offizielle Anwendungsmärkte von Drittanbietern, Forum-Communities und andere Kanäle abdecken.

Ouyi Exchange App Inländische Download -Tutorial Ouyi Exchange App Inländische Download -Tutorial Mar 21, 2025 pm 05:42 PM

Dieser Artikel enthält einen detaillierten Leitfaden zum sicheren Download der Ouyi OKX -App in China. Aufgrund von Einschränkungen in den inländischen App -Stores wird den Benutzern empfohlen, die App über die offizielle Website von Ouyi OKX herunterzuladen oder den von der offiziellen Website bereitgestellten QR -Code zum Scannen und Herunterladen zu verwenden. Überprüfen Sie während des Download-Prozesses unbedingt die offizielle Website-Adresse, überprüfen Sie die Anwendungsberechtigungen, führen Sie nach der Installation einen Sicherheitsscan durch und aktivieren Sie die Zwei-Faktor-Überprüfung. Bleiben Sie während der Nutzung an lokale Gesetze und Vorschriften ein, verwenden Sie ein sicheres Netzwerkumfeld, schützen Sie die Sicherheit der Kontos, wachsam gegen Betrug und investieren rational. Dieser Artikel ist nur als Referenz und stellt keine Anlageberatung dar.

Sesam Open Door Login Registrierung Eingangstor Sesam Open Door Login Registrierung Eingangstor Mar 04, 2025 pm 04:51 PM

Gate.io (Sesam Open Door) ist die weltweit führende Kryptowährungsprüfung. Das Tutorial umfasst Schritte wie Kontoregistrierung und Anmeldung, KYC -Zertifizierung, Fiat -Währung und digitale Währungsaufladung, Handelspaarauswahl, Grenz-/Markttransaktionsbestellungen sowie Bestellungen und Transaktionsaufzeichnungen, wodurch Sie schnell auf der Gate.IO -Plattform für den Kryptowährungshandel beginnen. Egal, ob ein Anfänger oder ein Veteran, Sie können von diesem Tutorial profitieren und die Handelsfähigkeiten von Gate.io problemlos beherrschen.

See all articles