ユニアプリルーティングを構成する方法

モバイル アプリケーションの人気と需要が高まるにつれ、ますます多くの開発者がクロスプラットフォーム開発テクノロジを使用してアプリケーションを構築し始めています。クロスプラットフォーム開発フレームワークとしての UniApp は、この傾向の中で徐々に登場し、ますます多くの開発者に歓迎されています。ルーティングは、UniApp でアプリケーションを開発する場合に非常に重要なコンポーネントであり、これにより、異なるページ間を移動できるようになります。

UniApp では、ルーティングはアプリケーションのページ ジャンプとナビゲーションを制御するために使用されます。 Vue.js のルーティング メカニズムにすでに慣れている場合は、UniApp のルーティングを使用するときに非常に親しみを感じるでしょう。 UniApp のルーティング メカニズムは Vue.js ルーティングとの互換性があり、いくつかの追加機能と API を提供します。

初心者にとって、UniApp ルーティングの用途は最初は明確ではないかもしれません。UniApp ルーティングのどこに記入すればよいでしょうか?次の記事では、UniApp ルーティングの適用方法とどこに記入するかを詳しく紹介します。

1. ルーティング構成ファイル

UniApp では、ルーティング構成ファイルでルーティングを構成できます。ルーティング構成ファイルは通常、ルート ディレクトリの pages.json ファイルにあり、その機能はアプリケーションのルーティング マッピング テーブルを構成することです。ルーティング設定ファイルでは、各ページのパス、ページ タイトル、ページ アイコン、その他の属性を指定する必要があります。ページをナビゲーション バーに追加する必要がある場合は、tabBar# も指定する必要があります。 ＃＃ 属性。以下は、単純なルーティング構成ファイルの例です。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们",
        "navigationBarBackgroundColor": "#ffffff"
      },
      "tabBar": {
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    }
  ],
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#35b4b4",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "../../static/images/tabbar/home.png",
        "selectedIconPath": "../../static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    ]
  }
}

上記のコードでは、

index と about という 2 つのページを定義し、 A tabBar 属性が about ページに追加され、ナビゲーション バー内のページの位置とスタイルを指定します。同時に、アプリケーションのナビゲーション バーのスタイルも定義します。この例では、index ページをナビゲーション バーのホームページとして使用するため、これを tabBar プロパティのデフォルト ページとして設定します。

UniApp ルーティング API を使用する

UniApp は、ルーティング構成ファイル内のルーティング構成に加えて、ビジネス ロジックで柔軟に使用できるルーティング API の完全なセットも提供します。 。 使用。これらの API には、

uni.navigateTo、uni.redirectTo、uni.reLaunch、uni.switchTab、および uni.navigateBack が含まれます。 ＃ ＃＃待って。

uni.navigateTo

• 現在のページからアプリケーション内のページにジャンプします。ターゲット ページが開かれていない場合、API は新しいページを開きます。ターゲット ページがすでに開いている場合、API はターゲット ページをスタックの一番上に置きます。

uni.navigateTo({
  url: '/pages/about/about'
});

uni.redirectTo

• 現在のページを閉じて、アプリケーション内の特定のページにジャンプします。この API は現在のページを閉じるため、「戻る」ボタンで現在のページに戻ることはできません。

uni.redirectTo({
  url: '/pages/about/about'
});

uni.reLaunch

• すべてのページを閉じて、アプリケーションの特定のページを開きます。

uni.reLaunch({
  url: '/pages/about/about'
});

uni.switchTab

• アプリケーションの

tab

ページにジャンプします。この API は、アプリケーションにジャンプするためにのみ使用できます。 タブページ。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">uni.switchTab({   url: '/pages/index/index' });</pre><div class="contentsignin">ログイン後にコピー</div></div>

uni.navigateBack

• 現在のページを閉じて、前のページに戻ります。

uni.navigateBack({
  delta: 1  // 返回的页面数，如果为空，则返回上一个页面
});

概要

3. UniApp では、ルーティングはアプリケーションのジャンプとナビゲーションの重要な部分です。アプリケーションを開発するときは、ルーティング構成ファイルとルーティング API を通じてルーティングを構成して使用できます。ルーティング構成ファイルはページの位置とスタイルを適切に制御できますが、ルーティング API は柔軟なプログラミング方法を提供し、ビジネス ロジックでページを柔軟にジャンプしたりナビゲートしたりできます。 UniApp ルーティング メカニズムの使用方法を学ぶと、開発に大きな利便性と効率性をもたらすことができます。

以上がユニアプリルーティングを構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。