阅读 314

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

自学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…

文章分类
开发工具
文章标签