Architecture

框架的重要性

[toc]

框架的重要性

一、ppt

详看：框架的重要性.pptx

总框架结构图.graffle

二、内容说明

框架是什么？

框架是解决问题的具体实现方法，能直接执行或复用。

为什么需要框架？

简单的讲是为了约束和统一。

举个例子：我们想要让所有的页面支持在无网络的时候，都有个缺省页。

如果没有一个框架，则我们每个页面都得进行很多判断和视图操作。

且后期如果需要修改，也会导致工作量巨大。

框架的好处是什么？

我们先从常见的几个工作中实际场景介绍：

网络请求：不进行框架/封装处理的话，可能遇到的问题：

①、每次进行网络请求，都得写一堆代码才能完成最基础的请求操作；

②、如果还要求对每个请求都添加一些公共参数、错误码处理，则又得每个请求添加一遍；

页面的缺省：不进行框架/封装处理的话，可能遇到的问题：

①、无网络等状态下，直接无缺省页，显示成白屏，体验极差；

②、有设置缺省页，但无进行框架化，导致每个页面都得堆一堆代码来实现缺省页功能；

③、有设置缺省页，但无进行框架化，后期需要修改时候，每个页面都修改，维护成本巨大；

视图控件(如按钮)：不进行框架/封装处理的话，可能遇到的问题：

①、代码实现特长；

②、还没有点击效果，如果要添加又要一堆代码；

③、后期需要修改时候，每个页面都修改，维护成本巨大；

测试框架：

①、开发联调接口，无法设置代理抓包查看；

②、用户反馈问题，无法提供问题出现的版本等信息；

③、已发布包程序出现异常，开发无法定位；

场景问题解决要点/框架能解决的问题：

①、不用堆一堆类似代码，几行代码就实现

②、规范变化的时候，不要我关心和修改

③、增加通用功能的时候，不需要自己再去实现一遍

④、app异常时候的监测和反馈

框架化后，以上这些问题都能够得到解决。

所以，框架的好处有统一设计，

建立框架的意义：

好的框架能够保证和提升项目的可维护性，扩展性，健壮性。

能够提高工作效率

能够让风格更统一

各框架提供的功能

缺省页框架：

解决可能的初始”白屏”

无网络情况下的”空白页”

无数据情况下的”空白页”

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

测试框架：

新增抓包设置(代理)

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

程序异常(上报+提示)

视图控件框架：

定义加载动画loading

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

框架的使用

使用前（纯代码，未有任何封装）：

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
GestureDetector(
  onTap: () => _shareWechatfriend(),
  child: Container(
    height: 38.h,
    width: 260.w,
    decoration: BoxDecoration(
      color: color_theme,
      borderRadius: BorderRadius.circular(19.h),
      border: Border.all(color: Colors.white, width: 1),
    ),
    child: Center(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset(
            "images/wish/yaoqing_icon.png",
            width: 18.w,
            height: 18.h,
          ),
          SizedBox(width: 5.w),
          Text(
            "邀请好友许愿",
            style: TextStyle(color: Colors.white, fontSize: 15.sp),
          )
        ],
      ),
    ),
  ),
),

框架化后：

1
2
3
4
5
6
7
8
9
10
11
ThemeBGButton(
  width: 260,
  height: 38,
  bgColorType: ThemeBGType.pink, // 此参数，让你可以直接切换到其他主题样式
  needHighlight: true, // 添加此参数即会有高亮效果，而不需要再写一堆代码
  title: '邀请好友许愿',
  titleStyle: ButtonThemeUtil.PingFang_FontSize_Bold(15.0),
  imageWidget: ImageAsset('images/wish/yaoqing_icon.png', width: 18, height: 18),
  cornerRadius: 19,
  onPressed: () => _shareWechatfriend(),
),