uniappでページを閉じる方法

Uniapp は、開発者が iOS、Android、H5、およびその他のプラットフォーム用のアプリケーションを同時に作成できるようにするクロスプラットフォーム開発フレームワークで、開発効率を大幅に向上させ、開発コストを節約します。 Uniappのアプリケーションを開発する過程で、特定のページを閉じる機能を実装する必要があることがよくありますが、この記事ではUniappで指定したページを閉じる方法を紹介します。

1. ページ スタック管理を通じてページを閉じる

Uniapp アプリケーションでは、ページ ジャンプはページ スタック管理を通じて実装されます。ページ スタックは、ページ間のジャンプ関係を格納するために使用されるデータ構造です。新しいページにジャンプするたびに、そのページはページ スタックの先頭に追加されます。ページから戻ったり、ページを閉じたりすると、ページが追加されます。ページスタックからポップされます。したがって、ページスタックを操作することで、指定されたページを閉じる機能を実現することができる。

Uniapp はページ スタックを管理するための複数の API を提供しており、最もよく使用されるのは uni.navigateBack と uni.reLaunch です。 uni.navigateBack は現在のページを閉じて前のページに戻るために使用され、uni.reLaunch はすべてのページを閉じてアプリケーションの特定のページにジャンプするために使用されます。ただし、これら 2 つの API は、指定されたページを直接閉じることをサポートしていません。そのため、指定したページを閉じる機能を実現するには、ページスタック情報を取得するAPI uni.getCurrentPagesを組み合わせる必要があります。

uni.getCurrentPages は、現在のページ スタックの情報を取得し、すべてのページ オブジェクトを含む配列を返すために使用されます。配列の最後の要素は、現在のページ オブジェクトです。この配列内のページ オブジェクトをループすることで、閉じる必要があるページ オブジェクトのインデックスを見つけ、uni.navigateBack または uni.reLauch を使用してページを閉じます。

以下はサンプル コードです:

function closePage(pageName) {
  const pages = getCurrentPages();
  const len = pages.length;
  for (let i = 0; i < len; i++) {
    const page = pages[i];
    if (page.route === pageName) {
      const delta = len - i - 1;
      uni.navigateBack({
        delta: delta,
      });
      break;
    }
  }
}

このサンプル コードは、閉じる必要があるページの名前 pageName をパラメーターとして受け取る closePage 関数を定義します。まず、uni.getCurrentPages を通じて現在のページ スタック情報を取得し、次にページ オブジェクト配列を走査し、ルート属性が pageName に等しいページ オブジェクトを見つけて、返される必要があるページのレベル数を計算し、最後に uni.navigateBack を使用して次のことを行います。対象のページを閉じます。

2. イベント バスを介してページを閉じる

イベント バスは、コンポーネント間の通信を実現するためにフロントエンド開発で広く使用されているモデルです。 Uniapp では、イベント バスを使用して、指定したページを閉じる機能などのページ間の通信を実装することもできます。

イベント バスを実装するには、vue.js の応答メカニズムを使用する必要があります。イベント バスとしてグローバル vue インスタンスを作成すると、他のコンポーネントまたはページは $emit および $ を通じてそれぞれトリガーおよび監視できます。インスタンスのメソッドに関するイベント。イベントをトリガーするときにパラメーターを渡すことができ、リスニング イベントはイベントによって運ばれるパラメーターを受け取り、それに応じて処理できます。

以下はサンプル コードです:

// event-bus.js
import Vue from 'vue';
export default new Vue();

// Page1.vue
import eventBus from '@/event-bus';
export default {
  methods: {
    onClosePage() {
      eventBus.$emit('closePage', 'Page2');
    },
  },
}

// Page2.vue
import eventBus from '@/event-bus';
export default {
  created() {
    eventBus.$on('closePage', (pageName) => {
      if (this.$options.name === pageName) {
        uni.navigateBack();
      }
    });
  },
}

このサンプル コードでは、最初にイベント バスとして機能するeventBus インスタンスが作成されます。次に、Page1 ページで、Page2 ページを閉じる必要があるときに、eventBus.$emit を使用してイベントをトリガーします。イベント名は「closePage」で、閉じる必要があるページの名前が渡されます。 Page2 ページで、イベント 'closePage' をリッスンし、this.$options.name を通じて現在のページ コンポーネントの名前を取得します。名前がイベントによって渡されたページ名 pageName と等しい場合は、uni.navigateBack を使用して閉じます現在のページ。

つまり、Uniapp では、指定したページを閉じる機能を実現するさまざまな方法が提供されており、特定のビジネス シナリオに応じて適切な方法を選択できます。個人的には、ページを閉じるのは、ページ スタック管理と uni.getCurrentPages API との組み合わせによる比較的シンプルで直感的な方法だと思います。イベント バスを介してページ間のより柔軟な通信を実現できますが、イベントの汚染や不要なパフォーマンスの問題を避けるために、イベント バスは適度に使用する必要があります。

以上がuniappでページを閉じる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。