写点什么

京东:将 Flutter 扩展到微信小程序端的探索

  • 2019-09-27
  • 本文字数:3341 字

    阅读完需:约 11 分钟

京东:将Flutter扩展到微信小程序端的探索

ARES 作为京东技术中台的多端融合技术团队,聚焦于跨端开发技术框架和平台搭建,包括但不限于 RN、Flutter、小程序等技术栈。目前已经广泛应用于京东商城、京东金融、京东到家、京东拼购等京东 La 系核心 APP 内,帮助业务团队低成本、快速开发自己的业务,以应对市场的瞬息万变之势。


Google Flutter 是一个非常优秀的跨端框架,不仅可以运行在 Android、 iOS 平台,而且可以支持 Web 和桌面应用。在国内小程序是非常重要的技术平台,我们也一直思考能否把 Flutter 扩展到小程序端?我们团队之前已经开源了 Alita 项目,Alita 可以把 React Native 的代码转换并运行在微信小程序平台。受此启发,我们认为同样是声明式 UI 框架的 Flutter 同样可以运行在小程序平台。


所以,我们发起了flutter_mp开源项目。以微信小程序为例,不过现阶段,flutter_mp 项目还处于早期的实验阶段,很多功能还在探索规划中,欢迎大家在 Github 上随时关注我们的最新进展,或者参与项目共同探索。

原理简介

虽然还有诸多功能未完成,我们先来谈谈整个 flutter_mp 的实现原理。篇幅原因,下面我们将只对 flutter_mp 几个重要的部分进行简单说明。


先看下 flutter_mp 的实际效果:



Flutter 版官方 layout 样例



通过 flutter_mp 转换并运行在小程序端效果

声明式 UI 的处理

Flutter 是声明式 UI 框架,声明式 UI 只需要向框架描述 UI 长什么样子而不用关心框架具体的实现细节,具体到 Flutter,上层的 UI 描述使用底层的 skia 图形引擎处理就是原生 Flutter,而把底层处理换成 html/css/canvas 就是 flutter_webflutter_mp 则是探索在类小程序上对这些 UI 描述的处理。


我们看一个最简单例子


var x = 'Hello World'
Center( child: Text(x));
复制代码


对于上面的 UI 结构,我们只需要在小程序的 wxml 文件里,用如下的结构对应就 OK 了。


// wxml部分<Center>   <Text>{{x}}</Text></Center>
// js 部分Component({ data: { x: 'Hello World' }})
复制代码


虽然实际的结构要比上面的情况复杂的多,不过通过上面简单的例子,我们知道起码要做两个事情:


  1. 我们需要根据 Flutter 代码生成相关小程序 wxml 模版文件

  2. 收集 wxml 渲染需要的数据,放置到小程序组件的 data 字段。

wxml 结构生成

我们知道小程序是无法动态操作节点的,wxml 结构需要预先生成,所以 Flutter 运行在小程序之前,会存在一个编译打包阶段,这个阶段会遍历 Dart 代码,根据一定规则生成 wxml 文件(编译阶段还会做下文将要提到的另外一个重要事情 — 把 Dart 编译为 js)。


具体的,我们首先会将 Dart 源码处理为可分析的 AST 结构,AST 是源代码的树型表示结构。然后我们深度遍历这份 AST 语法树结构,生成目标 wxml,整个过程如下:



构建 wxml 结构的难点在于: Flutter 不仅是声明式 UI 还是“值 UI”,什么叫“值 UI”?简单来说,Flutter 把 UI 看成是一个普通的值,类似于字符串,数字一样的值,既然是一个普通的值,就可以参与所有的控制流程,可以是函数的返回值也可以是函数参数等等。而小程序的 wxml 虽然也是声明式 UI,却不是“值 UI”,wxml 更加像模版,更加的静态。怎么用静态的 wxml 表达动态的“值 UI”是构建 wxml 结构的关键所在。


看个例子:


