1. 什么是uniapp？
Uniapp是一个使用Vue.js开发多端应用的前端框架，在uniapp的生态系统中，我们可以快速地开发同样适合于微信小程序、支付宝小程序、H5、以及原生App等多种端的应用。因此，uniapp也被称作“微信小程序开发神器”。
Uniapp快速开发多端应用，为开发者减轻了很多工作负担，同时也为原本只能开发一个平台应用的开发者带来了新的业务。
2. Uniapp的默认加载界面
当我们打开一个uniapp应用时，如果没有自定义加载界面，uniapp默认会提供一个加载动画。如果本地缓存中已经存在应用的资源文件，则加载动画会比较快地消失掉并显示主页面。
// 默认配置的加载画面代码
<span style="color: gray">// 首先看看uni-app打开效果，看到的这个圆形的加载界面就是系统默认的加载</span>
uni.showLoading({
title: '正在连接服务器，请稍候',
mask: true,
complete: function () {
console.log('showLoading已经被执行')
}
})
可以看到，uniapp默认的加载界面就是一个正在加载的提示框，具体样式可以看当前平台。
3. 自定义加载界面
3.1 配置App.vue
我们可以选择使用第三方插件，但是也可以自定义界面。在实现自定义加载界面的时候，我们可以通过修改App.vue的Vue生命周期函数来实现。我们可以添加全局加载组件，在组件内自定义我们的加载动画或其他样式，使以后开发过程中使用更加简便，也可以提高用户体验。
首先，我们需要在App.vue中添加全局组件，这里我们创建一个Loading组件，该组件接收一个名为loading的Boolean类型值。我们可以根据这个值来控制组件的显示与隐藏。
<template>
<view>
<slot></slot>
<Loading v-if="loading" />
</view>
</template>
<script>
import Loading from "@/components/Loading";
export default {
name: "App",
components: {
Loading
},
data() {
return {
loading: true
};
},
methods: {
hideLoading() {
this.loading = false;
}
}
};
</script>
这段代码中，我们通过v-if指令来控制Loading组件的显示与隐藏，当loading为true时，显示Loading组件；当loading为false时，Loading组件就会隐藏。
3.2 Loading组件的设计
接下来，我们需要在components目录下创建我们的Loading组件。我们以一个旋转的风车作为加载动画。
<template>
<view class="loading-icon">
<view class="icon-inner" style="animation-delay: -0.56s;"></view>
<view class="icon-inner" style="animation-delay: -0.42s;"></view>
<view class="icon-inner" style="animation-delay: -0.28s;"></view>
<view class="icon-inner" style="animation-delay: -0.14s;"></view>
<view class="icon-inner"></view>
<view class="icon-inner" style="animation-delay: 0.14s;"></view>
<view class="icon-inner" style="animation-delay: 0.28s;"></view>
<view class="icon-inner" style="animation-delay: 0.42s;"></view>
<view class="icon-inner" style="animation-delay: 0.56s;"></view>
</view>
</template>
<script>
export default {
name: "Loading"
};
</script>
<style>
.loading-icon {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.icon-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #5eb1fa;
border-radius: 2px;
animation: rotate-loading 1s ease-in-out infinite;
}
@keyframes rotate-loading {
0% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
opacity: 0.1;
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
这样我们的Loading组件就完成了，接下来我们需要控制loading的true和false，来控制Loading组件的显示和隐藏。
3.3 控制Loading组件的显示和隐藏
我们需要在页面生命周期函数created中来控制loading的true和false，来决定Loading组件是否显示。
<script>
export default {
name: "index",
created() {
setTimeout(() => {
this.$parent.hideLoading();
}, 2000);
}
};
</script>
在页面创建成功后，通过setTimeout()函数模拟一个请求，当请求返回后，控制loading的值为false，从而隐藏Loading组件。
4. 总结
通过上面的步骤，我们就完成了自定义加载界面的过程。首先，我们需要在App.vue中添加全局组件，来控制Loading组件的显示和隐藏；接着，我们在components目录下创建一个Loading组件，该组件就是我们需要自定义的加载界面；最后，我们通过页面生命周期函数来控制Loading组件的显示和隐藏。