So erhalten Sie 404 in Uniapp

Wenn der Benutzer in mobilen Anwendungen, die auf dem Uni-App-Framework basieren, eine Seite anfordert, die nicht vorhanden ist, gibt die Anwendung standardmäßig eine 404-Fehlerseite zurück. Im eigentlichen Entwicklungsprozess müssen wir diese 404-Seite möglicherweise anpassen, um eine bessere Benutzererfahrung zu bieten. Im Folgenden wird in diesem Artikel die Methode zum Abrufen und Verarbeiten der 404-Seite in der Uni-App ausführlich vorgestellt.

1. Holen Sie sich die 404-Seite

In der Uni-App ist die Methode zum Abrufen der 404-Seite dieselbe wie bei anderen Seiten. Wir müssen lediglich eine Seite mit dem Namen „404“ im Seitenverzeichnis erstellen. Erstellen Sie eine 404-Seite in Uni-App, indem Sie den folgenden Befehl ausführen:

vue create myApp //创建uni-app项目
cd myApp //进入项目目录
mkdir pages/404 //创建404页面文件夹
touch pages/404/index.vue //创建404页面文件

Unter anderem ist seiten/404/index.vue die Komponentendatei der 404-Seite. Wir können dieser Datei benutzerdefinierte 404-Seiteninhalte hinzufügen.

2. 404-Seitenrouting konfigurieren

Die 404-Seite muss im Routing konfiguriert werden, damit die Anwendung die 404-Seite korrekt identifizieren und zurückgeben kann. In uni-app können wir die 404-Seitenroute zum Array „pages“ in der Datei „/pages.json“ hinzufügen. Zum Beispiel:

{
    "pages": [
        //其他页面路由配置
        {
            "path": "pages/404/index",
            "style": {
                "navigationBarTitleText": "404 Not Found"
            }
        }
    ]
}

Im obigen Code legen wir die 404-Seitenweiterleitung auf den Pfad „pages/404/index“ und den Navigationsleistentitel der 404-Seite auf „404 Not Found“ fest.

3. Umgang mit der 404-Seite

Wenn der Benutzer eine Seite anfordert, die nicht existiert, springt die Anwendung automatisch zur 404-Seite. Wir können benutzerfreundliche Inhalte in 404-Seitenkomponenten hinzufügen, um eine bessere Benutzererfahrung zu bieten. Sie können der 404-Seite beispielsweise den folgenden Inhalt hinzufügen:

<template>
    <view class="not-found-container">
        <image src="/static/404.png" mode="aspectFit" class="not-found-img"></image>
        <text class="not-found-text">抱歉，页面不存在！</text>
    </view>
</template>

<style lang="scss" scoped>
    .not-found-container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .not-found-img {
        width: 200rpx;
        height: 200rpx;
    }
    .not-found-text {
        font-size: 36rpx;
        color: #999;
        margin-top: 40rpx;
    }
</style>

Im obigen Code haben wir einen 404-Seitencontainer hinzugefügt und ihm ein 404-Bild und einen 404-Eingabeaufforderungstext hinzugefügt.

Zusätzlich zur Meldung an den Benutzer, dass die Seite nicht existiert, können wir auf der 404-Seite auch eine Schaltfläche hinzufügen, um zur Startseite zurückzukehren, um das Benutzererlebnis zu verbessern. Fügen Sie beispielsweise den folgenden Code zur 404-Seite hinzu:

<view class="home-btn" @tap="toHome">
    <image src="/static/home.png" mode="aspectFit"></image>
</view>

<script>
    export default {
        methods: {
            toHome() {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .home-btn {
        position: fixed;
        bottom: 40rpx;
        right: 40rpx;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #1890ff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px #999;
    }
    .home-btn image {
        width: 60%;
        height: 60%;
    }
</style>

Im obigen Code haben wir eine Schaltfläche hinzugefügt, um zur Startseite zurückzukehren, und die uni.reLaunch-Methode im Click-Ereignis der Schaltfläche aufgerufen, um zur Startseite zu springen Seite.

Fazit

Durch die oben genannten Schritte können wir die 404-Seite ganz einfach in der Uni-App abrufen und verarbeiten. In praktischen Anwendungen können wir den Inhalt der 404-Seite an die tatsächlichen Bedürfnisse anpassen und das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie 404 in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!