uniapp implementiert das Öffnen der URL

Uniapp ist ein plattformübergreifendes Entwicklungsframework, das das einmalige Schreiben und Veröffentlichen auf mehreren Terminals unterstützt und für eine Vielzahl von Anwendungsszenarien geeignet ist. In der tatsächlichen Entwicklung müssen wir häufig die URL in der App öffnen, z. B. um die H5-Seite in der Anwendung anzuzeigen, zu einer Website eines Drittanbieters zu springen usw. In diesem Artikel wird erläutert, wie Sie die Öffnungs-URL-Funktion in Uniapp implementieren.

1. H5-Seiten verwenden

H5-Seiten beziehen sich auf Webseiten, die in Browsern ausgeführt werden. Uniapp unterstützt auch die Verwendung von H5-Seiten in Anwendungen. Die Implementierungsmethode ist wie folgt:

1. Erstellen Sie eine H5-Seite.

Erstellen Sie eine neue H5-Seite im Seitenverzeichnis des Uniapp-Projekts, beispielsweise eine Seite mit dem Namen „webView“.

2. Seitencode schreiben

HTML-Code in webView.vue schreiben, z. B.:

<template>
    <div>
        <iframe width="100%" height="100%" src="{{url}}"></iframe>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: 'https://www.baidu.com'
            }
        }
    }
</script>

Im Code verwenden wir ein Iframe-Tag, um die Webseite einzubetten, wobei das src-Attribut der zu öffnende URL-Link ist. In diesem Beispiel haben wir die Baidu-URL geöffnet. Sie können sie entsprechend der tatsächlichen Situation durch andere Adressen ersetzen.

3. Sprungseite

Wo Sie die URL öffnen müssen, verwenden Sie die Methode uni.navigateTo, um zur WebView-Seite zu springen und die URL zu öffnen. Zum Beispiel:

uni.navigateTo({
    url: '/pages/webView/webView'
})

Die H5-Seite, die wir zuvor geschrieben haben, wird geöffnet und die Baidu-URL wird angezeigt. Es ist zu beachten, dass, wenn Sie die URL während der tatsächlichen Entwicklung mehrmals öffnen müssen, empfohlen wird, die URL-Parameter an die WebView-Seite zu übergeben und anhand der übergebenen Parameter zu entscheiden, welche URL geöffnet werden soll.

2. Plug-Ins von Drittanbietern verwenden

In Uniapp gibt es eine einfachere Implementierungsmethode, nämlich die Verwendung von Plug-Ins von Drittanbietern. Auf diese Weise stehen viele ausgereifte Plug-Ins zur Auswahl, z. B. das Uni-App-Plus/Webview-Plug-In, das von DCloud bereitgestellte AppWebview-Plug-In usw.

Wir nehmen hier als Beispiel das uni-app-plus/webview Plug-in.

1. Installieren Sie das Plug-in

Verwenden Sie den npm-Befehl, um das Webview-Plug-in im Uniapp-Projekt zu installieren. Der Befehl lautet wie folgt:

npm install uni-app-plus/webview

2. Führen Sie das Plug-in ein

Auf der Seite, auf der das Die URL muss geöffnet werden. Führen Sie das Webview-Plugin durch Import ein:

import webView from '@/uni_modules/uni-webview/uni-webview.js'

3. URL öffnen

Öffnen Sie die URL über die webView.open-Methode:

webView.open('https://www.baidu.com')

Die Baidu-URL wird in der Anwendung geöffnet.

Es ist zu beachten, dass die Verwendung von Plug-ins von Drittanbietern zu Kompatibilitätsproblemen führen und die Größe der Anwendung erhöhen kann. Daher müssen Sie je nach Situation entscheiden, ob Sie sie verwenden möchten.

Zusammenfassung:

In der Einleitung dieses Artikels erfahren wir mehr über die beiden Möglichkeiten, eine URL in Uniapp zu öffnen. Wenn Sie nur einen einfachen Webinhalt in der Anwendung anzeigen müssen, können Sie die H5-Seite direkt verwenden. Wenn Sie eine umfassendere Funktionsunterstützung benötigen, können Sie versuchen, ein Plug-In eines Drittanbieters zu verwenden. Es ist zu beachten, dass während des eigentlichen Entwicklungsprozesses auf Sicherheitsaspekte geachtet werden muss, um das Öffnen unsicherer URLs zu vermeiden, die zu Anwendungsproblemen führen können.

Das obige ist der detaillierte Inhalt vonuniapp implementiert das Öffnen der URL. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!