uniappで404を取得する方法

ユニアプリ フレームワークに基づいて作成されたモバイル アプリケーションでは、ユーザーが存在しないページをリクエストすると、アプリケーションはデフォルトで 404 エラー ページを返します。実際の開発プロセスでは、より良いユーザー エクスペリエンスを提供するために、この 404 ページをカスタマイズする必要がある場合があります。以下では、この記事ではuni-appで404ページを取得して処理する方法を詳しく紹介します。

1. 404 ページを取得する

uni-app では、404 ページの取得方法は他のページと同じです。ページ ディレクトリに「404」という名前のページを作成するだけです。次のコマンドを実行して、uni-app で 404 ページを作成します。

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

ここで、pages/404/index.vue は 404 ページのコンポーネント ファイルです。このファイルにカスタム 404 ページ コンテンツを追加できます。

2. 404 ページ ルーティングの設定

アプリケーションが 404 ページを正しく識別して返すことができるように、ルーティングで 404 ページを設定する必要があります。 uni-app では、「/pages.json」ファイルの「pages」配列に 404 ページ ルートを追加できます。例:

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

上記のコードでは、404 ページのルーティングを「pages/404/index」パスに設定し、404 ページのナビゲーション バーのタイトルを「404 Not Found」に設定します。

3. 404 ページの処理

ユーザーが存在しないページを要求すると、アプリケーションは自動的に 404 ページにジャンプします。 404 ページ コンポーネントにユーザー フレンドリーなコンテンツを追加して、より良いユーザー エクスペリエンスを提供できます。たとえば、次のコンテンツを 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>

上記のコードでは、404 ページ コンテナを追加し、それに 404 画像と 404 プロンプト テキストを追加しました。

ページが存在しないことをユーザーに通知するだけでなく、404 ページにホームページに戻るボタンを追加して、ユーザー エクスペリエンスを向上させることもできます。たとえば、次のコードを 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>

上記のコードでは、ホームページに戻るボタンを追加し、ボタンのクリック イベントで uni.reLaunch メソッドを呼び出してジャンプします。ホームページです。

結論

上記の手順により、uni-app で 404 ページを簡単に取得して処理することができます。実際のアプリケーションでは、実際のニーズに応じて 404 ページのコンテンツをカスタマイズし、ユーザー エクスペリエンスを向上させることができます。

以上がuniappで404を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。