So springen Sie in Uniapp zu einer externen Seite

Mit der Beliebtheit mobiler Anwendungen müssen wir zunehmend zu externen Seiten in der Anwendung springen. Diese Funktionalität ist auch in uniapp vorhanden. In diesem Artikel erfahren Sie, wie Sie in Uniapp zu externen Seiten springen.

1. API zum Springen zu externen Seiten in Uniapp

Verwenden Sie in Uniapp die Funktion uni.navigateTo(), um eine neue Seite zu öffnen. Es kann zu Seiten in Uniapp oder zu externen Seiten springen. Es akzeptiert einen Parameter: URL.

URL ist eine Zeichenfolge, die mit http, https, ftp, tel, sms, mailto und anderen Protokollen beginnt. Wenn die URL mit http oder https beginnt, wird der Browser direkt geöffnet und zu dieser Adresse gesprungen.

2. Sprung zu einer externen Seite implementieren

In der tatsächlichen Entwicklung müssen wir eine Funktion implementieren, die nach dem Klicken auf eine Schaltfläche zu einer externen Seite springt.

Erstellen Sie zunächst eine neue Seite im Seitenordner des Uniapp-Projekts, beispielsweise eine sogenannte externe Seite. Fügen Sie den folgenden Code zur Vue-Datei der externen Seite hinzu:

<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>

Hier legen wir eine Verzögerung von 2 Sekunden im auf der Seite gemounteten Hook fest und rufen dann eine Methode „jump()“ auf. Verwenden Sie in der Methode „jump()“ die Funktion „uni.navigateTo()“, um zur externen URL https://www.baidu.com zu springen. Auf diese Weise müssen wir nur auf die Sprungschaltfläche klicken, um zu sehen, wie die externe Seite geöffnet wird.

Fügen Sie als Nächstes eine Schaltfläche zur Einstiegsseite des Uniapp-Projekts hinzu, um zur externen Seite zu springen. Fügen Sie in der Vue-Datei der Einstiegsseite den folgenden Code hinzu:

<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>

Hier fügen wir der Seite eine Schaltfläche hinzu. Wenn der Benutzer auf die Schaltfläche klickt, wird die Methode „jump()“ aufgerufen und die Funktion „uni.navigateTo()“ verwendet um zur externen Seite zu springen.

3. Zusammenfassung

Es ist sehr einfach, in Uniapp zu einer externen Seite zu springen. Verwenden Sie einfach die Funktion uni.navigateTo() und übergeben Sie die URL-Adresse der externen Seite, um den Sprung zu erreichen. Beachten Sie jedoch, dass Sie die Funktion uni.navigateToMiniProgram() verwenden müssen, wenn Sie zu anderen Miniprogrammseiten springen müssen. Durch die Einleitung dieses Artikels glauben wir, dass Sie die Methode, zu externen Seiten zu springen, bereits gut beherrschen.

Das obige ist der detaillierte Inhalt vonSo springen Sie in Uniapp zu einer externen Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!