初来乍到，写个Flutter快速开发框架吧

HeStudy

2020年08月13日 16:16

自学flutter挺久的了，但最近才正式接触到使用flutter进行业务开发，当需求渐渐复杂，才明白一个项目的工程化有多重要，否则就是维护两行泪。

基于此背景，我仿照Quasar的初始化工程，自行封装了一套可以快速上手的Template，也就是按照前端开发的思维，进行项目封装

框架特点

集成工具集(flustarts)
状态管理(provider)
mock服务
封装的api请求
集成国际化
简易封装的路由
调试打印(logger,可打印object)
......

项目文档

wiki

快速上手

git clone https://github.com/1467602180/flutter-create-framework.git
flutter pub get
flutter run
复制代码

目录结构

lib
├── api # 接口请求层
├── component # 组件层
├── config # 配置层
├── generated # 国际化
├── l10n # 国际化配置
├── layout # 界面
├── main.dart # 主方法
├── mock # mock服务层
├── provider # 状态管理层
├── router # 路由层
├── util # 工具层
└── view # 视图层
复制代码

功能模块

网络请求

核心封装代码

dio.interceptors.add(InterceptorsWrapper(
        onRequest: (RequestOptions options) async {
          Map optionsMap = {
            "baseUrl":options.baseUrl,
            "path":options.path,
            "method":options.method,
            "data":options.data,
            "headers":options.headers,
          };
          LoggerUtil.d(optionsMap);
          // 在请求被发送之前做一些事情
          Map mockResult = Mock().MockServer(options);
          // 遍历mock规则
          if(mockResult["match"]){
            return dio.resolve(mockResult["response"]);
          }else{
            return options; //continue
          }
          // 如果你想完成请求并返回一些自定义数据，可以返回一个`Response`对象或返回`dio.resolve(data)`。
          // 这样请求将会被终止，上层then会被调用，then中返回的数据将是你的自定义数据data.
          //
          // 如果你想终止请求并触发一个错误,你可以返回一个`DioError`对象，或返回`dio.reject(errMsg)`，
          // 这样请求将被中止并触发异常，上层catchError会被调用。
        },
        onResponse: (Response response) async {
          // 在返回响应数据之前做一些预处理
          LoggerUtil.d(response.data);
          return response; // continue
        },
        onError: (DioError e) async {
          // 当请求失败时做一些预处理
          LoggerUtil.e(e);
          return e; //continue
        }
    ));
复制代码

基于dio的自定义返回数据功能，再结合faker的假数据生成库，我实现了mock模块

mock服务

List UserInfoRole(){
  return [
    {
      "path":'/userinfo',
      "method":"GET",
      "response":{
        "status":0,
        "data":{
          "username":faker.internet.userName(),
          "email":faker.internet.email(),
          "address":faker.address.city()
        }
      }
    }
  ];
}
复制代码

这是一份示例的mock规则，并返回随机生成的用户数据

路由

List<Map<String,dynamic>> Routes(){
  return [
    {
      "path":"/",
      "view":Home(),
    },
    {
      "path":"/changeLanguage",
      "view":ChangeLanguage(),
    },
    {
      "path":"/stateManage",
      "view":StateManage()
    },
    {
      "path":"/editStateManage",
      "view":EditStateManage()
    },
    {
      "path":"/mockRequest",
      "view":MockRequest()
    },
    {
      "path":"/mockRequest",
      "view":MockRequest()
    },
    {
      "path":"/utilsManage",
      "view":UtilsManage()
    },
    {
      "path":"/regexpValida",
      "view":RegexpValida()
    },
    {
      "path":"/simpleEncry",
      "view":SimpleEncry()
    }
  ];
}
复制代码

这是一份示例的路由列表，目前还只是简单封装，后续会增加嵌套路由，动画路由的功能

这只是简单的部分演示，更多的说明可以查看wiki

代码仓库

Github:github.com/1467602180/…

Gitee:gitee.com/hfybbs/flut…