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

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

## 推奨: 「

uniapp チュートリアル」

アプリケーション ライフ サイクル

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

##関数名 onLaunch uni-apponShow uni -apponHideuni-apponErroruni-apponUniNViewMessagenvueonUnhandledRejectiononPageNotFoundonThemeChange

注意

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

ページ ライフ サイクル

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

説明
	初期化が完了したときにトリガーされます (グローバルに 1 回だけトリガーされます)
When	が開始するか、バックグラウンドからフォアグラウンドに入って
を表示します。	がバックグラウンドからバックグラウンドに入ると、 foreground
	がエラーを報告するとトリガーされます
はい	ページによって送信されたデータを監視するには、nvue と vue の通信を参照してください。
未処理の Promise 拒否イベントリスニング機能 (2.8.1)
このページにはリスニング機能がありません
システムテーマの変更を聞く

# #関数名説明プラットフォームの違いの説明最小バージョンonInitページの初期化をリッスンします。そのパラメーターは、前のページで渡されたデータである onLoad パラメーターと同じです。パラメーターのタイプはオブジェクト (ページ パラメーターの転送に使用) で、トリガー時間は onLoad よりも前ですBaidu Mini Program3.1.0 onLoad ページの読み込みを監視します。パラメータは前のページで渡されたデータです、パラメータのタイプはオブジェクト (ページパラメータに使用) です。onShow## の例を参照してください。 #onReady onHide## が実行される前にトリガーされることに注意してください。ページエントリのアニメーションが完了しました。 #Listen page HideonUnloadListen page unload ウィンドウ サイズの変更を聞く ユーザーのプルダウン アクションを監視します。通常はプルダウンの更新に使用されます。例を参照してくださいページが一番下までスクロールしたときのイベント (スクロールビューではなく、下)、データの次のページをプルダウンするためによく使用されます。詳細については、以下のメモを参照してくださいタブがクリックされるとトリガーされるパラメーターは Object です。詳細については、以下の注記を参照してください。WeChat ミニ プログラム、QQ ミニ プログラム、Alipay ミニ プログラム、Baidu ミニ プログラム、H5、アプリユーザーは右上隅をクリックして共有します#WeChat アプレット、QQ アプレット、Alipay アプレット、Byte アプレット、Feishu アプレット、Kuaishou アプレットonPageScrollnvue はまだサポートしていませんApp、H5## です。 #onBackPressページリターンをリッスン、リターンイベント = {from:backbutton, navigateBack}、backbutton はソースが左上隅または Android のリターンキー; navigateBack はソースが uni であることを示します navigateBack; 詳細な説明と使用法: onBackPress の詳細な説明。 Alipay アプレットは実際のマシンによってのみトリガーでき、navigateBack によって引き起こされない返品のみを監視でき、デフォルトの動作を防ぐことはできません。 1.6.0onNavigationBarSearchInputconfirmedネイティブ タイトル バーの検索入力ボックスの検索を聞くイベント、ユーザー ソフトキーボードの「検索」ボタンがクリックされたときに発生します。 App、H51.6.0onNavigationBarSearchInputClickedネイティブ タイトル バーの検索入力ボックスのクリック イベントをリッスンします (ページ数) .json これは、disabled の searchInput 構成が true の場合にのみトリガーされます) App, H51.6.0onShareTimelineリスニング ユーザーは右上隅をクリックして友達のサークルに転送しますWeChat ミニ プログラム2.8.1 onAddToFavoritesユーザーの右上隅のクリックを監視します。コレクションWeChat ミニ プログラム2.8.1

onInit使用上の注意

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

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

scroll-view が使用され、ページがスクロールしない場合、一番下のイベントはトリガーされません。スクロールビューが一番下までスクロールするイベントについては、スクロールビューのドキュメントを参照してください。

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

#ページの表示を聞いてください。ページが画面に表示されるたびにトリガーされます。これには、下位レベルのページ ポイントから戻って現在のページを表示する場合も含まれます
監視ページの最初のレンダリングが完了しました。レンダリング速度が速い場合、
			##onResize
アプリ、WeChatアプレット			onPullDownRefresh
			onReachBottom
			##onTabItemTap
			onShareAppMessage
			ページのスクロールをリッスンします。パラメータは Object です。
		##onNavigationBarButtonTap	ネイティブ タイトル バー ボタンのクリック イベントをリッスンします。パラメーターは Object
			app、H5、Alipay アプレット
	##onNavigationBarSearchInputChanged	ネイティブ タイトル バーの検索入力の入力内容を監視するボックス イベントの変更	App,H5

属性タイプ説明##scrollTop

Number	ページが垂直方向にスクロールされた距離 (単位 px)

Note

##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);
  },

が返されるのを防ぐことができなくなります。 onTabItemTap

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

Attribute #indexpagePathtext

Type	Description
String	クリックされた tabItem のシリアル番号 (0
# から始まる) #String	クリックされた tabItem のページ パス
String	クリックされた tabItem のボタン テキスト

Note

onTabItemTap は、現在のタブ項目をクリックしたり、現在のページをスクロールしたり更新したりするためによく使用されます。別のタブ項目をクリックすると、ページの切り替えが確実にトリガーされます。

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

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

onNavigationBarButtonTap

パラメータの説明 :

Attribute##index

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

Type	Description
Number	ネイティブ タイトル バー ボタン配列の添え字

onBackPress

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

Attribute#fromAlipay アプレットはこのフィールドを返すことをサポートしていません

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

注意

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

组件生命周期

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

Type	Description
String	リターン動作をトリガーするソース: 'backbutton' - 左上隅のナビゲーション バー ボタンと Android のリターン キー、'navigateBack' - uni.navigateBack() メソッド。

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之后被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

推荐：《uniapp教程》

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