uniapp のさまざまなページでパラメータを渡す

モバイル インターネットの人気に伴い、モバイル アプリケーションの開発はますます注目を集めています。 Uniapp は、最も人気のあるクロスプラットフォーム開発フレームワークの 1 つとして、モバイル アプリケーションの開発に広く使用されています。 Uniapp の開発において、異なるページ間でパラメータを転送する方法は非常に一般的な問題ですが、この記事では、Uniapp の異なるページ間でパラメータを転送する方法をいくつかの側面から紹介します。

1. クエリ パラメータの受け渡し

Uniapp では、ページのクエリ パラメータを通じてパラメータを渡すことができます。たとえば、ホームページ上のボタンをクリックして詳細ページにジャンプし、製品 ID を詳細ページに渡すことができます。コードは次のように実装されます:

// ホーム ページのジャンプ コード
uni.navigateTo( {
url: '/pages/detail/detail?id=' this.goodsId
});

// 詳細ページでコードを取得
onLoad(options) {
this.goodsId = options.id;
}

ホームページでは、uni.navigateTo メソッドを通じて詳細ページにジャンプし、製品 ID をクエリパラメータを介して詳細ページにアクセスします。詳細ページでは、onLoadメソッドのoptionsパラメータを通じて渡された商品IDを取得し、詳細ページに対応する変数goodsIdに代入します。

2. Vuex パラメータ転送

Uniapp では、Vuex を使用して異なるページ間でパラメータを転送できます。 Vuex は、Vue.js フレームワーク向けに特別に設計された状態管理ライブラリであり、異なるコンポーネント間の状態共有を実現できます。 Uniappでは、Vuexでグローバル変数を定義し、パラメータの受け渡しが必要なページにVuexを導入することで、ページ間のパラメータの受け渡しを実現します。

たとえば、Vuex 状態でグローバル変数 GoodsId を定義し、ホームページで変数の値を変更し、詳細ページで変数の値を取得することができます。コードは次のように実装されます。

// Vuex の状態でグローバル変数 GoodsId
state を定義します: {
GoodsId: ''
}

// ホームページでこの変数の値を変更します
methods: {
JumpToDetail() {

this.$store.state.goodsId = '123456';
uni.navigateTo({
  url: '/pages/detail/detail'
});

}
}

// 詳細ページでこの変数の値を取得します
computed: {
GoodsId() {

return this.$store.state.goodsId;

}
}

ホームページでは、this.$store.state.goodsId を通じてグローバル変数 GoodsId に値を代入し、ジャンプしますuni.navigateTo メソッドによる詳細ページ。詳細ページでは、計算された属性を通じて Vuex の GoodsId 変数を取得し、渡された値を取得します。

3. イベント バス パラメーターの転送

Uniapp では、イベント バスを使用して、異なるページ間でパラメーターを転送することもできます。イベント バスは、イベントをリッスンしてイベントをトリガーすることで、さまざまなコンポーネントが通信してパラメーターを渡すことを可能にする設計パターンです。 Uniapp では、uni.$emit メソッドと uni.$on メソッドを使用してイベントを監視し、トリガーできます。

たとえば、ホームページの uni.$emit メソッドを通じてイベントをトリガーし、詳細ページの uni.$on メソッドを通じてイベントをリッスンして、パラメータの転送を実現できます。次のように実装されます:

// uni.$emit を使用してホームページ上でイベントをトリガーします
methods: {
JumpToDetail() {

uni.$emit('goodsId', '123456');
uni.navigateTo({
  url: '/pages/detail/detail'
});

}
}

// 詳細ページで uni.$on を使用してイベントをリッスンします
onLoad() {
uni.$on('goodsId', (goodsId) => {

this.goodsId = goodsId;

});
}

ホームページでは、uni.$emit メソッドを通じて「goodsId」という名前のイベントをトリガーし、製品 ID「123456」をパラメータとして渡します。詳細ページでは、onLoad メソッドの uni.$on メソッドを通じて「goodsId」という名前のイベントをリッスンし、渡された製品 ID を詳細ページに対応する変数 GoodsId に割り当てます。

要約すると、Uniapp の異なるページ間のパラメータ転送は、クエリ パラメータ転送、Vuex パラメータ転送、およびイベント バス パラメータ転送を通じて実現できます。開発者は、実際のニーズに基づいてパラメータを渡す適切な方法を選択し、アプリケーションの機能要件をより適切に実現できます。

以上がuniapp のさまざまなページでパラメータを渡すの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。