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

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

1. UniApp ルーティング管理

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

1. ルーティング構成

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 フィールドはページ スタイルを表します。実際のニーズに応じて構成できます。

2. ルート ジャンプ

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 でパラメータを使用してページジャンプを実装する方法を紹介します。

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

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 パラメータを通じて取得できます。

2. ページ受信パラメータ

場合によっては、ページ ジャンプによるページ間の通信を実現する必要がある場合があります。たとえば、ログイン ページからホームページにジャンプし、ホームページにユーザー情報を表示します。以下では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 サイトの他の関連記事を参照してください。