ユニアプリのライフサイクルの詳細な分析

この記事では、uniapp 宣言サイクルに関する関連知識を紹介します。主に、アプリケーション宣言サイクル、ページ ライフ サイクル、コンポーネント ライフ サイクルに関連する問題を紹介します。皆様のお役に立てれば幸いです。

uniapp チュートリアル」

uni-app次のアプリケーション ライフ サイクル関数をサポートします:

注意

• アプリケーションのライフサイクルは App.vue でのみ監視でき、他のページでの監視は無効です。
• onlaunch のページにジャンプします。白い画面エラーが発生した場合は、onlaunch ライフサイクルのページにジャンプするためのナビゲーションを参照してください。 注 - DCloud Q&A
• onPageNotFound このページは実際には(例: カード、ミニ プログラム コードの共有によって) 開かれ、ページが存在しないことが判明した場合、トリガーされます。存在しないページへの API ジャンプはトリガーされません (uni.navigateTo など) )

ページ ライフ サイクル

uni-app 次のページ ライフ サイクル関数をサポートします:

onInit使用上の注意

• Baidu Mini Program Basic Library 3.260以降のみがonInitライフサイクルをサポートします
• 他のバージョンまたはプラットフォームはonLoadライフサイクルを使用できます互換性があるため、同じロジックを繰り返し実行しないように注意してください
• ページ パラメーターに依存しないロジックは、作成されたライフ サイクルで直接置き換えることができます

#onReachBottom使用メモはページ内にあります。json で特定のページの下部にトリガー距離 onReachBottomDistance を定義します。たとえば、50 に設定すると、ページが下から 50px までスクロールされたときに、 onReachBottom イベントがトリガーされます。

onPageScroll (スクロール監視、スクロール監視、スクロールイベント) パラメータの説明:

##onPageScroll 頻繁なページ変更など、複雑な操作を
• で行う js を記述しないでください。このライフサイクルはレンダリング層でトリガーされるため、非 h5 側では、js がロジック層で実行され、2 つの層間の通信が失われます。スクロール処理中に 2 つのレイヤー間のデータ交換が頻繁にトリガーされると、遅延が発生する可能性があります。 スクロール中にタイトル バーの透明なグラデーションを実現したい場合は、App と H5 の下で、pages.json の titleNView の下のタイプを透明になるように構成できます。参考までに。
• 特定の要素を修正するために天井をスクロールする必要がある場合は、CSS スティッキー レイアウトを使用し、プラグイン マーケットを参照することをお勧めします。プラグインマーケットには他にもjsで実装された天井プラグインがありますが、性能は良くないので、必要に応じて自分で探してください。
• App、WeChat アプレット、および H5 では、参考までに、wxs を使用してスクロールを監視することもできます。また、app-nvue では、bindingx を使用してスクロールを監視できます。
• onBackPress
• は async では使用できません。その結果、デフォルトの

  onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
      console.log("滚动距离为：" + e.scrollTop);
  },

  ログイン後にコピー

から返された json オブジェクトの説明:

• ページにジャンプせずにアプリ側で tabitem をクリックしたい場合は、onTabItemTap は使用できません。plus.nativeObj.view を使用して、元の tabitem をカバーするブロックを配置し、クリック イベントをインターセプトできます。 。
• Alipay ミニ プログラム プラットフォームの onTabItemTap は、現在ではないタブ項目をクリックした後にトリガーされるため、クリックして先頭に戻る操作の実装には使用できません

• onTabItemTap : function(e) {
      console.log(e);
      // e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
  },

  ログイン後にコピー

パラメータの説明 :

onNavigationBarButtonTap : function (e) {
    console.log(e);
    // e的返回格式为json对象：{"text":"测试","index":0}
}

コールバック パラメータ オブジェクトの説明:

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

注意

• nvue 页面weex编译模式支持的生命周期同weex，具体参考：weex生命周期介绍。
• 支付宝小程序真机可以监听到非navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

推荐：《uniapp教程》

以上がユニアプリのライフサイクルの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。