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