最近在做微信小程序，发现很多页面都有一种特点：在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.jsconst 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)  }}