uniappでパラメータを取得するためにジャンプする方法

1. uniapp の概要

uniapp はクロスプラットフォーム アプリケーションを開発するためのツールであり、vue.js 開発フレームワーク、WebStorm IDE、および HBuilderX 統合開発環境を使用して、WeChat アプレット、Alipay の開発をサポートします。アプレット、Baidu ミニ プログラム、Toutiao ミニ プログラム、H5、アプリ、その他のアプリケーション。

2. uniapp ジャンプ ページ

uniapp では、ページ ジャンプはルーティングによって実行されます。ルーティングの基本的な構成要素には、パスとパラメータが含まれます。このうち、パスはジャンプ先のページ パスを指定するために使用され、パラメータは ID、名前などの追加情報です。

uniapp では、uni.navigateTo() 関数を使用してページ ジャンプ操作を完了します。具体的な実装手順は次のとおりです:

1. ボ​​タンまたはリンクを定義します。ボタンまたはリンクがクリックされると、ジャンプ操作が実行されます。

<button @click="toDetail">跳转到详情页</button>

2. toDetail メソッド内、 uni .navigateTo() 関数を呼び出し、ジャンプする必要があるページのパスをパラメータとして渡します;

toDetail() {
   uni.navigateTo({
        url:'./detail?id=1'
   })
}

3. ジャンプ先のページで、this.$route.query を通じて渡されたパラメータを取得します。 .id.

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

3. uniapp がページ パラメーターを取得する方法

uniapp でページ パラメーターを取得するには、クエリとパラメーターの 2 つの主な方法があります。前の例では、クエリを使用してパラメータの受け渡しと取得を行いました。

1. クエリ パラメータ

クエリ パラメータは URL 内のパラメータです。uni.navigateTo() 関数によるジャンプの完了後、パラメータは結合されます。ターゲット ページの URL (例: ./detail?id=1)。ターゲット ページでは、渡されたパラメータは this.$route.query を通じて取得できます。

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.query.id;
      }
   }
</script>

2. params パラメータ

params パラメータはルーティング オブジェクトを通じて渡されるパラメータで、ジャンプ時に uni.navigateTo() 関数の 2 番目のパラメータを通じて渡されます。ページへ。ターゲット ページでは、渡されたパラメータは this.$route.params を通じて取得できます。

toDetail() {
   uni.navigateTo({
        url:'./detail',
        params: {
            id: 1
        }
   })
}

<template>
   <div>
      <p>获取到的参数为：{{id}}</p>
   </div>
</template>
<script>
   export default {
      data() {
         return {
            id: ''
         }
      },
      onLoad() {
         this.id = this.$route.params.id;
      }
   }
</script>

概要

この記事の導入部を通じて、uniapp がページ ジャンプを実行する基本的な方法とページ パラメーターを取得する方法を理解しました。実際のプロジェクトでは、特定のビジネス ニーズに応じて、パラメータの転送および取得に適切な方法を選択する必要があります。これらの基本知識を学習して習得することで、uniapp をより適切に開発し、開発効率を向上させ、ユーザーにより良いアプリケーション エクスペリエンスを提供することができます。

以上がuniappでパラメータを取得するためにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。