uniappでページジャンプと値の転送を実装する方法

モバイルインターネットの発展に伴い、APP開発は一定の人気を博していますが、APP開発には多くの技術的な困難があり、その中でもページジャンプやパラメータ転送などは習得しなければならない技術の一つです。マルチターミナル開発フレームワークとして、uniapp はページ ジャンプと値転送のよりシンプルで便利な実装を備えています。この記事では、uniapp ページでジャンプして値を渡す方法に焦点を当てます。

1. Uniapp ページジャンプ

uniapp ページにジャンプするには、下部のタブバーからページにジャンプする方法と、コードを介してページを変更します。

1. 下部タブ バーを介したページ ジャンプ

uniapp フレームワークでは、uniapp の組み込み下部タブ バーを介してページ ジャンプを実行できます。ページジャンプを実現するには、pages.json ファイルで下部のタブバーを設定し、タブバーにジャンプするページのパスを追加します。

以下は、下部タブ バーのコードを設定するための簡単な Pages.json ファイルです:

{
  "pages": [
    //tab栏页面
    {
      "path": "pages/index/index",
      "name": "index",
      "iconPath": "static/img/tab-home.png",
      "selectedIconPath": "static/img/tab-home-selected.png"
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "iconPath": "static/img/tab-mine.png",
      "selectedIconPath": "static/img/tab-mine-selected.png"
    }
  ],
  "globalStyle": {
    "navigationBarTitleText": "uni-app"
  },
  "tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#333",
    "selectedColor": "#007aff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/img/tab-home.png",
        "selectedIconPath": "static/img/tab-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/img/tab-mine.png",
        "selectedIconPath": "static/img/tab-mine-selected.png"
      }
    ]
  }
}

2. コードによるページ ジャンプの実装

ページ ジャンプ スルーの要件コード uniapp フレームワークによって提供される uni.navigateTo メソッドと uni.redirectTo メソッドを使用します。前者は現在のページを保持してアプリケーション内の特定のページにジャンプしますが、後者は現在のページを閉じてアプリケーション内の特定のページにジャンプします。

次は、コードによるページ ジャンプのサンプル コードです:

//保留当前页面，并跳转到某个页面
uni.navigateTo({
    url: 'pages/detail/detail?id=123'
});

//关闭当前页面，并跳转到某个页面
uni.redirectTo({
    url: 'pages/login/login'
});

//返回上一页面
uni.navigateBack();

2. uniapp ページでの値の受け渡し

一部のシナリオでは、次のことが必要です。ページからデータを転送 別のページに渡されます。 uniapp ページ値の転送では、フロントエンドで URL パラメータ転送と Vuex 状態管理という 2 つの一般的な方法がよく使用されます。

1.URLパラメータの受け渡し

ユニアプリでは、URLパラメータの受け渡しを利用することも一般的で、目的のページにジャンプする際にパラメータとして渡す必要があるデータをつなぎ合わせることができます。 URL アドレスを取得し、ターゲット ページの $Route オブジェクトを通じて取得します。

以下は、URL パラメーターを渡すための簡単なコード例です。

//ターゲット ページにジャンプし、ID をパラメーターとして渡します
uni.navigateTo({
url : '/pages/detail/detail?id=12'
});

//ターゲット ページのパラメータを取得
デフォルトのエクスポート {
data () {

return {
  id: ''
}

},
onLoad (オプション) {

this.id = options.id

}
}

2.Vuex状态管理

另一种方式是使用Vuex状态管理。通过Vuex将数据存储在全局store对象中，从而实现多个页面间数据的共享。

下面是一个Vuex状态管理的示例代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: 'uniapp'
  },
  mutations: {
    setName (state, name) {
      state.name = name;
    }
  }
});

export default store;

//需要传递数据的页面
import { mapState } from 'vuex';

export default {
  data() {
    return {
      inputName: ''
    };
  },
  methods: {
    setName() {
      this.$store.commit('setName', this.inputName);
    }
  }
};

//需要获取数据的页面
import { mapState } from 'vuex';

export default {
  computed: mapState({
    name: state => state.name
  })
};

上記のコードでは、最初にグローバル ストア オブジェクトが定義され、状態が定義されます。状態のデータを更新するための突然変異メソッド。データを転送する必要があるページでデータを変更する必要がある場合は、mutations メソッドを呼び出して状態内のデータを更新します。データを取得する必要があるページがデータを取得する必要がある場合、計算された属性を通じて mapState メソッドが呼び出され、状態内のデータを取得します。

まとめ:

上記は、uniapp のページジャンプと値の転送、URL パラメータの受け渡し、Vuex の状態管理の 2 つの方法であり、アプリケーション開発プロセスでは、ビジネスに応じて適切な方法を選択する必要があります。ページ ジャンプとデータ転送を実行して、効率的で安定した保守可能なアプリケーションを実現します。

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