UniAppのページジャンプとバリュー転送の方法を詳しく紹介

近年、モバイル インターネット技術の発展とモバイル デバイスの普及により、APP の開発はビジネスを拡大するためのファッショナブルかつ効率的な方法となっています。 UniApp は、クロスプラットフォーム開発ツールとして、アプリケーション開発プロセスにおいて非常に便利で効率的です。ただし、UniApp アプリケーションの開発に伴うページジャンプやパラメータ転送などの開発には特殊な方法が必要となるため、今回は UniApp のページジャンプと値転送の方法について詳しく紹介します。

1. URL を使用してパラメータを渡す

UniApp でのページ ジャンプと値の受け渡しの方法は、URL を使用してパラメータを渡すことであり、これは一般的な Web で使用されるパラメータの URL 渡しと同様です。発達。 URL にパラメータを追加し、ジャンプ後のページ内のコンポーネント オブジェクトのクエリ属性を通じてこれらのパラメータを取得できます。

2 つのインターフェイス A と B があるとします。ページ A のページ B にジャンプし、いくつかのパラメーターをページ B に渡す必要があります。次のコードを使用して、ページ ジャンプとパラメータ転送を実現できます。

// 在A页面中，点击按钮跳转到B页面，并传递参数
<template>
  <view>
    <button @click="navigateToB">跳转到B页面</button>
  </view>
</template>

<script>
  export default {
    methods: {
      navigateToB() {
        uni.navigateTo({
          url: '/pages/B/B?id=123&name=UniApp',
          success: function(res) {
            console.log('跳转到B页面成功')
          }
        })
      }
    }
  }
</script>

上記のコードでは、uni.navigateTo メソッドを使用してページ B へのページ ジャンプを実現し、パラメータ ID と名前を次のように変更します。 Key-Value 形式が URL に追加されました。ページ B では、以下に示すように、this.$route.query メソッドを通じてこれらのパラメーターを取得できます。

// 在B页面中，获取A页面传递的参数
<script>
  export default {
    mounted() {
      console.log(this.$route.query)
    }
  }
</script>

この方法で、ページ ジャンプとパラメーターの受け渡しをより簡単に実現できます。ただし、URL を手動で結合する必要があり、エラーが発生しやすく、パラメータの受け渡しは文字列型にのみ適用されます。

2. uni-app が提供する API を使用する

UniApp は、URL パラメーターの使用に加えて、ページ ジャンプとパラメーター転送を実装するための API も提供します。具体的な実装は次のとおりです。

// 在A页面中，点击按钮跳转到B页面，并传递参数
<template>
  <view>
    <button @click="navigateToB">跳转到B页面</button>
  </view>
</template>

<script>
  export default {
    methods: {
      navigateToB() {
        uni.navigateTo({
          url: '/pages/B/B',
          eventChannel: {
            emit: 'acceptDataFromA',
            data: {
              id: 123,
              name: 'UniApp'
            }
          },
          success: function(res) {
            console.log('跳转到B页面成功')
          }
        })
      }
    }
  }
</script>

上記のコードでは、eventChannel を使用してページ間のパラメータ転送を実装します。ページ A からページ B にジャンプするとき、最初にイベント チャネル eventChannel を作成し、次に eventChannel.data オブジェクトに渡す必要があるパラメーターを追加します。ジャンプが成功すると、このイベント チャネルの名前 acceptDataFromA とデータ eventChannel.data をページ B に渡します。ページ B では、次のコードを通じてこれらのパラメーターを受け取ることができます:

// 在B页面中，接受A页面传递的参数
<script>
  export default {
    created() {
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.on('acceptDataFromA', (data) => {
        console.log(data)
      })
    }
  }
</script>

この方法で、URL を手動で結合することなくページ ジャンプとパラメーター転送を実現し、さまざまな種類のパラメーター受け渡しをサポートします。

概要

UniApp アプリケーション開発では、ページ ジャンプとパラメータの受け渡しは比較的重要なリンクです。 URL パラメータの受け渡しと API の使用法を調査すると、UniApp にはページ ジャンプとパラメータの受け渡しを実装するためのさまざまなメソッドが用意されていることがわかります。これらのメソッドにはそれぞれ独自のメリットがあり、開発者は実際のニーズに応じて適切なメソッドを選択できます。

開発者は、UniApp アプリケーション、マスター ページ ジャンプ、パラメータ転送を開発する際に、さまざまな方法を積極的に探索して試し、それらを独自のビジネス シナリオに柔軟に適用することをお勧めします。このようにして、アプリケーションの開発効率とユーザー エクスペリエンスを向上させるだけでなく、自分自身により多くの価値をもたらすことができます。

以上がUniAppのページジャンプとバリュー転送の方法を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。