uniappで外部ページにジャンプする方法

モバイル アプリケーションの人気に伴い、アプリケーション内の外部ページにジャンプする必要性がますます高まっています。この機能は uniapp にも存在します。この記事ではuniappで外部ページにジャンプする方法を紹介します。

1. uniapp で外部ページにジャンプするための API

uniapp では、uni.navigateTo() 関数を使用して新しいページを開きます。 uniapp内のページまたは外部ページにジャンプできます。 URL という 1 つのパラメータを受け入れます。

URL は http、https、ftp、tel、sms、mailto などのプロトコルで始まる文字列です。 URL が http または https で始まる場合、ブラウザが直接開かれ、そのアドレスにジャンプします。

2. 外部ページへのジャンプの実装

実際の開発では、ボタンクリック後に外部ページへジャンプする機能を実装する必要があります。

まず、uniapp プロジェクトのページ フォルダーの下に外部ページなどの新しいページを作成します。次のコードを外部ページの vue ファイルに追加します。

<template>
  <div class="container">
    <h1>这里是外部页面</h1>
  </div>
</template>

<script>
export default {
  name: 'OuterPage',
  mounted () {
    setTimeout(() => {
      this.jump()
    }, 2000)
  },
  methods: {
    jump () {
      uni.navigateTo({
        url: 'https://www.baidu.com'
      })
    }
  }
}
</script>

ここでは、ページにマウントされたフックに 2 秒の遅延を設定し、jump() メソッドを呼び出します。 Jump() メソッドで、uni.navigateTo() 関数を使用して外部 URL https://www.baidu.com にジャンプします。この方法では、ジャンプ ボタンをクリックするだけで外部ページが開いていることを確認できます。

次に、uniappプロジェクトのエントリーページに外部ページにジャンプするボタンを追加します。エントリ ページの vue ファイルに、次のコードを追加します:

<template>
  <div class="container">
    <h1>这里是uniapp项目入口页</h1>
    <button @click="jump">跳转到外部页面</button>
  </div>
</template>

<script>
export default {
  name: 'Index',
  methods: {
    jump () {
      uni.navigateTo({
        url: '/pages/outerPage/outerPage'
      })
    }
  }
}
</script>

ここでは、ページにボタンを追加します。ユーザーがボタンをクリックすると、jump() メソッドが呼び出され、uni.navigateTo( ) 関数は外部ページにジャンプするために使用されます。

3. 概要

uniapp で外部ページにジャンプするのは非常に簡単です。 uni.navigateTo() 関数を使用し、外部ページの URL アドレスを渡すだけでジャンプできます。ただし、他のミニ プログラム ページにジャンプする必要がある場合は、uni.navigateToMiniProgram() 関数を使用する必要があることに注意してください。この記事の紹介で、外部ページにジャンプする方法はすでに十分にマスターできると思います。

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