uniappジャンプページコード

Uniapp は、WeChat ミニ プログラム、H5、App などのさまざまなプラットフォームをサポートするアプリケーションを開発できるクロスプラットフォーム開発フレームワークです。 Uniapp では、Vue.js フレームワークによって提供されるルーティング メカニズムを使用してページへのジャンプを実装する必要があります。この記事では、Uniapp でのジャンプ ページのコード実装を紹介します。

1. Vue.js のルーティング メカニズム
Vue.js は、開発者によるページ ジャンプとデータ フローの制御を容易にする強力なルーティング メカニズムを提供します。 Vue.js では、ルーティングの中心的な考え方は、さまざまなページ コンポーネントをさまざまな URL アドレスにマップすることで、URL アドレスを変更することでページ間のジャンプを実現できます。ルーティング メカニズムは、ルーターとルーター ビューという 2 つのコア コンポーネントで構成されます。

1. Router
   Router は、Vue.js でルーティングを実装するコア コンポーネントであり、URL アドレスの変更を監視し、URL アドレスの変更に基づいてさまざまなページ ビューをレンダリングする役割を果たします。 Uniapp では、pages.json ファイルにルーティング情報を構成することでルーターを初期化できます。以下は簡単な Pages.json 設定例です:

{
"pages": [

{
  "path": "pages/index/index",
  "name": "index"
},
{
  "path": "pages/detail/detail",
  "name": "detail"
}

]
}

上記ではたとえば、インデックスと詳細の 2 つのページを定義します。これら 2 つのページは、それぞれ、pages ディレクトリ内のインデックス フォルダーと詳細フォルダーに対応します。このうち、path 属性はページの URL アドレスを表し、name 属性はページの名前を表し、コード内で URL アドレスを動的に生成するために使用できます。ページでは、Vue.js のルーティング メカニズムを使用してページ間を移動できます。

2. ルーティング ビュー
   ルーティング ビューは、Vue.js でページ ビューをレンダリングするためのコア コンポーネントであり、さまざまなページ コンポーネントをさまざまな URL アドレスにレンダリングします。 Uniapp では、ページ内で 99ae171a883fff6fa2f384572360bc0a コンポーネントを使用して、現在のページに対応するビュー コンポーネントをレンダリングする必要があります。簡単なルート ビューの例を次に示します。

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ title }}</h1>
<p>{{ content }}</p>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export デフォルト {
data() {

return {
  title: 'Hello World',
  content: 'This is a Uniapp demo'
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

上記たとえば、タイトルとコンテンツを表示する単純なページ コンポーネントを定義します。コンポーネントは、対応する URL アドレスにレンダリングされます。 Uniapp は、ルーターの構成に基づいてコンポーネントを対応するページに自動的にレンダリングします。

2. Uniapp でのページ ジャンプ
Uniapp でページ ジャンプを実装するには、Vue.js が提供する組み込みメソッド $router を使用する方法と、Uniapp が提供する API インターフェイス uni.navigateTo を使用する 2 つの方法があります。 。以下にこれら 2 つの方法の実装方法をそれぞれ紹介します。

1. Vue.js が提供する組み込みメソッド $router を使用する
   $router は、Vue.js のルーティング メカニズムが提供する組み込みメソッドであり、呼び出すことでページにジャンプできます。 router.push() メソッド。単純な $router の例を次に示します。

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="goToDetail">去详情页</button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {
メソッド: {

goToDetail() {
  this.$router.push({ name: 'detail' })
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

上記例では、ボタンを定義し、 goToDetail メソッドをバインドして、ボタンをクリックした後に詳細ページにジャンプする機能を実現します。 goToDetail メソッドでは、 this.$router.push({ name: 'detail' }) メソッドを呼び出してページ ジャンプを実装します。このメソッドのパラメーターは、ジャンプ先のページの名前を含むオブジェクト (pages.json で定義) です。

2. Uniapp が提供する API インターフェイス uni.navigateTo を使用する
   Uniapp は、さまざまな機能を実装するための一連の API インターフェイスを提供します。このうち、uni.navigateToインターフェースはページジャンプ機能を実現できます。単純な uni.navigateTo の例を次に示します。

##d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="goToDetail">去详情页</button>

16b28748ea4df4d9c2150843fecfba68

3f1c4e4b6b16bbbd69b2ee476dc4f83a

デフォルトの {
メソッドをエクスポートします: {

goToDetail() {
  uni.navigateTo({ url: '/pages/detail/detail' })
}

}

}
2cacc6d41bbb37262a98f745aa00fbf0

at In上記の例では、さらにボタンを定義し、goToDetailメソッドをバインドして、ボタンをクリックした後に詳細ページにジャンプする機能を実現しています。 goToDetail メソッドでは、uni.navigateTo({ url: '/pages/detail/detail' }) メソッドを呼び出してページ ジャンプを実装します。このメソッドのパラメータは、ジャンプ先ページの URL アドレスを含むオブジェクトです。

3. 概要

Uniapp は、開発者がクロスプラットフォーム アプリケーションを迅速に構築できるようにする強力なクロスプラットフォーム開発フレームワークです。 Uniapp では、Vue.js ルーティング メカニズムと Uniapp が提供する API インターフェイスを使用してジャンプ ページを実装する必要があります。開発者は、独自のニーズに応じて、さまざまな実装方法を選択してページ ジャンプを実装できます。 $router メソッドを使用すると、より簡単かつ迅速にページジャンプを実現でき、Uniapp が提供する API インターフェースを使用すると、より柔軟にページジャンプを制御できます。

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