目次
2. ライフサイクル関数
ホームページ WeChat アプレット ミニプログラム開発 WeChatアプレットのライフサイクル(機能)について話しましょう

WeChatアプレットのライフサイクル(機能)について話しましょう

Nov 01, 2021 am 10:24 AM
アプレット 微信 ライフサイクル

この記事では、WeChat アプレットのライフ サイクルを見て、どのようなライフ サイクル機能があるのか​​、そのトリガー時間とその動作について説明します。皆さんのお役に立てれば幸いです。

WeChatアプレットのライフサイクル(機能)について話しましょう

#1. ライフ サイクル

1. ライフ サイクルとは何ですか?

ライフ サイクル

(ライフ サイクル)は、期間を強調して、オブジェクトの作成、実行、破壊に至るまでの段階全体を指します

2. ミニ プログラムのライフ サイクル

  • ミニ プログラムのスタートアップ は、 ライフ サイクルを表します。アプレットのサイクル開始
  • アプレットの終了ライフ サイクルの終了を示します。
  • アプレットを途中で実行するプロセス。アプレットのライフ サイクル

3. ミニ プログラム ライフ サイクルの分類

  • アプリケーション ライフ サイクル 具体的には、ミニ プログラムの開始 --> 実行 --> 破棄のプロセスを指します

  • ページ ライフ サイクル 具体的には、ミニ プログラムの各ページの読み込み -> レンダリング -> 破棄プロセスを指します

  • Note: ページのライフ サイクル範囲が小さい場合、アプリケーションのライフサイクル範囲は大きくなります

WeChatアプレットのライフサイクル(機能)について話しましょう

2. ライフサイクル関数

1. ライフサイクル関数とは何ですか?

  • #ミニ プログラム フレームワークによって提供される組み込み関数は、ライフサイクルに沿って順番に自動的に実行されます

  • ライフ サイクル 関数の役割:

      プログラマーがライフ サイクルの特定の時点で特定の操作を実行できるようにします
    • たとえば、ページがロードされたばかりのとき、サイクル関数 現在のページのデータを取得するためのデータ要求を自動的に開始します。
  • : ライフ サイクルでは、期間とライフ サイクルが強調されます。関数は時点を強調します。

2. アプリケーション ライフ サイクル関数

  • app.js はミニ プログラム実行のエントリ ファイルです。App() 関数は app.js で呼び出す必要があり、一度しか呼び出すことができません。このうち、App() 関数は、アプレットの登録と実行に使用されます。 #Object パラメータ。この

    Object
  • パラメータ
  • app.js のコードを通じて、アプレットのライフサイクル関数を指定できます。

  • コードは次のとおりです (例):
  • 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    App({

     

      /**

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

       */

      onLaunch: function () { },

     

      /**

       * 当小程序启动,或从后台进入前台显示,会触发 onShow

       */

      onShow: function (options) { },

     

      /**

       * 当小程序从前台进入后台,会触发 onHide

       */

      onHide: function () { },

     

      /**

       * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

       */

      onError: function (msg) { }

    })

    ログイン後にコピー

    3. ページのライフ サイクル

#各ミニ プログラム ページには独自の .js ファイルが必要で、Page() 関数を呼び出す必要があります。そうしないと、エラーが報告されます。このうち、

Page()
    関数は、ミニ プログラム ページを登録するために使用されます。 #Object
  • パラメータ。この

    Object パラメータpage.js

    # を通じてページのライフサイクル関数を指定できます。
  • ##コードは次のとおりです (例): <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>//index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })</pre><div class="contentsignin">ログイン後にコピー</div></div>4. コンポーネントのライフサイクル全体

  • コンポーネントのライフサイクルとは何ですか?いつ異なるのでしょうか?
  • #ライフサイクル

  • パラメータ

説明

created

NoneattachedreadyNoneNone Noneコンポーネント インスタンスがページ ノード ツリーから削除されるときに実行されますerrorオブジェクト エラー

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

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

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

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

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

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

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

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

6. lifetimes 节点

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

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;

}

ログイン後にコピー

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

以上がWeChatアプレットのライフサイクル(機能)について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WeChatの実名認証IDカードを変更する方法 WeChatの実名認証IDカードを変更する方法 Apr 24, 2024 am 10:58 AM

WeChatの実名認証IDカードを変更する方法

WeChat モーメントで訪問者を確認できますか? WeChat モーメントで訪問者を確認できますか? May 06, 2024 pm 01:30 PM

WeChat モーメントで訪問者を確認できますか?

WeChat は相手がそれを読んだことをどのようにして知るのでしょうか? WeChat は相手がそれを読んだことをどのようにして知るのでしょうか? Apr 24, 2024 pm 01:45 PM

WeChat は相手がそれを読んだことをどのようにして知るのでしょうか?

WeChatのパスワード不要の支払いを終了する方法 WeChatのパスワード不要の支払いを終了する方法 Apr 18, 2024 pm 02:01 PM

WeChatのパスワード不要の支払いを終了する方法

「iPhone 16はWeChatをサポートしない可能性がある」との噂があり、中国のApple技術コンサルタントはアプリストア手数料についてテンセントと協議中と述べた 「iPhone 16はWeChatをサポートしない可能性がある」との噂があり、中国のApple技術コンサルタントはアプリストア手数料についてテンセントと協議中と述べた Sep 02, 2024 pm 10:45 PM

「iPhone 16はWeChatをサポートしない可能性がある」との噂があり、中国のApple技術コンサルタントはアプリストア手数料についてテンセントと協議中と述べた

WeChatでブロックした相手が復活したことをご存知ですか? WeChatでブロックした相手が復活したことをご存知ですか? Apr 24, 2024 pm 01:34 PM

WeChatでブロックした相手が復活したことをご存知ですか?

DeepSeekイメージジェネレーションチュートリアル DeepSeekイメージジェネレーションチュートリアル Feb 19, 2025 pm 04:15 PM

DeepSeekイメージジェネレーションチュートリアル

削除されたWeChatチャット履歴を復元する方法 削除されたWeChatチャット履歴を復元する方法 Apr 24, 2024 am 11:36 AM

削除されたWeChatチャット履歴を復元する方法

See all articles
コンポーネント インスタンスの作成時に実行
Noneコンポーネント インスタンスがページ ノード ツリーに入ったときに実行されます
コンポーネントがビュー レイヤーに配置された後に実行されますmoved コンポーネント インスタンスがノード ツリー内の別の場所に移動されたときに実行されます
detached
コンポーネント メソッドがエラーをスローしたときにすべて実行される