Flutter实现动态化更新-技术预研

2021-11-29 21:58:42 阅读：416 来源： 互联网

标签：Flutter jsAppPath path webview js 预研动态化

前言：有做过完整项目的小伙伴应该都知道，随着业务的发展，app的运营需求会越来越多（比如：根据运营活动动态更换页面的UI）。这就要求我们的app要尽可能的满足市场的运营的动态化需求，通过这篇文章你将了解到：
1. Flutter动态化的方案使用和效果对比；
2. 针对中小型团队，该如何最小成本、最高效的实现app的动态化需求。

动态化的常用方式和实现原理

首先什么是动态化？即不依赖程序安装包，就能进行动态实时更新页面的技术。
接下来列举常用的方式和原理：

一般大家都会想到webview，这确实是最常用的方式，但也是动态化中最不稳定的方式；webview的体验比较差，同时需要做大量设备的兼容。
基于 GPL 的 Native 增强。 GPL即通用编程语言，比如我们常见的Dart、JavaScript等，通过这些通用语言来为Native功能增强动态化能力。通俗的举个例子解释：运营者动态更改线上的js文件，Flutter应用通过网络拉取更新后动态渲染，这就是基于GPL的Native增强。
基于 DSL 的 Native 增强。 DSL即专用领域语言，为了解决某些特定场景下的任务而专门设计的语言,比如xml、json、css、html。通过生成简单的DSL语言文件，通过解析协议对页面进行动态配置。

我们整体来看Flutter的动态化生态，目前市面上并没有一个成熟的开源框架，只有国内各大互联网公司陆续开源，但也都处在急需维护的状态。当前主流框架有：

腾讯开源的 MXFlutter
58同城开源的 Flutter Fair
阿里巴巴开源的北海Kraken

同时我还会介绍另外两种比较通用的方式：

webview增强 【植入腾讯 X5内核，模型升级改造】
UI库模板化

各大厂动态化架构对比

Flutter Fair

Fair是“58同城”为Flutter设计的动态化框架，通过Fair Compiler工具实现JSON配置和原生Dart源文件的自动转化，从而动态更新Widget Tree和State。

使用介绍

官方并没有维护pub上的Fair插件，我们需要去GitHub fork源码下来编写demo。58Fair
准备一份配置好的JSON文件，然后直接调用FairWidget传入文件路径即可显示，非常简单。动态化需求无非就是把JSON配置文件放到线上，然后FairWidget每次都会重新拉取下来展示，从而实现动态化。

/// 基本使用
return Container(
    alignment: Alignment.centerLeft,
    color: Colors.white,
    constraints: BoxConstraints(minHeight: 80),
    child: FairWidget(
      name: item.id,
      path: 'assets/bundle/sample.json',
      data: {"fairProps": json.encode({'detail': details})},
    ),
);

继续跟进源码，可以看到当我们传入的文件路径是以http开头的时候，会通过网络进行拉取

void _reload() {
  var name = state2key;
  var path = widget.path ?? _fairApp.pathOfBundle(widget.name);
  bundleType = widget.path != null && widget.path.startsWith('http')
      ? 'Http'
      : 'Asset';
  parse(context, page: name, url: path, data: widget.data).then((value) {
    if (mounted && value != null) {
      setState(() => _child = value);
    }
  });
}

/// 再通过parse()方法逐层进入decoder → bundle_provider，查看onLoad方法
@override
Future<Map> onl oad(String path, FairDecoder decoder,
    {bool cache = true, Map<String, String> h}) {
  bool isFlexBuffer;
  if (path.endsWith(FLEX)) {
    isFlexBuffer = true;
  } else if (path.endsWith(JSON)) {
    isFlexBuffer = false;
  } else {
    throw ArgumentError(
        'unknown format, please use either $JSON or $FLEX;\n $path');
  }
  if (path.startsWith('http')) {
    return _http(path, isFlexBuffer, headers: h, decode: decoder);
  }
  return _asset(path, isFlexBuffer, cache: cache, decode: decoder);
}

/// 重点查看以http开头的解析方法，用的是http库拉取
Future<Map> _http(String url, bool isFlexBuffer,
    {Map<String, String> headers, FairDecoder decode}) async {
  var start = DateTime.now().millisecondsSinceEpoch;
  var response = await client.get(url, headers: headers);
  var end = DateTime.now().millisecondsSinceEpoch;
  if (response.statusCode != 200) {
    throw FlutterError('code=${response.statusCode}, unable to load : $url');
  }
  var data = response.bodyBytes;
  if (data == null) {
    throw FlutterError('bodyBytes=null, unable to load : $url');
  }
  Map map;
  map = await decode.decode(data, isFlexBuffer);
  var end2 = DateTime.now().millisecondsSinceEpoch;
  log('[Fair] load $url, time: ${end - start} ms, json parsing time: ${end2 - end} ms');
  return map;
}

看下依赖，其实都是非常旧的了，很明显维护力度不够；同时对Flutter版本也有限制，Flutter每出一个版本,58Fair官方就很可能需要做一次适配。

  fair_annotation:
    path: ../annotation
  fair_version:
    path: ../flutter_version/flutter_2_5_0

  flat_buffers: ^1.12.0
  url_launcher: ^5.7.2
  http: ^0.12.2

最后怎么写JSON配置文件，肯定自带一套协议，跟着官方文档Api写就可以了。熟悉Flutter的同学看下面的示例代码应该能秒懂。

{
  "className": "Center",
  "na": {
    "child": {
      "className": "Container",
      "na": {
        "child": {
          "className": "Text",
          "pa": [
            "嵌套动态组件"
          ],
          "na": {
            "style": {
              "className": "TextStyle",
              "na": {
                "fontSize": 30,
                "color": "#(Colors.yellow)"
              }
            }
          }
        },
        "alignment": "#(Alignment.center)",
        "margin": {
          "className": "EdgeInsets.only",
          "na": {
            "top": 30,
            "bottom": 30
          }
        },
        "color": "#(Colors.redAccent)",
        "width": 300,
        "height": 300
      }
    }
  }
}

利弊分析

Fair的好处：用起来很简单，性能稳定；
缺点很明显：

用JSON来配置UI，就注定了它是不支持逻辑的；
Flutter的widget太多，Fair目前也只能匹配有限的静态UI；
脱离Dart生态，UI都用JSON写了......；
团队维护力度非常有限，很多插件都没有更新，pub也没有更新。【但其实这是所有Flutter动态化开源框架的通病

标签：Flutter,jsAppPath,path,webview,js,预研,动态化
来源： https://blog.csdn.net/weixin_55362248/article/details/121620704

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Flutter实现动态化更新-技术预研

动态化的常用方式和实现原理

各大厂动态化架构对比

Flutter Fair