Bagaimana untuk mendapatkan 404 dalam uniapp

Dalam aplikasi mudah alih yang dibuat berdasarkan rangka kerja uni-app, apabila pengguna meminta halaman yang tidak wujud, aplikasi akan mengembalikan halaman ralat 404 secara lalai. Dalam proses pembangunan sebenar, kami mungkin perlu menyesuaikan halaman 404 ini untuk memberikan pengalaman pengguna yang lebih baik. Di bawah, artikel ini akan memperkenalkan secara terperinci kaedah mendapatkan dan memproses halaman 404 dalam apl uni.

1. Dapatkan halaman 404

Dalam uni-app, kaedah mendapatkan halaman 404 adalah sama seperti halaman lain. Kami hanya perlu mencipta halaman bernama "404" dalam direktori halaman. Cipta halaman 404 dalam apl uni dengan melaksanakan arahan berikut:

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

Antaranya, pages/404/index.vue ialah fail komponen halaman 404. Kami boleh menambah kandungan halaman 404 tersuai dalam fail ini.

2. Konfigurasikan penghalaan halaman 404

Halaman 404 perlu dikonfigurasikan dalam penghalaan supaya aplikasi dapat mengenal pasti dan mengembalikan halaman 404 dengan betul. Dalam apl uni, kami boleh menambah laluan halaman 404 pada tatasusunan "halaman" dalam fail "/pages.json". Contohnya:

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

Dalam kod di atas, kami menetapkan penghalaan halaman 404 ke laluan "pages/404/index" dan menetapkan tajuk bar navigasi halaman 404 kepada "404 Not Found" .

3. Memproses halaman 404

Apabila pengguna meminta halaman yang tidak wujud, aplikasi akan melompat ke halaman 404 secara automatik. Kami boleh menambah kandungan mesra pengguna dalam komponen 404 halaman untuk memberikan pengalaman pengguna yang lebih baik. Sebagai contoh, anda boleh menambah kandungan berikut pada halaman 404:

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

Dalam kod di atas, kami menambah bekas 404 halaman dan menambah imej 404 dan teks gesaan 404 padanya.

Selain menggesa pengguna bahawa halaman itu tidak wujud, kami juga boleh menambah butang untuk kembali ke halaman utama dalam halaman 404 untuk meningkatkan pengalaman pengguna. Sebagai contoh, tambah kod berikut pada halaman 404:

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

Dalam kod di atas, kami menambah butang untuk kembali ke halaman utama dan memanggil kaedah uni.reLaunch dalam peristiwa klik butang untuk melompat Pergi ke halaman utama.

Kesimpulan

Melalui langkah di atas, kita boleh mendapatkan halaman 404 dengan mudah dalam apl uni dan memprosesnya. Dalam aplikasi praktikal, kami boleh menyesuaikan kandungan halaman 404 mengikut keperluan sebenar dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan 404 dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!