Absolute Adresse der Uniapp-Sprung-URL

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>

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>

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

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"
      }
    }
  ]
}

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!