大前端时代搞定PC/Mac端开发,我有绝招(收藏版)

如果你是一位前端开发工程师，对“跨平台”一词应该不会感到陌生。像常见的前端框架：比如React、Vue、Angular，它们可以做网页端，也可以做移动端，但很少能做到跨PC、Mac端，也就是我们熟知的Windows、Linux以及macOS上的应用程序。即使有，受限于JS的性能瓶颈，当有大量的科学计算需求时，则会略显疲态。
有没有一个理想的UI框架能够通杀它们所有呢？答案是——Flutter。

Flutter的性能优势

做为一个通用的跨平台的UI框架，Flutter在性能方面的突出表现是非常引人夺目的。拿Android举例，一个安卓的原生APP在绘图的时候，要先调用Android框架的Java代码，然后再调用skia（C/C++）绘图引擎代码，最后生成的CPU或者gpu的指令，在设备上完成绘图。而Flutter的APP在绘图的时候，是先调用Flutter框架的Dart代码，然后直接调用skia（C/C++）代码。所以只要Flutter框架Dart代码的效率可以媲美原生框架的Java代码的时候，那么Flutter的性能就可以媲美原生APP。
而如React Native，它首先要调用框架本身的JavaScript代码，然后再调用Android框架的Java代码，然后调用skia，这比原生的App运行过程多出了一个步骤，所以它的这个性能肯定是不及原生的。
国内知名的“闲鱼”技术团队对于Flutter在性能上逼近原生App的解释如下：

1.预先(AOT)编译，运行时直接执行Native(arm)代码；
2.必需的同Native通信(channel)是C++层次，性能好；
3.其线程模型中Dart代码执行(在UI TaskRunner)，图片下载(IO TaskRunner)，真正的渲染(GPU TaskRunner)，同平台的通信等(Platform TaskRunner即Native概念下的主线程)是互相隔离的。透过将耗时的逻辑放入IO TaskRunner或新开Isolate(会在Dart线程池中执行);GPU TaskRunner可以将帧数据提交给GPU时UI TaskRunner已在准备下一帧数据这种流水线的机制提高了渲染速度；
4.Flutter层面针对布局等的优化:布局计算时单次树走动即可完成;Relayout Boundary机制:如果Child 的size是固定的，那么不会因为Child的Relayout导致Parent ReLayout；Repaint Boundry机制:如果树的某个子树如果同树的其他部分不同频地重绘，那么RenderRepaintBoundary可以改善性能。
5.Skia团队针对Flutter的优化。
6.框架的布局优化对上层开发透明。

如果你有一定的前端开发经验，特别是移动端的开发经验，或者深入探究过Flutter，上述内容应该不难理解。
如今，使用Flutter开发移动端App的教程铺天盖地，我来手把手教你如何使用Flutter搞定PC、Mac端开发，从此彻底打通前端跨平台。

PC端实战

1. 准备工作

首先我们要确保Flutter开发环境准备就绪。有关搭建开发环境的步骤，可参阅：
https://flutter.cn/docs/get-started/install
此处不再赘述，我们重点关注下面的操作：
到今天为止，在Stable分支上的Flutter SDK可以设置启用PC端开发的能力，但实际上是无法使用的。因此，我们需要将其切换到master分支上。切换的方法是在命令行窗口执行下面的语句：

flutter channel master

或许也可以直接git方式切换，但我没有尝试，感兴趣的朋友可以自行尝试。
在回显切换成功的提示后，记得执行

flutter upgrade

升级到最新的SDK（包含Dart）版本。
另外，如果你使用的是Windows的话，还需要安装Visual Studio开发软件，并安装Desktop development with C++的Workload（中文名为：工作负载）。如果是macOS，则无需安装Visual Studio。

2. 启用PC端开发支持

在命令行执行

flutter config --enable-windows-desktop

稍等几秒后即可完成。控制台将如下输出：

Setting "enable-windows-desktop" value to "true".
You may need to restart any open editors for them to read new settings.

成功启用后，执行

flutter devices

列出已连接的调试设备列表，首次执行可能会花费一些时间下载必要的开发工具包。随后，可以看到如下类似的输出结果：

1 connected device:
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18363.900]

其他操作系统环境类似。
另外，我们也可以随时执行

flutter config

查看目前的配置。还可以随时还原为默认设定。

Settings:
enable-windows-desktop: true

3. 创建项目

这一步无需多言，在相应的目录下执行

flutter create [项目名]

即可。

4. 迁移项目

对于之前没有启用PC端开发支持的工程，或者需要迁移到PC、Mac端的工程，需要在项目根目录下执行

flutter create .

（注意最后的点）

5. 运行程序

这一步无需多言，进入项目根目录，然后执行

flutter run

即可看到运行结果。

好了，接下来就是实现具体业务的环节了。

到此这篇关于大前端时代搞定PC/Mac端开发,我有绝招的文章就介绍到这了,更多相关大前端时代PC/Mac端开发内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！