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 では、ページ内で コンポーネントを使用して、現在のページに対応するビュー コンポーネントをレンダリングする必要があります。簡単なルート ビューの例を次に示します。

<script><br>export デフォルト {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { title: 'Hello World', content: 'This is a Uniapp demo' }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

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

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

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

<script><br>デフォルトのエクスポート {<br> メソッド: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>goToDetail() { this.$router.push({ name: 'detail' }) }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>}<br></script>

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

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