ルート管理とページジャンプを実現するUniAppの設計・開発実践-uni-app-php.cn

UniApp は、Vue.js に基づくクロスプラットフォームアプリケーション開発フレームワークであり、一度作成すれば複数の端末で実行できます。 UniApp では、ルーティング管理とページジャンプの実装は非常に一般的な要件です。この記事では、UniApp でのルーティング管理とページジャンプの設計と開発の実践について説明し、対応するコード例を示します。

1. UniApp ルーティング管理

UniApp では、ルーティング管理には主に、ルーティング設定とルーティングジャンプの 2 つの側面が含まれます。以下では、これら 2 つの側面をそれぞれ紹介します。

ルーティング構成

UniApp のルーティング構成は、主にプロジェクトのpages.jsonファイルで実行されます。pages.jsonファイルでは、ページパス、ページ名、ページスタイル、その他の情報を構成できます。例は次のとおりです。

{ "pages": [ { "path": "pages/home/home", "name": "home", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/login/login", "name": "login", "style": { "navigationBarTitleText": "登录" } } ] }

ログイン後にコピー

上の例では、homeとloginという 2 つのページを定義しました。pathフィールドはページのパスを表し、nameフィールドはページ名を表し、styleフィールドはページスタイルを表します。実際のニーズに応じて構成できます。

ルートジャンプ

UniApp のルートジャンプは、uni.navigateToまたはuni.redirectToメソッドを通じて実装されます。uni.navigateToメソッドは、現在のページを保持し、アプリケーション内のページにジャンプし、uni.navigateBackを通じて前のページに戻ります。uni.redirectTo現在のページを閉じて、アプリケーション内のページにジャンプする方法です。例は次のとおりです。

// 在某个页面的点击事件中跳转到home页面 uni.navigateTo({ url: '/pages/home/home' }); // 在某个页面的点击事件中跳转到login页面 uni.redirectTo({ url: '/pages/login/login' });

ログイン後にコピー

上記の例では、uni.navigateToまたはuni.redirectToメソッドを呼び出してパスを渡すことで、ルーティングを実装できます。対象ページのジャンプします。必要に応じて、さまざまな状況でさまざまな方法を使用できます。

2. UniApp ページジャンプの設計と開発の実践

実際の開発では、あるページから別のページにジャンプして、いくつかのパラメーターを渡す必要がある場合があります。以下では、UniApp でパラメータを使用してページジャンプを実装する方法を紹介します。

ページパラメーターの受け渡し

UniApp では、ページパラメーターの受け渡しはuni.navigateToまたはuni.redirectToを通じて行うことができます。これは、メソッド内でパラメータオブジェクトを渡すことによって実現されます。例は次のとおりです。

// 在某个页面的点击事件中跳转到另一个页面，并传递参数 uni.navigateTo({ url: '/pages/detail/detail?id=1&name=test' });

ログイン後にコピー

上記の例では、ターゲットページの URL パラメータにパラメータを追加することでパラメータを渡すことができます。ターゲットページでは、渡されたパラメータはuni.getLaunchOptionsSync().queryメソッドを通じて取得できます。例は次のとおりです。

export default { onLoad(query) { console.log(query.id); // 输出1 console.log(query.name); // 输出test } }

ログイン後にコピー

ターゲットページのonLoadライフサイクル関数では、渡されたパラメータはqueryパラメータを通じて取得できます。

ページ受信パラメータ

場合によっては、ページジャンプによるページ間の通信を実現する必要がある場合があります。たとえば、ログインページからホームページにジャンプし、ホームページにユーザー情報を表示します。以下ではUniAppでページ通信を実装する方法を紹介します。

まず、ログインページでユーザー情報を保存するグローバル変数を定義します。例は次のとおりです。

// 登录成功后保存用户信息 uni.setStorageSync('userInfo', { id: 1, name: 'test' });

ログイン後にコピー

次に、ホームページのuni.getStorageSyncメソッドを通じてユーザー情報を取得します。例は次のとおりです。

export default { data() { return { userInfo: {} }; }, onLoad() { // 获取用户信息 this.userInfo = uni.getStorageSync('userInfo'); } }

ログイン後にコピー

上記の例では、格納されているユーザー情報はuni.getStorageSyncメソッドを呼び出して取得され、userInfoに割り当てられます。変数。ページが読み込まれると、ユーザー情報を取得し、関連する操作を実行できます。

概要:

この記事の導入部を通じて、UniApp でのルーティング管理とページジャンプの設計と開発の実践について学びました。ルート構成とルートジャンプは、pages.jsonファイルとuni.navigateToまたはuni.redirectToメソッドで完了できます。ページ間の通信は、ページジャンプ中にパラメータを渡すことによって実現できます。この記事の内容が、UniApp開発におけるルーティング管理やページジャンプに携わる皆様のお役に立てれば幸いです。

以上がルート管理とページジャンプを実現するUniAppの設計・開発実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。