Comment obtenir 404 dans Uniapp

Dans les applications mobiles créées sur la base du framework uni-app, lorsque l'utilisateur demande une page qui n'existe pas, l'application renvoie une page d'erreur 404 par défaut. Dans le processus de développement actuel, nous devrons peut-être personnaliser cette page 404 pour offrir une meilleure expérience utilisateur. Ci-dessous, cet article présentera en détail la méthode d'obtention et de traitement de la page 404 dans uni-app.

1. Obtenez la page 404

Dans uni-app, la méthode pour obtenir la page 404 est la même que pour les autres pages. Il suffit de créer une page nommée "404" dans le répertoire des pages. Créez une page 404 dans uni-app en exécutant la commande suivante :

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

Parmi elles, pages/404/index.vue est le fichier composant de la page 404. Nous pouvons ajouter du contenu de page 404 personnalisé dans ce fichier.

2. Configurer le routage des pages 404

La page 404 doit être configurée dans le routage afin que l'application puisse identifier et renvoyer correctement la page 404. Dans uni-app, nous pouvons ajouter la route des pages 404 au tableau "pages" dans le fichier "/pages.json". Par exemple :

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

Dans le code ci-dessus, nous définissons le routage de la page 404 sur le chemin "pages/404/index", et définissons le titre de la barre de navigation de la page 404 sur "404 Not Found".

3. Gestion de la page 404

Lorsque l'utilisateur demande une page qui n'existe pas, l'application passera automatiquement à la page 404. Nous pouvons ajouter du contenu convivial dans les composants de la page 404 pour offrir une meilleure expérience utilisateur. Par exemple, vous pouvez ajouter le contenu suivant à la page 404 :

<template>
    <view>
        <image></image>
        <text>抱歉，页面不存在！</text>
    </view>
</template>

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

Dans le code ci-dessus, nous avons ajouté un conteneur de page 404 et y avons ajouté une image 404 et un texte d'invite 404.

En plus de signaler à l'utilisateur que la page n'existe pas, nous pouvons également ajouter un bouton pour revenir à la page d'accueil dans la page 404 pour améliorer l'expérience utilisateur. Par exemple, ajoutez le code suivant à la page 404 :

<view>
    <image></image>
</view>

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

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

Dans le code ci-dessus, nous avons ajouté un bouton pour revenir à la page d'accueil et avons appelé la méthode uni.reLaunch dans l'événement click du bouton pour accéder à la page d'accueil.

Conclusion

Grâce aux étapes ci-dessus, nous pouvons facilement obtenir la page 404 dans uni-app et la traiter. Dans les applications pratiques, nous pouvons personnaliser le contenu de la page 404 en fonction des besoins réels et améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!