1. 什么是uniapp
uniapp是一种跨平台的开发框架，它可以让开发者只需要编写一份代码，就能够生成可以在多个平台上运行的应用程序。uniapp支持的平台包括：微信小程序、支付宝小程序、QQ小程序、百度小程序、H5、App以及快应用等。
uniapp官方提供了一套基于vue.js的组件库，包含了常用的界面元素，可以帮助开发者快速搭建应用程序的界面。
2. 什么是loading图
loading图，又称为加载动画、预加载图，是在应用程序加载数据或执行其他长时间操作时，展示给用户的一种等待效果。
loading图的作用是告诉用户正在加载，让用户等待的过程变得更为愉悦和有趣。
3. uniapp如何统一loading图
3.1. 使用全局组件封装loading图
uniapp中可以使用全局组件来统一封装loading图。首先，需要在uni-app/src/components/目录下，新建一个loading.vue文件，用来编写loading图的代码：
<template>
<div class="loading">
<image class="loading-img" src="http://placehold.it/64x64" mode="scaleToFill"/>
</div>
</template>
<style scoped>
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.loading-img {
width: 64rpx;
height: 64rpx;
animation: loading 1s infinite;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
代码解释：
loading组件所在的父元素使用绝对定位，占满整个屏幕。
loading图像使用Flex布局，水平和垂直居中。
loading图像使用CSS3动画实现旋转效果。
在完成loading.vue文件的编写后，需要在uni-app/src/main.js文件中注册全局组件：
import Loading from '@/components/loading.vue';
Vue.component('Loading', Loading);
此时，loading组件已注册为全局组件，可以在任何地方使用。下面是如何在页面中使用loading组件：
<template>
<view>
<!-- 页面内容 -->
<loading :show="showLoading"/>
</view>
</template>
<script>
export default {
data() {
return {
showLoading: false,
};
},
methods: {
loadData() {
this.showLoading = true;
// 模拟API请求
setTimeout(() => {
this.showLoading = false;
}, 2000);
},
},
};
</script>
代码解释：
通过props属性传递:show="showLoading"参数，控制loading组件的显示和隐藏。
在loadData方法中模拟API请求，请求前显示loading组件，请求完成后隐藏loading组件。
3.2. 使用uni.showLoading和uni.hideLoading方法
uniapp提供了uni.showLoading和uni.hideLoading两个方法，可以快速的显示和隐藏loading图。
export default {
methods: {
loadData() {
uni.showLoading({
title: '加载中',
mask: true,
});
// 模拟API请求
setTimeout(() => {
uni.hideLoading();
}, 2000);
},
},
};
代码解释：
uni.showLoading方法用于显示loading图，接收一个参数对象，其中title属性为loading提示文本，mask属性为是否显示透明蒙层，默认为false。
uni.hideLoading方法用于隐藏loading图。
3.3. 使用请求拦截器和响应拦截器统一处理loading图
使用请求拦截器和响应拦截器统一处理loading图是一种更为灵活的方法。在请求前显示loading图，在请求后隐藏loading图，可以统一处理整个应用程序的loading效果。
步骤如下：
创建一个axios实例，配置拦截器。
将axios实例挂载到全局vue对象中，在需要使用的地方使用this.$axios调用请求。
首先，需要安装uni-axios和qs两个库。
npm install -g uni-axios qs
接着，在main.js文件中，配置axios实例：
import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
transformRequest: [data => qs.stringify(data)],
});
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
instance.interceptors.request.use(
(config) => {
uni.showLoading({
title: '加载中',
mask: true,
});
return config;
},
error => Promise.reject(error),
);
instance.interceptors.response.use(
(response) => {
uni.hideLoading();
return response;
},
error => Promise.reject(error),
);
Vue.prototype.$axios = instance;
代码解释：
创建axios实例，并设置基础URL、超时时间和请求头。
使用qs.stringify方法将POST请求的数据进行序列化。
在请求发送前，显示loading图。
在请求发送后，隐藏loading图。
将axios实例挂载到全局vue对象中。
最后，我们在需要使用请求的组件中，使用this.$axios调用请求。
export default {
methods: {
async loadData() {
try {
const response = await this.$axios.post('/api/data', { page: 1 });
console.log(response.data);
} catch (error) {
console.log(error);
}
},
},
};
代码解释：
使用async和await语法使异步请求变得更加简洁。
使用try...catch语句来处理请求过程中出现的错误。
使用this.$axios调用请求。
4. 总结
使用uniapp开发跨平台应用程序时，统一loading图是一个必备的功能。可以使用全局组件封装loading图，使用uni.showLoading和uni.hideLoading方法，以及使用请求拦截器和响应拦截器统一处理loading图等多种方法来实现统一loading图的效果。