Heim > Web-Frontend > uni-app > Absolute Adresse der Uniapp-Sprung-URL

Absolute Adresse der Uniapp-Sprung-URL

王林
Freigeben: 2023-05-22 10:20:36
Original
1793 Leute haben es durchsucht

Mit der rasanten Entwicklung mobiler Geräte beginnen immer mehr Unternehmen, der plattformübergreifenden Entwicklung Aufmerksamkeit zu schenken, und uniapp ist eines der besten. Es ermöglicht nicht nur eine schnelle und effiziente plattformübergreifende Entwicklung, sondern bietet auch viele Vorteile wie globale Leistungsoptimierung, benutzerdefinierte Komponenten und Plug-Ins sowie mehrere Entwicklungsmodi. Ich glaube jedoch, dass einige grundlegende Probleme in Uniapp für viele Anfänger auch verwirrend sein werden. Wie springt man beispielsweise zu einer absoluten URL-Adresse? Im Folgenden erfahren Sie, wie Sie mit diesem Problem in Uniapp umgehen können.

In Uniapp ist der Seitensprung eine sehr häufige Anforderung. Wir können zuerst uni.navigateTo oder uni.redirectTo verwenden, um den Sprung zu erreichen. Sie alle springen basierend auf relativen Pfaden innerhalb der Anwendung. Aber was ist, wenn wir zu einer absoluten externen URL-Adresse springen möchten?

Tatsächlich ist es nicht schwer, in Uniapp zur absoluten URL-Adresse zu springen. Hier können wir das Tag a im HTML-Tag verwenden, um zu springen:

<a href="https://www.baidu.com">去百度一下</a>
Nach dem Login kopieren

Der obige Code kann zur Baidu-Website springen. Der Wert des href-Attributs im Beispiel ist die absolute URL-Adresse. Wenn Sie jedoch zur absoluten Adresse der URL in Uniapp springen möchten, müssen Sie einige Verarbeitungsschritte durchführen.

Wir können eine einfache Sprungfunktion basierend auf der obigen Methode implementieren. Hier ist ein Demo-Beispiel:

<template>
  <view class="container">
    <button class="btn" @click="jumpToBaidu">跳转到百度</button>
  </view>
</template>

<script>
export default {
  methods: {
    jumpToBaidu() {
      # 在新窗口中打开百度页面
      uni.showModal({
        title: '提示',
        content: '是否确认跳转到百度?',
        success: function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/webview?url=https://www.baidu.com'
            });
          }
        }
      });
    },
  },
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #01579b;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10px;
  text-align: center;
}
</style>
Nach dem Login kopieren

Ändern Sie die Homepage von uniapp und fügen Sie eine Schaltfläche hinzu. Klicken Sie auf die Schaltfläche, um zu einer Webansichtsseite zu springen. Auf der Webview-Seite können wir die Methode uni.getQueryString verwenden, um die absolute Adresse der URL im Anforderungsparameter abzurufen, und ein Iframe-Tag in die Seite einbetten, um die Zielwebseite anzuzeigen.

<template>
  <view class="container">
    <iframe :src="url" class="iframe"></iframe>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: '',
    };
  },
  onLoad(query) {
    # 获取url参数
    this.url = decodeURIComponent(uni.getQueryString('url'));
  },
}
</script>

<style>
.container {
  height: 100vh;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.iframe {
  width: 100%;
  height: 100%;
}
</style>
Nach dem Login kopieren

Konfigurieren Sie abschließend den Seitenpfad in uniapps mainfest.json wie folgt:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uniapp跳转url"
      }
    },
    {
      "path": "pages/webview",
      "style": {
        "navigationBarTitleText": "webview"
      }
    }
  ]
}
Nach dem Login kopieren

Wenn wir auf der Startseite auf die Schaltfläche klicken, öffnet Uniapp zunächst ein Bestätigungsfeld und springt zur Webansichtsseite Auf der Webview-Seite können wir den Inhalt der Zielseite erfolgreich anzeigen.

Das Obige ist eine Methode zum Implementieren der absoluten Adresse der Sprung-URL in Uniapp. Diese Anforderung wird durch die Kombination von HTML-Tags und Uniapp-Seitensprung erreicht. Ich glaube, dass dieses Beispiel dieses Problem für Anfänger lösen und auch unsere tägliche Entwicklung erleichtern kann.

Das obige ist der detaillierte Inhalt vonAbsolute Adresse der Uniapp-Sprung-URL. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage