封装微信小程序的页面状态控制:加载中、断网错误重试、空页面等

最近在做微信小程序,发现很多页面都有一种特点:在onLoad里异步发送HTTP请求加载数据。默认的界面是wxml中定义好的模板,如果断网或者网速较慢就会一直卡在这里,界面看起来不太友好。

封装微信小程序的页面状态控制:加载中、断网错误重试、空页面等_第1张图片

所以需要加入一个加载中的提示,成功加载后再切换回来。使用wx.showLoading等API无法完全遮挡后面突兀的模板,所以要在wxml中写一些界面的代码才可以完成这项需求。

如果在每个page的wxml中都写一次这种代码,工作量非常大,后期重构也不方便,所以本文提供了一种使用template的方式,复用这段代码。需要切换状态的时候直接在js中一行代码pageState.xxx()即可。

下面是演示图片,具体的内容可以定制,比如做一个加载动画。

封装微信小程序的页面状态控制:加载中、断网错误重试、空页面等_第2张图片

使用方法

在需要的page的wxml文件开头加入两行代码: