最近在做微信小程序，发现很多页面都有一种特点：在onLoad里异步发送HTTP请求加载数据。默认的界面是wxml中定义好的模板，如果断网或者网速较慢就会一直卡在这里，界面看起来不太友好。
默认模板
所以需要加入一个加载中的提示，成功加载后再切换回来。使用wx.showLoading等API无法完全遮挡后面突兀的模板，所以要在wxml中写一些界面的代码才可以完成这项需求。
如果在每个page的wxml中都写一次这种代码，工作量非常大，后期重构也不方便，所以本文提供了一种使用template的方式，复用这段代码。需要切换状态的时候直接在js中一行代码pageState.xxx()即可。
下面是演示图片，具体的内容可以定制，比如做一个加载动画。
演示
使用方法
在需要的page的wxml文件开头加入两行代码：
<!--pages/xxxxxx.wxml-->
<import src="/utils/pageState/index.wxml" />
<template is="pageState" data="{{...pageState}}" />
<!-- 这里是原来页面的内容 -->
<!-- <view class="container"> -->
在需要的page的js文件中使用：
import pageState from '这里写js文件的路径'
Page({
// ...
getXXXXX(xxxxx) {
const pageState = pageState(this)
pageState.loading() // 切换为loading状态
api.getXXXXX(xxxxx) // 异步请求
.then((res) => {
// 更新界面...
pageState.finish() // 切换为finish状态
})
.catch(err => {
pageState.error() // 切换为error状态
})
},
// ...
模板代码
wxml
这里定义了模板，根据状态判断是否显示以及显示那种状态：
<!-- utils/pageState/index.wxml -->
<template name="pageState">
<view class="page-state-container" wx:if="{{state != 'finish'}}">
<view class="page-state-empty page-state-center" wx:if="{{state == 'empty'}}">
<icon type="info" size="70" />
<view class="message">{{message}}</view>
</view>
<view class="page-state-loading page-state-center" wx:if="{{state == 'loading'}}">
<icon type="waiting" size="70" />
<view class="message">{{message}}</view>
</view>
<view class="page-state-error page-state-center" wx:if="{{state == 'error'}}">
<icon type="warn" size="70" />
<view class="message">{{message}}</view>
<button class="retrybtn" type="warn" catchtap="onRetry">重试</button>
</view>
</view>
</template>
这里使用了两个变量：state和message，表示当前的状态和提示信息。
这里注意必须在使用此模板的page中定义onRetry，即异步加载数据的代码，才可以使用重试按钮。
wxss
接着定义样式：
<!-- utils/pageState/index.wxss -->
.page-state-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
height: 100%;
width: 100%;
}
.page-state-container {
animation: fadein 2s 1 ease-out;
height: 100%;
width: 100%;
}
.page-state-container~view {
display: none;
}
page {
height: 100%;
overflow-y: auto;
}
这里我设置了一个渐入的动画，删掉也没关系。注意最后一个.page-state-container~view这里是将class为page-state-container之后的view全部隐藏。如果模板之后想隐藏的不是view可以定义一个新class。我一般都用view作为container，所以这里就直接写了view。为了使内容竖直居中，我将所有页面都设置了最小高度为100%，暂时还没发现什么副作用，发现的朋友可以在评论中指出。
最后把它导入到app.wxss中，以便在全局范围内使用。
/**app.wxss**/
@import 'utils/pageState/index.wxss';
js
// utils/pageState/index.js
const loading = (that) => {
return () => {
that.setData({
pageState: {
state: 'loading',
message: '加载中'
}
})
}
}
const error = (that, message) => {
return (message = '请检查您的网络连接') => {
that.setData({
pageState: {
state: 'error',
message
}
})
}
}
const empty = (that, message) => {
return (message = '空空如也') => {
that.setData({
pageState: {
state: 'empty',
message
}
})
}
}
const finish = (that) => {
return () => {
that.setData({
pageState: {
state: 'finish',
message: ''
}
})
}
}
export default (that) => {
return {
loading: loading(that),
error: error(that),
empty: empty(that),
finish: finish(that)
}
}
