uniapp에서 404를 얻는 방법

uni-app 프레임워크를 기반으로 제작된 모바일 애플리케이션에서는 사용자가 존재하지 않는 페이지를 요청하면 애플리케이션은 기본적으로 404 오류 페이지를 반환합니다. 실제 개발 과정에서 더 나은 사용자 경험을 제공하기 위해 이 404 페이지를 사용자 정의해야 할 수도 있습니다. 아래에서는 유니앱에서 404 페이지를 획득하고 처리하는 방법을 자세히 소개하겠습니다.

1. 404 페이지 가져오기

유니앱에서 404 페이지를 가져오는 방법은 다른 페이지와 동일합니다. 페이지 디렉토리에 "404"라는 페이지를 생성하기만 하면 됩니다. uni-app에서 다음 명령을 실행하여 404 페이지를 생성합니다:

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

그 중 페이지/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 메소드를 호출했습니다. 페이지.

결론

위의 과정을 통해 유니앱에서 쉽게 404 페이지를 얻어서 처리할 수 있습니다. 실제 적용에서는 실제 요구에 따라 404 페이지 콘텐츠를 맞춤화하고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 uniapp에서 404를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!