uniappでページパラメータを設定する方法

モバイル アプリケーション開発の急速な発展に伴い、クロスプラットフォーム アプリケーションを迅速に構築するために uniapp を使用する開発者が増えています。ただし、ページを作成するときに、ページにパラメーターを渡す必要がある場合があり、これらのパラメーターは他のページから渡される可能性があります。では、uniapp はどのようにページパラメータを設定するのでしょうか?この記事では、uniappでページパラメータを設定する方法を詳しく紹介します。

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

URL を介してパラメータを渡すことができます。これは非常に一般的な方法です。 uniapp では、ルーティング ジャンプを使用してこれを実現できます。まず、元のページに渡す必要があるパラメータを設定します。

uni.navigateTo({
  url: '/pages/target/target?id=1&name=uniapp'
})

ターゲット ページにジャンプするとき、URL のクエリ パラメータを通じてデータを運ぶことができます。ターゲット ページでは、次の方法でパラメータを取得できます。

export default {
  onLoad(options) {
    console.log(options.id) // 输出 1
    console.log(options.name) // 输出 uniapp
  }
}

ここでは、onLoad ライフ サイクル フック関数を使用してパラメータを取得します。 onLoad 関数は、ページが読み込まれるときにトリガーされ、URL に含まれるパラメーターを取得できるフック関数です。

2. グローバル データを介してパラメータを渡す

グローバル データを介してパラメータを渡すこともできます。 uniapp では、vuex を使用してグローバル データを管理できます。 vuex でグローバル変数を定義して、渡す必要があるパラメータを保存し、ターゲット ページで対応するパラメータを取得できます。

まず、vuex の状態で渡す必要があるパラメーターを定義します:

const state = {
  userInfo: {
    id: 1,
    name: 'uniapp',
    age: 18
  }
}

次に、元のページで次の方法でパラメーターを設定できます:

store.commit('setUserInfo', state.userInfo)

ここでは vuex の commit 関数を使用してグローバルデータを更新します。 setUserInfo は、userInfo の値を更新するために使用される突然変異関数です。

ターゲット ページでは、次の方法でパラメータを取得できます。

export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }
}

ここでは、計算プロパティを使用して userInfo の値を取得します。 $store は vuex によって提供されるグローバル状態管理オブジェクトであり、任意のコンポーネントで直接使用できます。

概要

uniapp では、URL とグローバル データを介してパラメーターを渡すことができますが、どちらの方法にも独自の長所と短所があります。 URL 経由でパラメータを渡すと、アプリケーションの柔軟性が高まりますが、パラメータの種類の数は制限されています。グローバル データ経由でパラメータを渡すと、コードの結合を減らすことができますが、より多くのメモリ領域を消費します。これを使用する場合は、特定のアプリケーション シナリオに応じてパラメーターを渡す適切な方法を選択する必要があります。

上記は、uniapp がページパラメータを設定する方法についての紹介です。

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