Flutter►第九章：框架升级

基础框架

[toc]

框架优化/升级方案

为了有更好的用户体验，我们提出以下优化和升级方案。

白屏体验

网络恢复

一、可能的初始”白屏”(可选)

1、场景

页面无任何占位视图。如页面本身就是一个列表。

页面数据来源于网络，网络请求回来前，空。

2、处理方案及实现方式

主要有以下两种方案，各自独立，分场景使用。

①界面框架预染页(美团/饿了么的灰底效果)

②数据预加载(首页)

2.1、处理方案：界面框架的预染页：美团/饿了么的灰底效果(如商品详情页)

2.1.1、方案描述

美团/饿了么的灰底效果(如商品详情页)

2.1.2、实现方式
1
2
3
4
5
6
7
8
9
// bad
return realWidgets(data: netdata); // netdata 可能为空，导致页面空白

// good
if (data == null) {
	return nodataWidgets();	// 页面预览页
} else {
	return withdataWidgets(data: data);
}

2.2、数据预加载（根据需要）

当realWidgets中的数据全部来自网络时候，也有白屏的可能，如列表，如需确实有界面框架显示，使用如下方式：

  • 初次冷启动：

    使用与产品约定的默认数据来加载

  • 其他：

    保存缓存数据，下次使用缓存数据来加载

3、工期预算

框架接入 2d

二、请求结束后的”白屏”(必须)

1、场景

②处理请求后的场景：文字提示+页面展示(无数据+无网络)

2、处理方案及实现方式

2、网络异常：

为页面提供网络异常页并伴有刷新恢复重试

3、工期预算

框架接入 2d

三、网络异常(提示+恢复)

2.1、文字提示

根据情况，弹出易于用户理解的错误提示

  • 接口问题：服务器开小差了，请稍后重试

2.2、界面提示（实现网络恢复后能再显示正确界面）

1
2
3
4
5
6
7
8
9
10
11
// bad
return successWidget();

// good
if (ApiResult.type == error) {
  return errorWidget();
} else if (ApiResult.type == nodata) {
  return nodataWidget();
} else {
  return successWidget();
}

四、程序异常(上报+提示)

接入bugly服务+自定义异常页

接入第三方bugly 或华为AGC的崩溃服务

默认的程序异常页 VS 处理后的程序异常页

默认的程序异常页 处理后的程序异常页

程序异常上报后的后台：

程序异常上报后的后台

工期预算

异常上报 1d

五、测试问题反馈与排查优化

1、新增查看版本页面

新增查看版本页面，方便对应反馈的问题出现的版本(防止是旧包)。

2、新增抓包设置(代理)

新增代理设置，方便接口人员抓包排查

六、视觉体验优化

定义加载动画loading

愿望灯动画效果优化(底部下沉)

1、Loading自定义

UI提供 images 或 json，自定义loading动画

2、愿望灯

采用上层愿望灯不变，底部进行下沉动画来实现愿望灯上飘的效果

3、Toast自定义

图层

七、开发规范优化

1、用户操作/页面形态展示优化

1、入口的点击

内部界面

  • 开发中/已实现：

    点击后直接进入，并展示

  • 待开发：

    点击后，弹出”将进入XXX功能，其待开发中”

  • 产品未规划：

    不显示该入口

2、h5白屏

重定向

域名切换：tke

八、接口请求优化：接口拆分

通过页面分析，与产品和后台确认哪些页面需要进行接口拆分。

目前可能需要处理的有：

  • 商品详情页

框架实现拆分项

1、是否显示加载动画isLoading

1.1、loading动画(images 或 json)

使用 image 或 json 实现loading动画

1.2、含loading显示控制的页面组件

1
static void showLoading(bool show);

2、页面状态PageType

2.1、加载结束不同页面状态页面组件

编号 页面状态PageType 功能 人日
1 加载失败 errorWidget 0.25
2 加载成功，但无数据 nodataWidget（含”重新加载”操作) 0.5
3 加载成功，且有数据 successWidget 0

2.2、含页面状态控制的视图组件

通过传入不同的状态，显示不同状态下的页面

3、请求

5、含状态管理的页面基类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
int currentPageType = successWidget; // 默认的状态页面
bool showLoading = false;	// 是否显示加载动画

return pageTypeWidget(pageType: currentPageType, showLoading: showLoading);


// 开始请求
showLoading = true;
setState(() {});
apiRequest.then((value) {
      _xxxBean = value;
  		showLoading = false;
      if (value == null) {
        currentPageType = nodata;
      } else {
        currentPageType = success;
      }
  
//      setState(() {
//
//      });
      disabledLoading();
    }).catchError((onError) {
      currentPageType = error;
    });


// 请求结束
showLoading = false
if (ApiResult.type == error) {
  currentPageType = error;
} else if (ApiResult.type == nodata) {
  currentPageType = nodata;
} else {
  currentPageType = success;
}
setState(() {});

待安排优化

1、网络库升级

重构及增加错误码友好提示处理 1d

2、基类新增处理

1
2
3
4
5
6
7
8
>  Visibility 隐藏/可见，能保存组件的状态；Offstate不能保存组件的状态，组件重新加载
>  * 控制child是否显示
>  *
>     当offstage为true，控件隐藏； 当offstage为false，显示；
>     当Offstage不可见的时候，如果child有动画等，需要手动停掉，Offstage并不会停掉动画等操作。
> 
>     const Offstage({ Key key, this.offstage = true, Widget child })
>
  • 网页加载库替换，新增错误码监听，统一js
  • 基础框架新增背景设置及修复有背景时候界面显示问题，error/nodata新增color设置，用于设置透明
  • 基础框架新增unkonw类型，兼容有无初始显示界面的设置
  • 基础框架优化appbar设置，及提供最简易常用的导航栏
  • Mock api 新增缓存功能
  • Bruno接入及编译修复
  • 版本升级管理
  • 数据缓存处理
  • 精选愿望单原型开发完成，待联调
  • 新增百愿清单原型开发完成，待联调

3、App快速实现置灰样式

App快速实现置灰样式

iOS整个APP实现灰色主题的示例代码

白屏：

①处理请求前的场景：数据预加载+框架预染页(美团/饿了么的灰底效果)

②处理请求后的场景：文字提示+页面展示(无数据+无网络)

2、网络异常：

为页面提供网络异常页并伴有刷新恢复重试

3、程序异常(上报+提示)：

接入bugly服务+自定义异常页

4、视觉体验优化

定义加载动画loading

愿望灯动画效果优化(底部下沉)

5、测试优化

新增查看版本页面，方便对应反馈的问题

新增代理设置，方便接口人员抓包排查

6、其他

AA送礼：提测，待测试验证后，如有问题修复

开发者账号申请审核未通过，正在处理。 （因为域名问题被拒，新域名已经准备好了，在跟apple沟通中）

下周：

继续我的模块开发，联调接口。

在完成”我的”模块或等待接口情况下，评估及开发产品规划的其他功能。

目前：

框架升级（白屏、预览页灰底、网络刷新恢复页，异常上报及异常页）：今天

愿望灯 ok
许个愿 ok
我的：部分在联调，部分在等接口
AA送礼：提测，待测试验证后，如有问题修复

loading
开发者账号申请审核未通过，正在处理。 （因为域名问题被拒，新域名已经准备好了，在跟apple沟通中）