Widget getX() {    if (condition1) {        return Text('Hello');    } else if (condition2) {        return Container(            child: ...        );    } else if (condition3) {        return Center(            child: ...        );    }    ...}
Widget x = getX();
Center( child: x // < --- 如何处理这里的 x??);
复制代码


这里的 child: x ,x 是一个动态值,它的具体值需要在运行阶段才能确定,它可能是任意的 Widget,如何在静态的 wxml 上处理这里动态的 x?受 Alita 框架的启发,这里主要是借助于小程序 template 的动态性(template 的 is 属性可以接受变量值)。有如下几步:


  1. 首先在遍历 Dart 源码 AST 结构的时候,会把每一个独立完整的“UI 值”片段,对应到 wxml 的 template, 比如上文 getX 里面的 UI


<template name="template001">    <text>Hello</text></template><template name="template002">    <Container>...</Container></template><template name="template003">    <Center>...</Center></template>
复制代码


  1. 在遇到 类似 x 这种动态值的时候,固定地会生成一个 template 占位。


<template name="template004">    <Center>        <template is="{{templateName}}" data="{{...templateData}}"/>    </Center><template name="template003">
复制代码


  1. 在运行阶段,会根据 getX 函数的运行结果来决定 x 映射的“UI 值”,如果 getX 里面 condition1 为 true,那么这里的 templateName 的值就是 template001*。*具体的数据计算收集工作,参考下面要的 “渲染数据收集”过程。


可以看出 flutter_mp 处理“值 UI”方式,完全参考了 Alita。

渲染数据收集

wxml 结构的生成是在编译阶段就完成了,与它不同渲染数据是运行时的信息,随时会根据 setState 而改变。那么我们怎么收集出我们需要的渲染数据呢?


如果我们还是顺着 Flutter 的架构图,很难插入我们收集的钩子函数,另外 Flutter 的这个架构对于小程序来说太重了,下图红框里的这些过程对于小程序的渲染来说并不必要。最后由于最终的代码会被转化为 js,而 Flutter 本身依赖的库里面很多是不支持转化 js 的,比如 dart:ui 等等。



所以我们实现了一个极简极简的 Flutter 小程序版本 mini_flutter,在编译期我们会把所有对 Flutter 库的引用替换为 mini_flutter, mini_flutter 只存在到上图的 Rendering 阶段,这个 Rendering 的实现也是为小程序定制的, 在运行时期 Rendering 不断收集 Widgets 的信息。最终生成一个 UI 描述的 JSON 结构,这个结构就包含了上文所说的 templateNametemplateData,UI 描述将会被下层小程序获得,用来渲染小程序 UI,架构图如下:


Dart/JS:转化与互操作

Flutter 的开发语言是 Dart,而小程序的运行环境是浏览器,所以我们还需要把 Dart 编译为 JavaScript 代码。


在上文的编译打包阶段也提到这一点,这个过程主要是使用了 Dart 提供的 dart2js 工具,不过,针对小程序环境,生成的 js 代码仍需要做一些适配,另外虽然都是 JS 代码,dart2js 生成的 js 和小程序原生 js 的运行环境却是隔离的,也就是说它们是不能共享变量,方法等等,它们各自在本身的"域"里执行。


这带来两个问题:


  1. Widget 初始化 或者 setState 更新,生成的 UI 描述 JSON,如何传递给小程序"域"呢?

  2. 相关渲染回调,事件的都发生在小程序"域",这些信息如何传递给 Dart?


总结一下:Dart(最终会编译为 JS)与小程序原生 JS 如何互操作?


解决这个问题主要是借助 dart:js, package:js 这两个库:


Dart 操作 JS:


import 'package:js/js.dart';
@JS("JSON.stringify")external stringify(String str);
复制代码


这样当 Dart 代码调用 stringify 方法的时候,实际上会执行window.JSON.stringify方法


JS 操作 Dart:


// dart注册void main() {    context['dartHi'] = () {        print('dart hi!');    };}
复制代码


// js 调用window.dartHi()
复制代码


这里只是简单说明 Dart 与 JS 的互操作,另外由于小程序的运行环境是阉割以后的浏览器环境,flutter_mp 的实现还稍有不同。


总之,Dart 与 JS 是可以互操作的,这样就打通了上层 Flutter 环境和下层小程序环境。

布局系统

Flutter 的布局系统不同与 css,但是和 css 颇相似。



在上文提到的 Rendering 阶段,会根据 Widget 的布局属性,类别,约束条件生成一个等效的 css 样式。注意这里边界约束是上下文相关的。比如一个没有宽高的 Container 实际大小,不仅和子元素相关,还和父元素传递过来的边界约束条件相关,这个其实是比较麻烦的,能不能把 Flutter 的 Widget 属性,边界约束完全用 css 表达,我们还在寻求有效的方案。

总结

flutter_web 一样,完全把 Flutter 所有特性渲染到小程序上是不可能的,一般我们觉得应该是部分页面,部分功能需要运行在小程序上,这样使用 flutter_mp 才是有意义的。


正如前文所说,flutter_mp 还在很早期的阶段,社区的支持和反馈对我们来说特别宝贵。同时欢迎广大开发者一起来维护flutter_mp


如果你需要在生产环境实现小程序跨端开发,推荐使用我们成熟的 RN 转小程序项目Alita


2019-09-27 14:114982

评论

发布
暂无评论
发现更多内容

聊聊数科公司如何与现有数智平台厂商协同作战

用友BIP

数科公司 数智平台 数智平台白皮书

你会怎样设计云原生场景下的IOC框架?

K

原创 云原生 ioc spring ioc

中企出海,海外商旅费控的关键点是什么?

用友BIP

中企出海

架构成长之路 | 图解分布式共识算法Paxos教会协议

阿里技术

paxos协议 分布式算法

高能预警!融云WICC发布《社交泛娱乐出海作战地图》

融云 RongCloud

互联网 地图 融云 即时通信 出海

中盐集团:以财务共享为基础,引领盐行业数智化转型

用友BIP

财务共享

成败关键!一对一直播源码平台搭建需要的条件

山东布谷科技

软件开发 源码搭建 一对一直播源码 直播源码

蚂蚁集团云原生智能容量技术 KapacityStack 正式开源

TRaaS

GitHub 开源 蚂蚁集团

提升用户体验:在小程序环境中充分利用Ionic框架

FinFish

Ionic 跨端开发 小程序容器 跨端框架 小程序容器技术

OpenHarmony工程模板和开发语言

坚果

OpenHarmony 6 月 优质更文活动

里氏替换原则究竟如何理解?

磐远

Java 设计模式 设计原则 里氏替换

使用华为云开发者插件一键部署应用到ECS

华为云PaaS服务小智

ide 云计算 插件 华为云

社交泛娱乐出海如何抓住AIGC?我在融云WICC上看到了答案

融云 RongCloud

社交 融云 泛娱乐 出海 通讯

C语言编程—可变参数

梦笔生花

C语言 可变参数 6 月 优质更文活动

BeautifulPrompt:PAI推出自研Prompt美化器,赋能AIGC一键出美图

阿里云大数据AI技术

人工智能 AIGC Prompt 企业号 6 月 PK 榜

低代码开发平台为数智赋能,让开发变得更简单

引迈信息

前端 低代码 JNPF

测试左移

BY林子

软件测试 敏捷测试

快速掌握Kubernetes中的核心概念

穿过生命散发芬芳

k8s 6 月 优质更文活动

直播回顾|走进元服务,携手小强停车探索鸿蒙新流量阵地

HarmonyOS SDK

HMS Core

2023开放原子全球开源峰会高峰论坛成功举办

开放原子开源基金会

开源 开放原子全球开源峰会 开放原子 高峰论坛

系统重构实施,百亿级核心交易如何保证准确性?

鲸品堂

计费模式 对账系统 企业号 6 月 PK 榜

专注开发者体验 | GitOps 实现 Kuberentes 持续部署

亚马逊云科技 (Amazon Web Services)

云原生

如今做泛娱乐出海,你需要融云《社交泛娱乐出海作战地图》

融云 RongCloud

产品 互联网 融云 泛娱乐 出海

智能人才发现,帮助企业精准找人,快速识人

用友BIP

数智人力

STM32+DHT11监测环境的温湿度

DS小龙哥

6 月 优质更文活动

libpq SDK 发送 SQL 和解析结果

KaiwuDB

sql KaiwuDB

原点安全携“金融机构消费者个人信息保护解决方案”亮相 2023 中国金融数字化转型发展大会

原点安全

数据安全 金融机构 个人信息保护

openEuler 开源汇智赢未来|2023开放原子全球开源峰会 openEuler 论坛成功召开

openEuler

开源 操作系统 openEuler 资讯

理解 与 计算 物联网产品的电池使用寿命

矜辰所致

物联网 低功耗计算 电量计算 6 月 优质更文活动

京东:将Flutter扩展到微信小程序端的探索_大前端_严康_InfoQ精选文章