flutter如何开发小程序？flutter小程序开发思路

本文关于flutter如何开发小程序？flutter小程序开发思路

今日为大家介绍一种 flutter web 的方案，能够使用我还在小程序中的一些工作经验

flutter 痛点：动态化

这一我就不多说了，相信每一个做 flutter 的企业都是在探寻热更新地处理方案，但结果应当都是差不多的：找不着的，嘿嘿嘿嘿

为解决动态化的痛点，社区里可以这么说百花争艳，各种各样方案五花八门

例如阿里巴巴的 kraken，美团外卖的 flap 这些……这种方案基本都归属于 case by case，大力出奇迹工作……

坦白说，看上去就头疼(lll￢ω￢)

flutter web 痛点：包容积

因此，我们必须要把目光转移到 flutter web，由于 flutter web 编译程序之后是一个纯 h5 新项目，因此与生俱来可以做动态化

但……由于 webview 单核限制，h5 的感受一般不怎么样

与此同时，flutter web 最后的打包文件会非常大，仅仅只是 hello world 就 2m

为解决这一系列问题，我们要想尽办法做一套方案

flutter miniapp

实际上提升包容积，和改进 webview 感受的方案有许多，可我较为精通于小程序，由于携程网小程序早已展现了一种堪称完美的链接了

小程序是双线程的，会让资源与每一个界面的脚本制作引入做预加载，这便能够轻松解决包容积问题

与此同时，双线程的突出是多线程的，也能做到秒开感受

换句话说，其他企业全力了好多年地实际效果，大家可以通过别的方式保证

可是尽管整体的架构是相似的，将相同的架构保证 flutter 中，每一个环节都会有一些差别

我打算记录一下，也顺便重新审视

1. trippal miniapp 架构

compiler（wxml/wxss/js => fre) => jscore => Mutation Records => webview

能够看见，trippal miniapp（携程网小程序）的整体架构是把 wxml 等编译程序为 fre 编码，之后在 jscore 中跑

随后我们只需在 jscore 中仿真模拟 dom 子集合，最后应用 Mutation Observer 搜集 Records 发送至 webview 就能开心绘图了

由于 fre 中常用的 dom API 很少，因此仿真模拟一个 dom 子集合非常容易，可能就 200 行编码罢了

new MutationObserver( mutations => { send({ type:'MutationRecord', mutations });})).observe(document, { subtree:true })

2. flutter miniapp 架构

flutter 小程序的架构，因为他走官方编译程序，将 dart 编译程序为 js，因此仿真模拟 dom 的形式早已不灵了

flutter build（dart => js） => hermes => Proxier => webview

由于 flutter 编译程序后编码包括很多 canvas 编码，仿真模拟一个 canvas 目标确实成本很高了

优秀的人早已想起了，没有错，便是应用 fard 思路，应用 Proxy 挟持 canvas 就可以

const proxy = function (id) {   const fn = function () {}   fn.id = id   return new Proxy(fn, objHandler)}const document = proxy(0)const canvas = proxy(1)

应用这个逻辑，并不需要仿真模拟 dom，只需搜集指令系统发送至 webview 就可以

和 fard 一样，这一方案也只需大概 200 行编码

但是考虑到 flutter 的编码非常复杂，除开 canvas 也有 web-component

customElements.define('flt-glass-pane', class extends HTMLElement {   constructor() {   }})

这类 web-component 的申请注册，都是没有走 Proxy 的，由于 jscore 端没有那个案例，所以在这里必须歪曲实际意义

但不管怎样，这个逻辑是时下最切实可行的构思了，嘿嘿河山风水轮流转，以前淘汰构思如今又用上

此外，和 trippal miniapp 不一样，flutter miniapp 大家不动 jscore 了，改投 hermes，这也是 RN 带有的 js 模块，都是 ctrip 本身就有的

较为有趣的是 hermes 适用跑 js 字节码，这方面也可作为后面提升

split chunk

实际上 flutter 的 split chunk 我还是要做出来的，理论依据是采用 swc 对 dart 编译程序后编码做一次 scope-hoisting随后 tree shaking 掉共用的函数公式

这里有一个小窍门，便是装包时应用 O0 级别提升

flutter build web --profile --dart-define=Dart2jsOptimization=O0

那样就可以获得一份未缩小的编码，可我看见一个 hello world 都需要 10w 行，我很伤心/(ㄒoㄒ)/~~看见又又又头大了……

汇总

构思的确有的，但是具体能否搞得定，需要我花很长一段时间去探究

不过看 flutter 编码确实帮我许多鼓励，这些人真的是太顶了，我一定要扛住压力

此外，往往走 flutter web 方案而非 kraken 或是 flap 的方案，是维护保养量所决定的，本公司基本上都是单杀，因此会绕开大力出奇迹的方案

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。