uniappでパラメータを渡す方法

モバイル アプリケーションの人気とユーザーのニーズの変化に伴い、開発に uniapp を使用する開発者が増えています。ただし、発生する重要な問題は、異なるページ間でパラメータを渡す方法です。この記事ではuniappでパラメータを渡す方法を詳しく紹介します。

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

URL は、コンピューター ネットワーク内のファイルの場所を記述する方法です。 uniapp では、パラメータを URL 経由で渡すことができます。 Web 開発では、クエリ文字列を介してパラメーターを渡すことができます。 uniapp で URL パラメーターを渡すには、ルート ジャンプと h5 ページ ジャンプの 2 つの方法があります:

1. ルート ジャンプ

Uniapp は、ルーティング関連の API をいくつか提供します。そのうちの 2 つの API は uni. navigateTo と uni.redirectTo はジャンプ時にパラメータを運ぶことができます。ジャンプするとき、パラメーターはオブジェクトの形式で URL に渡され、クエリ文字列の形式で表現されます。以下に示すように:

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=apple'
})

ジャンプ中のページでは、渡されたパラメータに this.$route.query オブジェクトを通じてアクセスできます。

export default {
  mounted() {
    console.log(this.$route.query.id) // 123
    console.log(this.$route.query.name) // 'apple'
  }
}

なお、ルートジャンプで渡されたパラメータはナビゲーションバーの履歴に保存されるため、戻る操作で前のページに戻ってパラメータを引き継ぐことができます。 。

2.h5 ページジャンプ

uniapp では、location.search を通じて URL 内のクエリ文字列とパラメータを取得できます。例:

var url = window.location.search; // ?id=123&name=apple
var obj = {};
if (url.indexOf("?") != -1) {
  url = url.substr(1); // id=123&name=apple
  var arr = url.split("&");
  for(var i = 0; i < arr.length; i++) {
    var tmp = arr[i].split("=");
    obj[tmp[0]] = tmp[1];
  }
}
console.log(obj.id); // 123
console.log(obj.name); // 'apple'

注意事項 はい、h5 ページにジャンプする場合、URL を手動で処理する必要があります。

2. Vuex を介してパラメータを渡す

uniapp では状態管理に Vuex を使用できるため、Vuex を介してパラメータを渡すこともできます。

1. ページにストアを作成する

各ページでは、まずパラメータを渡すストアを作成する必要があります。以下に示すように:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    id: '',
    name: ''
  },
  mutations: {
    SET_ID(state, id) {
      state.id = id
    },
    SET_NAME (state, name) {
      state.name = name
    }
  }
})

export default store

次のようにストアをページに導入します:

import store from '@/store/index'

2. ページ内でパラメータを渡します

パラメータを渡す必要がある場所ページでは、ミューテーションを送信することでパラメータをストアに渡すことができます。以下に示すように:

export default {
  methods: {
    handleClick() {
      this.$store.commit('SET_ID', '123')
      this.$store.commit('SET_NAME', 'apple')
    }
  }
}

ミューテーションを送信すると、ストア内の対応する状態が更新されます。

3. ページでパラメータを取得する

パラメータを取得する必要があるページでは、ストアに保存されているパラメータを $store.state オブジェクトを通じて取得できます。以下に示すように:

export default {
  mounted() {
    console.log(this.$store.state.id) // 123
    console.log(this.$store.state.name) // 'apple'
  }
}

Vuex をパラメータの受け渡しに使用するには、Vuex の導入が必要であり、各ページにストアを作成する必要があることに注意してください。

概要

uniapp では、URL と Vuex を介してパラメーターを渡すことができます。単純なパラメータの受け渡しの場合は、URL を使用してパラメータを渡すことを選択でき、特定の状況に応じてルート ジャンプまたは h5 ページ ジャンプを選択できます。複雑なシナリオの場合は、パラメーターの受け渡しに Vuex を使用することを選択できますが、各ページでのストアの作成に注意する必要があります。どの方法を使用する場合でも、実際のニーズに基づいて選択する必要があります。

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