uniapp h5 scans the code to enter the page and returns to normal after a few seconds link server timeout page

foreword

Main problem: Entering the h5 page will display a link server timeout for a few seconds, click the screen to retry the page, and then jump to the normal page

---

1. Main code

"async": { //页面js异步加载配置
            "loading": "AsyncLoading", //页面js加载时使用的组件（需注册为全局组件）
            "error": "AsyncError", //页面js加载失败时使用的组件（需注册为全局组件）
            "delay": 200, //展示 loading 加载组件的延时时间（页面 js 若在 delay 时间内加载完成，则不会显示 loading 组件）
            "timeout": 3000 //页面js加载超时时间（超时后展示 error 对应的组件）
        }

2. Use steps

1. Create a file in the directory

2. In the asynError.vue code

The code is as follows (example):

<template>
    <view></view>
</template>

<script>
</script>

<style>
</style>

Because my server timed out and the page was not displayed for a long time, I replaced it with a blank page

3. Register global components in mian.js

---

import AsyncErrorNew from './components/asyncError/asyncError.vue'
Vue.component('AsyncErrorNew',AsyncErrorNew)

4. Introduce in the manifest.json file

 

"async": { //页面js异步加载配置
            "loading": "AsyncLoading", //页面js加载时使用的组件（需注册为全局组件）
            "error": "AsyncErrorNew", //页面js加载失败时使用的组件（需注册为全局组件）
            "delay": 200, //展示 loading 加载组件的延时时间（页面 js 若在 delay 时间内加载完成，则不会显示 loading 组件）
            "timeout": 3000 //页面js加载超时时间（超时后展示 error 对应的组件）
        }

If you don't need the component when js is loaded, you can omit it, according to your own needs

I hope to be helpful,

This article refers to the article: uniapp packaged h5, the page of "connection to the server timed out, click the screen to try again" appeared - v. Feifei - Blog Garden (cnblogs.com)

You can also view the article: Reasons and Solutions for Uni-APP Android Network Timeout