写点什么

把 Flutter 扩展到微信小程序端的探索,安卓面试题库

用户头像
Android架构
关注
发布于: 45 分钟前

}


...


}


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>


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


<template name="template004">


<Center>


<template is="{{templateName}}" data="{{...templateData}}"/>


</Center>


<template name="template003">


3、在运行阶段,会根据 getX


函数的运行结果来决定 x 映射的“UI 值”,如果 getX 里面 condition1 为 true,那么这里的 templat


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


eName 的值就是 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 结构,这个结构就包含了上文所说的 templateName, templateData,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 还在很早期的阶段,如果你需要在生产环境实现小程序跨端开发,推荐使用我们成熟的 RN 转小程序项目 Alita。


学习分享,共勉


题外话,之前一直不注意对知识的整理,导致很多知识点学习不系统,正好最近同事和我花了一个多月的时间整理出来一份 Flutter 全方面的学习资料,今天把它免费分享出来,希望能够帮助到陷入移动开发困局 Android 工程师朋友,尽早跟上新兴热点技术。这份资料包括**Flutter 学习 PDF+架构视频+面试文档+项目实战(源码)也省的大家再去网上花时间找资料。[点击我](


) 前往免费领取**




**资料免费领取方式:转发+关注+点赞后,[点击我](


) 前往免费领取**

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
把Flutter扩展到微信小程序端的探索,安卓面试题库