甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
需求，app中使用webview和h5交互，根据h5发过来的消息，在屏幕上展示flutter组件，并且可以发送消息给h5。
创新互联建站是一家集网站建设,遂宁企业网站建设,遂宁品牌网站建设,网站定制,遂宁网站建设报价,网络营销,网络优化,遂宁网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
首先使用的组件是flutter_WebView_plugin，这个组件不能嵌套flutter组件,所以放弃这个组件。
flutter_inappbrowser 可以实现组合布局, 所以选用了此库, GitHub链接
[
文/陈炉军
整理/LiveVideoStack
大家好，我是阿里巴巴闲鱼事业部的陈炉军，本次分享的主题是Flutter浪潮下的音视频研发探索，主要内容是针对闲鱼APP在当下流行的跨平台框架Flutter的大规模实践，介绍其在音视频领域碰到的一些困难以及解决方案。
分享内容主要分为四个方面，首先会对Flutter有一个简单介绍以及选择Flutter作为跨平台框架的原因，其次会介绍Flutter中与音视频关系非常大的外接纹理概念，以及对它做出的一些优化。之后会对闲鱼在音视频实践过程中碰到的一些Flutter问题提出了一些解决方案——TPM音视频框架。最后是闲鱼Flutter多媒体开源组件的介绍。
Flutter
Flutter是一个跨平台框架，以往的做法是将音频、视频和网络这些模块都下沉到C++层或者ARM层，在其上封装成一个音视频的SDK，供UI层的PC、iOS和Android调用。
而Flutter做为一个UI层的跨平台框架，顾名思义就是在UI层也实现了一个跨平台开发。可以预想的是未Flutter发展的好的话，会逐渐变为一个从底层到UI层的一个全链路的跨平台开发，技术人员分别负责SDK和UI层的开发。
在Flutter之前已经有很多跨平台UI解决方案，那为什么选择Flutter呢？
我们主要考虑性能和跨平台的能力。
以往的跨平台方案比如Weex，ReactNative，Cordova等等因为架构的原因无法满足性能要求，尤其是在音视频这种性能要求几乎苛刻的场景。
而诸如Xamarin等，虽然性能可以和原生App一致，但是大部分逻辑还是需要分平台实现。
我们可以看一下，为什么Flutter可以实现高性能：
原生的native组件渲染以IOS为例，苹果的UIKit通过调用平台自己的绘制框架QuaztCore来实现UI的绘制，图形绘制也是调用底层的API,比如OpenGL、Metal等。
而Flutter也是和原生API逻辑一致，也是通过调用底层的绘制框架层SKIA实现UI层。这样相当于Flutter他自己实现了一套UI框架，提供了一种性能超越原生API的跨平台可能性。
但是我们说一个框架最终性能怎样，其实取决于设计者和开发者。至于现在到底是一个什么状况：
在闲鱼的实践中，我们发现在正常的开发没有特意的去优化UI代码的情况下，在一些低端机上，Flutter界面的流畅性是比Native界面要好的。
虽然现在闲鱼某些场景下会有卡顿闪退等情况，但是这是一个新事物发展过程中的必然问题，我们相信未来性能肯定不会成为限制Flutter发展的瓶颈的。
在闲鱼实践Flutter的过程中，混合栈和音视频是其中比较难解决的两个问题，混合栈是指一个APP在Flutter过程中不可能一口气将所有业务全部重写为Flutter，所以这是一个逐步迭代的过程，这期间原生native界面与Flutter界面共存的状态就称之为混合栈。闲鱼在混合栈上也有一些比较好的输出，例如FlutterBoost。
外接纹理
在讲音视频之前需要简要介绍一下外接纹理的概念，我们将它称之为是Flutter和Frame之间的桥梁。
Flutter渲染一帧屏幕数据首先要做的是，GPU发出的VC信号在Flutter的UI线程，通过AOT编译的机器码结合当前Dart Runtime，生成Layer Tree UI树，Layer Tree上每一个叶子节点都代表了当前屏幕上所需要渲染的每一个元素，包含了这些元素渲染所需要的内容。将Layer Tree抛给GPU线程，在GPU线程内调用Skia去完成整个UI的渲染过程。Layer Tree中有PictureLayer和TextureLayer两个比较重要的节点。PictureLayer主要负责屏幕图片的渲染，Flutter内部实现了一套图片解码逻辑，在IO线程将图片读取或者从网络上拉取之后，通过解码能够在IO线程上加载出纹理，交给GPU线程将图片渲染到屏幕上。但是由于音视频场景下系统API太过繁多，业务场景过于复杂。Flutter没有一套逻辑去实现跨平台的音视频组件，所以说Flutter提出了一种让第三方开发者来实现音视频组件的方式，而这些音视频组件的视频渲染出口，就是TextureLayer。
在整个Layer Tree渲染的过程中，TextureLayer的数据纹理需要由外部第三方开发者来指定，可以把视频数据和播放器数据送到TextureLayer里，由Flutter将这些数据渲染出来。
TextureLayer渲染过程：首先判断Layer是否已经初始化，如果没有就创建一个Texture，然后将Texture Attach到一个SufaceTexture上。
这个SufaceTexture是音视频的native代码可以获取到的对象，通过这个对象创建的Suface，我们可以将视频数据、摄像头数据解码放到Suface中，然后Flutter端通过监听SufaceTexture的数据更新就可以顺利把刚才创建的数据更新到它的纹理中，然后再将纹理交给SKIA渲染到屏幕上。
然而我们如果需要用Flutter实现美颜，滤镜，人脸贴图等等功能，就需要将视频数据读取出来，更新到纹理中，再将GPU纹理经过美颜滤镜处理后生成一个处理后的纹理。按Flutter提供的现有能力，必须先将纹理中的数据从GPU读出到CPU中，生成Bitmap后再写入Surface中，这样在Flutter中才能顺利的更新到视频数据，这样做对系统性能的消耗很大。
通过对Flutter渲染过程分析，我们知道Flutter底层需要渲染的数据就是GPU纹理，而我们经过美颜滤镜处理完成以后的结果也是GPU纹理，如果可以将它直接交给Flutter渲染，那就可以避免GPU-CPU-GPU这样的无用循环。这样的方法是可行的，但是需要一个条件，就是OpenGL上下文共享。
OpenGL
在说上下文之前，得提到一个和上线文息息相关的概念：线程。
Flutter引擎启动后会启动四个线程：
第一个线程是UI线程，这是Flutter自己定义的UI线程，主要负责GPU发出的VSync信号时候用当前Dart编译的机器码和当前运行环境创建出Layer Tree。
还有就是IO线程和GPU线程。和大部分OpenGL处理解决方案中一样，Flutter也采取一个线程责资源加载，一部分负责资源渲染这种思路。
两个线程之间纹理共享有两种方式。一种是EGLImage(IOS是 CVOpenGLESTextureCache)。一种是OpenGL Share Context。Flutter通过Share Context来实现纹理共享，将IO线程的Context和GPU线程的Context进行Share，放到同一个Share Group下面，这样两个线程下资源是互相可见可以共享的。
Platform线程是主线程，Flutter中有一个很奇怪的设定，GPU线程和主线程共用一个Context。并且在主线程也有很多OpenGL 操作。
这样的设计会给音视频开发带来很多问题，后面会详细说。
音视频端美颜处理完成的OpenGL纹理能够让Flutter直接使用的条件就是Flutter的上下文需要和平台音视频相关的OpenGL上下文处在一个Share Group下面。
由于Flutter主线程的Context就是GPU的Context，所以在音视频端主线程中有一些OpenGL操作的话，很有可能使Flutter整个OpenGL被破坏掉。所以需要将所有的OpenGL操作都限制在子线程中。
通过上述这两个条件的处理，我们就可以在没有增加GPU消耗的前提下实现美颜和滤镜等等功能。
TPM
在经过demo验证之后，我们将这个方案应用到闲鱼音视频组件中，但改造过程中发现了一些问题。
上图是摄像头采集数据转换为纹理的一段代码，其中有两个操作：首先是切进程，将后面的OpenGL操作都切到cameraQueue中。然后是设置一次上下文。然后这种限制条件或者说是潜规则往往在开发过程中容易被忽略的。而这个条件一旦忽略后果就是出现一些莫名其妙的诡异问题极难排查。因此我们就希望能抽象出一套框架，由框架本身实现线程的切换、上下文和模块生命周期等的管理，开发者接入框架以后只需要安心实现自己的算法，而不需要关心这些潜规则还有其他一些重复的逻辑操作。
在引入Flutter之前闲鱼的音视频架构与大部分音视频逻辑一样采用分层架构：
1：底层是一些独立模块
2：SDK层是对底层模块的封装
3：最上层是UI层。
引入Flutter之后，通过分析各个模块的使用场景，我们可以得出一个假设或者说是抽象：音视频应用在终端上可以归纳为视频帧解码之后视频数据帧在各个模块之间流动的过程，基于这种假设去做Flutter音视频框架的抽象。
咸鱼Flutter多媒体开源组件
整个Flutter音视频框架抽象分为管线和数据的抽象、模块的抽象、线程统一管理和上下文同一管理四部分。
管线，其实就是视频帧流动的管道。数据，音视频中涉及到的数据包括纹理、Bit Map以及时间戳等。结合现有的应用场景我们定义了管线流通数据以Texture为主数据，同时可以选择性的添加Bit Map等作为辅助数据。这样的数据定义方式，避免重复的创建和销毁纹理带来的性能开销以及多线程访问纹理带来的一些问题。也满足一些特殊模块对特殊数据的需求。同时也设计了纹理池来管理管线中的纹理数据。
模块：如果把管线和数据比喻成血管和血液，那框架音视频的场景就可以比喻成器官，我们根据模块所在管线的位置抽象出采集、处理和输出三个基类。这三个基类里实现了刚才说的线程切换，上下文切换，格式转换等等共同逻辑，各个功能模块通过集成自这些基类，可以避免很多重复劳动。
线程：每一个模块初始化的时候，初始化函数就会去线程管理的模块去获取自己的线程，线程管理模块可以决定给初始化函数分配新的线程或者已经分配过其他模块的线程。
这样有三个好处：
一是可以根据需要去决定一个线程可以挂载多少模块，做到线程间的负载均衡。第二，多线程并发式能够保证模块内的OpenGL操作是在当前线程内而不会跑到主线程去，彻底避免Flutter的OpenGL 环境被破坏。第三，多线程并行可以充分利用CPU多核架构，提升处理速度。
从Flutter端修改Flutter引擎将Context取出后，根据Context创建上下文的统一管理模块，每一个模块在初始化的时候会获取它的线程，获取之后会调用上下文管理模块获取自己的上下文。这样可以保证每一个模块的上下文都是与Flutter的上下文进行Share的，每个模块之间资源都是共享可见的，Flutter和音视频native之间也是互相共享可见的。
基于上述框架如果要实现一个简单的场景，比如画面实时预览和滤镜处理功能，
1：需要选择功能模块，功能模块包括摄像头模块、滤镜处理模块和Flutter画面渲染模块，
2：需要配置模块参数，比如采集分辨率、滤镜参数和前后摄像头设置等，
3：在创建视频管线后使用已配置的参数创建模块
4：最后管线搭载模块，开启管线就可以实现这样简单的功能。
上图为整个功能实现的代码和结构图。
结合上述音视频框架，闲鱼实现了Flutter多媒体开源组件。
组要包含四个基本组件分别是：
1：视频图像拍摄组件
2：播放器组件
3：视频图像编辑组件
4：相册选择组件
现在这些组件正在走内部开源流程。预计9月份，相册和播放器会实现开源。
后续展望和规划
1：实现开头所说的从底层SDK到UI的全链路的跨端开发。目前底层框架层和模块层都是各个平台各自实现，反而是Flutter的UI端进行了跨平台的统一，所以后续会将底层也按照音视频常用做法把逻辑下沉到C++层，尽可能的实现全链路跨平台。
2：第二部分内容为开源共建，闲鱼开源的内容不仅包括拍摄、编辑组件，还包括了很多底层模块，希望有开发者在基于Flutter开发音视频应用时可以充分利用闲鱼开源出的音视频模块能力，搭建APP框架，开发者只要去负责实现特殊需求模块就可以，尽可能的减少重复劳动。
没有。
咸鱼flutter没有换成h5，咸鱼不仅有flutter的开发应用，还包括h5的开发应用，flutterflutter更偏向客户端的研发体系，h5性能稳定，因为二者有不同的优势，所以咸鱼flutter没有换成h5，而是两者共用。
咸鱼flutter是一个全新的移动UI框架，它允许使用同一个代码库构建高性能的Android和iOS应用，在此基础之上，以h5为数据分析的系统，进行大数据分析，从而二者共同促进咸鱼的使用率。
本文由阿里闲鱼技术团队逸昂分享，原题“消息链路优化之弱感知链路优化”，有修订和改动，感谢作者的分享。
闲鱼的IM消息系统作为买家与卖家的沟通工具，增进理解、促进信任，对闲鱼的商品成交有重要的价值，是提升用户体验最关键的环节。
然而，随着业务体量的快速增长，当前这套消息系统正面临着诸多急待解决的问题。
以下几个问题典型最为典型：
1） 在线消息的体验提升；
2） 离线推送的到达率；
3） 消息玩法与消息底层系统的耦合过强。
经过评估，我们认为现阶段离线推送的到达率问题最为关键，对用户体验影响较大。
本文将要分享的是闲鱼IM消息在解决离线推送的到达率方面的技术实践，内容包括问题分析和技术优化思路等 ，希望能带给你启发。
（本文已同步发布于： ）
本文是系列文章的第6篇，总目录如下：
《 阿里IM技术分享(一)：企业级IM王者——钉钉在后端架构上的过人之处 》
《 阿里IM技术分享(二)：闲鱼IM基于Flutter的移动端跨端改造实践 》
《 阿里IM技术分享(三)：闲鱼亿级IM消息系统的架构演进之路 》
《 阿里IM技术分享(四)：闲鱼亿级IM消息系统的可靠投递优化实践 》
《 阿里IM技术分享(五)：闲鱼亿级IM消息系统的及时性优化实践 》
《 阿里IM技术分享(六)：闲鱼亿级IM消息系统的离线推送到达率优化 》（* 本文）
从数据通信链接的技术角度，我们根据闲鱼客户端是否在线，将整体消息链路大致分为强感知链路和弱感知链路。
强感知链路由以下子系统或模块：
1） 发送方客户端；
2） idleapi-message（闲鱼的消息网关）；
3） heracles（闲鱼的消息底层服务）；
4） accs（阿里自研的长连接通道）；
5） 接收方客户端组成。
整条链路的核心指标在于端到端延迟和消息到达率。
强感知链路中的双方都是在线的，消息到达客户端就可以保证接收方感知到。强感知链路的主要痛点在消息的端到端延迟。
弱感知链路与强感知链路的主要不同在于： 弱感知链路的接收方是离线的，需要依赖离线推送这样的方式送达。
因此弱感知链路的用户感知度不强，其核心指标在于消息的到达率，而非延迟。
所以当前阶段，优化弱感知链路的重点也就是提升离线消息的到达率。换句话说， 提升离线消息到达率问题，也就是优化弱感知链路本身 。
下图一张整个IM消息系统的架构图，感受下整体链路：
如上图所示，各主要组件和子系统分工如下：
1） HSF是一个远程服务框架，是dubbo的内部版本；
2） tair是阿里自研的分布式缓存框架，支持 memcached、Redis、LevelDB 等不同存储引擎；
3） agoo是阿里的离线推送中台，负责整合不同厂商的离线推送通道，向集团用户提供一个统一的离线推送服务；
4） accs是阿里自研的长连接通道，为客户端、服务端的实时双向交互提供便利；
5） lindorm是阿里自研的NoSQL产品，与HBase有异曲同工之妙；
6） 域环是闲鱼消息优化性能的核心结构，用来存储用户最新的若干条消息。
强感知链路和弱感知链路在通道选择上是不同的：
1） 强感知链路使用accs这个在线通道；
2） 弱感知链路使用agoo这个离线通道。
通俗了说，弱感知链路指的就是离线消息推送系统。
相比较于在线消息和端内推送（也就是上面说的强感知链路），离线推送难以确保被用户感知到。
典型的情况包括：
1） 未发送到用户设备：即推送未送达用户设备，这种情况可以从通道的返回分析；
2） 发送到用户设备但没有展示到系统通知栏：闲鱼曾遇到通道返回成功，但是用户未看到推送的案例；
3） 展示到通知栏，并被系统折叠：不同安卓厂商对推送的折叠策略不同，被折叠后，需用户主动展开才能看到内容，触达效果明显变差；
4） 展示到通知栏，并被用户忽略：离线推送的点击率相比于在线推送更低。
针对“1）未发送到用户设备”，原因有：
1） 离线通道的token失效；
2） 参数错误；
3） 用户关闭应用通知；
4） 用户已卸载等。
针对“3）展示到通知栏，并被系统折叠”，原因有：
1） 通知的点击率；
2） 应用在厂商处的权重；
3） 推送的数量等。
针对“4）展示到通知栏，并被用户忽略”，原因有：
1） 用户不愿意查看推送；
2） 用户看到了推送，但是对内容不感兴趣；
3） 用户在忙别的事，无暇处理。
总之： 以上这些离线消息推送场景，对于用户来说感知度不高，我们也便称之为弱感知链路。
我们的弱感知链路分为3部分，即：
1） 系统；
2） 通道；
3） 用户。
共包含了Hermes、agoo、厂商、设备、用户、承接页这几个环节。具体如下图所示。
从推送的产生到用户最终进入APP，共分为如下几个步骤：
步骤1 ：Hermes是闲鱼的用户触达系统，负责人群管理、内容管理、时机把控，是整个弱感知链路的起点。；
步骤2 ：agoo是阿里内部承接离线推送的中台，是闲鱼离线推送能力的基础；
步骤3 ：agoo实现离线推送依靠的是厂商的推送通道（如：苹果的 apns通道 、Google的fcm通道、及 国内各厂商的自建通道 。；
步骤4 ：通过厂商的通道，推送最终出现在用户的设备上，这是用户能感知到推送的前提条件；
步骤5 ：如果用户刚巧看到这条推送，推送的内容也很有趣，在用户的主动点击下会唤起APP，打开承接页，进而给用户展示个性化的商品。
经过以上5个步骤，至此弱感知链路就完成了使命。
弱感知链路的核心问题在于：
1） 推送的消息是否投递给了用户；
2） 已投递到的消息用户是否有感知。
这对应推送的两个阶段：
1） 推送消息是否已到达设备；
2） 用户是否查看推送并点击。
其中： 到达设备这个阶段是最基础的，也是本次优化的核心。
我们可以将每一步的消息处理量依次平铺，展开为一张漏斗图，从而直观的查看链路的瓶颈。
漏斗图斜率最大的地方是优化的重点，差异小的地方不需要优化：
通过分析以上漏斗图，弱感知链路的优化重点在三个方面：
1） agoo受理率：是指我们发送推送请到的数量到可以通过agoo（阿里承接离线推送的中台）转发到厂商通道的数量之间的漏斗；
2） 厂商受理率：是指agoo中台受理的量到厂商返回成功的量之间的漏斗；
3） Push点击率：也就通过以上通道最终已送到到用户终端的消息，是否最终转化为用户的主动“点击”。
有了优化方向，我们来看看优化手段吧。
跟随推送的视角，顺着链路看一下我们是如何进行优化的。
用户的推送，从 Hermes 站点搭乘“班车”，驶向下一站： agoo 。
这是推送经历的第一站。到站一看，傻眼了，只有不到一半的推送到站下车了。这是咋回事嘞？
这就要先说说 agoo 了，调用 agoo 有两种方式：
1） 指定设备和客户端，agoo直接将推送投递到相应的设备；
2） 指定用户和客户端，agoo根据内部的转换表，找到用户对应的设备，再进行投递。
我们的系统不保存用户的设备信息。因此，是按照用户来调用agoo的。
同时： 由于没有用户的设备信息，并不知道用户是 iOS 客户端还是 Android 客户端。工程侧不得不向 iOS 和 Android 都发送一遍推送。虽然保证了到达，但是，一半的调用都是无效的。
为了解这个问题： 我们使用了agoo的设备信息。将用户转换设备这一阶段提前到了调用 agoo 之前，先明确用户对应的设备，再指定设备调用 agoo，从而避免无效调用。
agoo调用方式优化后，立刻剔除了无效调用，agoo受理率有了明显提升。
至此： 我们总算能对 agoo 受理失败的真正原因做一个高大上的分析了。
根据统计： 推送被 agoo 拒绝的主要原因是——用户关闭了通知权限。同时，我们对 agoo 调用数据的进一步分析发现——有部分用户找不到对应的设备。 优化到此，我们猛然发现多了两个问题。
那就继续优化呗：
1） 通知体验优化，引导打开通知权限；
2） 与agoo共建设备库，解决设备转换失败的问题。
这两个优化方向又是一片新天地，我们择日再聊。
推送到达 agoo ，分机型搭乘厂商“专列”，驶向下一站：用户设备。
这是推送经历的第二站。出站查票，发现竟然超员了。
于是乎： 我们每天有大量推送因为超过厂商设定的限额被拦截。
为什么会这样呢？
实际上： 提供推送通道的厂商（没错， 各手机厂商的自家推送通道良莠不齐 ），为了保证用户体验，会对每个应用能够推送的消息总量进行限制。
对于厂商而言，这个限制会根据推送的类型和应用的用户规模设定——推送主要分为产品类的推送和营销类的推送。
厂商推送通道对于不同类型消息的限制是：
1） 对于产品类推送，厂商会保证到达；
2） 对于营销类推送，厂商会进行额度限制；
3） 未标记的推送，默认作为营销类推送对待。
我们刚好没有对推送进行标记，因此触发了厂商的推送限制。
这对我们的用户来说，会带来困扰。闲鱼的交易，很依赖买卖家之间的消息互动。这部分消息是需要确保到达的。
同样： 订单类的消息、用户的关注，也需要保证推送给用户。
根据主流厂商的接口协议，我们将推送的消息分为以下几类，并进行相应标记：
1） 即时通讯消息；
2） 订单状态变化；
3） 用户关注内容；
4） 营销消息这几类。
同时，在业务上，我们也进行了推送的治理——将用户关注度不高的消息，取消推送，避免打扰。
经过这些优化，因为超过厂商限额而被拦截的推送实现了清零。
通过优化agoo受理率、厂商受理率，我们解决了推送到达量的瓶颈。但即使消息被最终送达，用户到底点击了没有？这才是消息推送的根本意义所在。
于是，在日常的开发测试过程中，我们发现了推送的两个体验问题：
1） 用户点击Push有开屏广告；
2） 营销Push也有权限校验，更换用户登陆后无法点击。
对于开屏广告功能，我们增加了Push点击跳过广告的能力。
针对Push的权限校验功能，闲鱼根据场景做了细分：
1） 涉及个人隐私的推送，保持权限校验不变；
2） 营销类的推送，放开权限校验。
以上是点击体验的优化，我们还需要考虑用户的点击意愿。
用户点击量与推送的曝光量、推送素材的有趣程度相关。推送的曝光量又和推送的到达量、推送的到达时机有关。
具体的优化手段是：
1） 在推送内容上：我们需要优化的是推送的时机和相应的素材；
2） 在推送时机上：算法会根据用户的偏好和个性化行为数据，计算每个用户的个性化推送时间，在用户空闲的时间推送（避免在不合适的时间打扰用户，同时也能提升用户看到推送的可能性）。
3） 在推送素材上：算法会根据素材的实时点击反馈，对素材做实时赛马。只发用户感兴趣的素材，提高用户点击意愿。
通过以上我们的分析和技术优化手段，整体弱推送链路链路有了不错的提升，离线消息的到达率相对提升了两位数。
本篇主要和大家聊的是只是IM消息系统链路中的一环——弱感知链路的优化，落地到到具体的业务也就是离线消息送达率问题。
整体IM消息系统，还是一个比较复杂的领域。
我们在消息系统的发展过程中，面临着如下问题：
1） 如何进行消息的链路追踪；
2） 如何保证IM消息的快速到达（见《 闲鱼亿级IM消息系统的及时性优化实践 》)；
3） 如何将消息的玩法和底层能力分离；
4） 离线推送中如何通过用户找到对应的设备。
这些问题，我们在以前的文章中有所分享，以后也会陆续分享更多，敬请期待。
[1] Android P正式版即将到来：后台应用保活、消息推送的真正噩梦
[2] 一套高可用、易伸缩、高并发的IM群聊、单聊架构方案设计实践
[3] 一套亿级用户的IM架构技术干货(上篇)：整体架构、服务拆分等
[4] 一套亿级用户的IM架构技术干货(下篇)：可靠性、有序性、弱网优化等
[5] 从新手到专家：如何设计一套亿级消息量的分布式IM系统
[6] 企业微信的IM架构设计揭秘：消息模型、万人群、已读回执、消息撤回等
[7] 融云技术分享：全面揭秘亿级IM消息的可靠投递机制
[8] 移动端IM中大规模群消息的推送如何保证效率、实时性？
[9] 现代IM系统中聊天消息的同步和存储方案探讨
[10] 新手入门一篇就够：从零开发移动端IM
[11] 移动端IM开发者必读(一)：通俗易懂，理解移动网络的“弱”和“慢”
[12] 移动端IM开发者必读(二)：史上最全移动弱网络优化方法总结
[13] IM消息送达保证机制实现(一)：保证在线实时消息的可靠投递
[14] IM消息送达保证机制实现(二)：保证离线消息的可靠投递
[15] 零基础IM开发入门(一)：什么是IM系统？
[16] 零基础IM开发入门(二)：什么是IM系统的实时性？
[17] 零基础IM开发入门(三)：什么是IM系统的可靠性？
[18] 零基础IM开发入门(四)：什么是IM系统的消息时序一致性？
（本文已同步发布于： ）
Uniapp目前比较成熟，而且用的是Vue语法，学习成本比较低，而且行业里面用的也比较广泛，而Flutter的话，学习成本略高，因为要学习新的语言，还有就是目前生态不是特别完备，等他再发展发展吧。黑马程序员官网有成套免费视频哦，有什么不懂的可以直接过去学习。您的采纳是对我成长的鞭策
Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。
话不多说，先来看看实际效果。 项目源码地址
开发环境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型： null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。
数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。
本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。
要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持 windows 和 macos 系统。
接下来使用 flutter create 命令创建我们的模版工程。
创建完项目后，我们就可以 run 起来了。
先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。
我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。
通过 InkWell 组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置
这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根结点不是 Material 风格的组件，因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置，否则它将全屏显示。
读取说表拖拽的文件一开始想尝试使用 InkWell 组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ，能满足要求。
使用开源组件 file_picker ，选完图片后的操作和拖拽选择图片后的操作一致。
Textfield 如果要显示富文本，那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。
在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。
通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ，表示 对用户的下载文件夹的读/写访问权限 。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。
当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。
原文地址：