2020-06-03 21:50
- 需求来源:
教室进入的流程有不少依赖于网络请求的,在用户网络不佳的时候,会有很大情况页面是错误界面,页没有明确loading和提示等
在进入教室后流程为:
- 加载N多个网络api请求,包括获取课程信息、学员权限、进入教室请求等等
- 连接ws消息服务
- 加载历史消息
- 监测直播状态,若在直播状态:
- 加入直播频道
- 播放直播视频(加载直播的loading目前已有)
- 交互:
增加loading和文本提示:
- 进入教室中...
- 连接消息服务器..
- 若在直播状态:加入直播...
- 如果单个loading加载过长,loading界面上增加文本提示:加载过慢,请检查您的网络后刷新重试
(注意:这里如果关闭这个提示,后面仍然保持之前的进度loading) - 如果有关键请求失败,提示用户:加载失败,请刷新重试
失败后,所有提示消失,这个加载失败提示保持前台显示。
已经从原来的弹框,改为整个页面显示,loading和加载失败的提示都位于页面主区域上下左右居中显示。
项目地址:https://app.mockplus.cn/s/qx0nNuL0mc (位置如下图)
涉及到的loading gif资源下载:https://app.mockplus.cn/preview/sF6n6Q2l1p
loading已经补充,见设计图组:https://lanhuapp.com/url/PStqK-akBQV
提示icon也上传了iconfont一份:
另外其中所用到的loading的gif可在此下载:
链接:https://pan.baidu.com/s/1PgPYdMXfb_pxM0GNvGZcRA 密码:u2td