flutter web 怎么加cdn

哈喽，大家好，我是欧阳锋，二零二四年了，如果你还不知道 flat 那你就 out 了，赶紧带上你的电脑跟我一起学习 flat 吧。好，我们开始第一课啊，那么首先呢啊我们先来认识一下 flat 啊，那么 flat 到底是什么呢 啊？简单来说呢 flat 就是一个跨平台的前端开发框架啊，性能堪比原声 啊，目前呢已经支持编译成安卓 ios， 麦克 os， windows， linux 以及以及外部应用，也就是说呢它基本上是呃覆盖了全平台啊， 那么 flat 的这个框架使用的语言呢是 dat 啊， dat 呢是一个呃面向对象的静态类型的编程语言啊，那如果你还不知道呃 flat 可以啊，开发什么样的一一一个应用呢？这里我可以简单的给大家看一下啊，我使用 flat 啊开发的一些案例啊啊这里给大家介绍两个两个应用啊，第一个呢是象棋助手啊，我可以打开给大家看一下象棋助手。 好，那这个呢就是使用 flat 啊开发的一个啊应用啊，这个大。目前大家看到的这个呢是一个呃桌面平台的这样一个应用啊啊这个是一个呃打谱软件啊啊我们可以看一个这个棋谱啊， 那这个呢就是使用 flat 啊开发的一个呃象棋打谱呃学习软件啊，目前呢它已经是呃覆盖了全平台 啊，安卓 ios 啊， windows， mac， linux 都可以用啊。那么这个呢是使用啊 flat 开发的啊啊目前已经有啊大量的用户在使用这个软件啊，那么再给大家看一个软件啊，这个软件呢是 呃我在二零二一年啊开发的一个呃，开园的啊 啊，桌面软件啊，他其实是类似于锤子科技的这个 handshack 啊，是一个安卓的手机助手，通过这个软件呢，你可以去管理你手机上的像这个图片啊，照片呀，然后还可以呢，去管理你的你的应用 啊，那么还可以去管理你手机的通讯录啊啊，软件的这个啊， 卸载等等啊，那么这个软件呢，大家可以通过 github 呢去找到啊，这里呢，我也给大家放了链接，我可以打开给大家看一下啊， 但这个软件呢，呃，我在当时做的时候呢，其实对 flat 呢啊并不熟悉啊，所以这个代码其实写的也并不好啊，那么这个我们可以将来有时间呢，我们可以自一起去完善它啊。 好，这个就是大家看到的这样一个啊，开源的这样一个软件啊，这个也是使用 flat 开发的啊，这是我啊使用 flat 开发的两个呃，这个软件的一个案例啊， 所以大家就知道这个 flat 它的这个表现形式其实是呃非常强的啊啊，这个是桌面应用 啊，然后刚才说的这个相机助手呢，其实他不仅仅是桌面应用啊，既有桌面的又有移动端的啊，两端都有，甚至有外部端的啊，这个呢，大家可以私下里去了解啊， 好，了解了这个啊 flat 开发的两个案例之后呢，我们就继续往后面学习啊啊，那么在学习 flat 之前呢 啊，我们假设你已经至少掌握了最基础的大腿与法啊，并且呢已经了解了最基本的 android ios 的应用开发知识 啊，这个是因为呢，呃，尽管我们的 flat 它是一个前端的开开发框架，但是我们难免会与原声应用呢有一个呃打交道，所以呢，你至少应该了解最基础的安卓 ios 的应用开发知识 啊，那么这个我相信大家呢，呃应该是不难的啊，那么第一个呢，你至少已经掌握最基础的大腿语法啊，因为我们的 flat 是使用大的语言进行开发的啊，所以在呃使用 flat 之前呢，你应该去 了解并且掌握最基础的大腿语法啊，那么这个呢，我们在呃讲解的过程中呢，如果遇到一些生僻的一些语法呢，也会有一些简单的介绍啊。 呃，当然最好呢是你已经掌握了他，那么这个这个时候呢，你在呃听我们这个课程的时候呢，就会呃比较轻车熟路啊。好，那么接下来呢，我们就开始搭建这个 flat 的开发款开发环境啊，那么这里呢，我是以 mac os 作为一个开发平台啊，使用 vs code 呢，作为我的主要开发工具啊，所以这里呢，我们先打开官网啊，呃， flat flat 点 d， e， v， 然后通过官网呢，我们给大家讲解一下啊，这个具体应该怎么样去做？你看这里有一个安装 flat， 点击它，然后呢，我们选择 mac os， 选择麦克 os， 我们开发的应用假设是一个 ios 的应用啊，点击它，然后我们继续往下啊 安装 flat 啊，这里呢，我们选择下载和安装，然后这个时候呢，大家看，这里提供了两个链接啊，一个一个呢是英特尔的这个啊处理器，一个是啊，苹果的处理器啊，这个呢要根据大家的 呃购买的这个电脑的情况来选择啊，你像我的电脑呢，是啊， m 系列的芯片，所以这个时候呢，我要选择这个啊，选择这个， 然后下载完了之后呢啊，你可以把这个 zip 包解压啊，解压放到一个目录下边啊，放到你的呃， 你自己想放的这样一个目录啊，这里呢，他推荐是放到这个地方啊，我们的用户目录的 development 这个目录下面啊，这个当然是呃看你自己的喜好了啊， 然后翻到这个目录下面之后呢，我们还要去配置他的环境变量啊，这个怎么配呢？这个可以给大家讲解一下哈，例如说我们可以看一下当前啊呃大部分同学呢你你的终端默认 的使用是 banch 啊，作为一个呃终端啊，作为一个你的一个终端类型，但是我的这个终端呢是 z s h 啊，如果是 z s h 的话呢，那我们需要配置的环节变量应该是在呃，我是习惯于在点 z s h r c， 也就是说当前这个目录下面，大家注意看左边这个波浪线，这个目录下面会有这样一个文件啊， 点 z s h r c 啊，就这个文件啊，我是习惯配置在这里好，到了这里之后呢，我们可以往下 啊看一下我配置的啊，往下还要往下。好，大家看这里这里，你看我配置的这个 呃 flat 的这个黄金变量啊，这里的配置的方法呢就是我们呃， 首先呢是 dollar pass， 这个指的是呃原来的这个呃 pass 的环境变量，然后往后面通过冒号附加一个啊 flat 的一个并目录的这样一个环境变量啊，这样子呢，就配置好了 啊，然后下面这个是什么呢？下面这个其实就是说我们的呃， flat 的一些依赖呢 啊，使用中文的这个网站里面的一个镜像啊，中文网的一个镜像，这样子呢，我们在下载依赖的时候呢，就会呃快一点啊，如果你是中国大陆的这个环境呢，就会快一点， ok， 好，那么通过这两这样的几个步骤哈，我们的这个环 环境变量就已经配置好了，那怎么样验证这个环境变量配置是否 ok 呢？也很简单啊，我们使用 flat 啊，干干 version 啊，这个呢是通过他去看我们 flat 的一个版本啊，还有一个更好的方式呢，是通过 flat doctor， 那这个意思就是说 flat 的呃，医生啊，执意过来就 flat 的医生。通过这个命令呢，我们可以看到我们当前配置的这个啊， flat 环境的一些问题啊，我们回车啊，然后等它执行完啊，等它检测完。 好，那这个时候大家看，如果你是正常的，那是打勾的，那这个时候安卓，安卓的工具链啊，它提示我们有一个，有两个 c m d line tours 是缺失的，还有 enjoy the lessons 是未知的，让我们运行这个命令去啊，同意这些啊，证书等等， 那下面的全是勾啊，就表示我们当前的安卓工具链呢，是有一点点问题的啊，这里呢我就不去改了啊。啊，那么这个大家如果在配置过程中遇到问题的话呢，可以在啊通过弹幕告诉我们啊，也可以在视频下方给我们留言， ok， 好， 那这个呢就是我们去配置 flat 的一个开发环境啊，那环境配置好了之后呢啊，我们就可以呃 进行开发了啊，这里呢，我们，呃还有一个步骤啊，我们刚才遗漏了啊，就是去配置我们的 vs code， 因为我的这个开发工具呢用的是 vs code 啊，那 vs code 大家去 微软的官网啊，去下载一个，下载完了之后呢，我们在这里点击它，就这个地方啊有一个 extensions 啊 extensions， 然后呢我们搜索 flat， 搜索它好，搜索到 flat 之后会这个地方呢会有一个插件，这里我已经安装好了，如果你没有安装的话呢，你点这里的 install 安装，安装好了之后呢，包括这个 flat， 包括这个大的环境呢，都会自动给你安装好， 那么安装好了之后呢，就可以使用这个 vs code 呢进行啊 flat 软件的开发了啊， 好，那么呃配置好了按 flat 开发环境之后呢，我们就开始啊编写我们的第一个 flat 应用啊，这个我们是呃还 是按照这个比较俗套的方式来给大家进行讲解啊，那么怎么怎么样去创建呃第一个 flat 应用呢啊，这里啊，我给大家演示一下啊， 这里呢，我们使用命令函句创建第一个 flat 应用啊，首先第一个 flat great， 然后这个后面啊 flat great， 后面呢就可以呃写我们的这个 flat 应用的名称啊，这里呢，我们就叫做 hello world 啊，回车， 好，那么这个时候呢，我们的 flat 这个项目呢就已经创建好了啊，我们可以通过 vs code 呢打开给大家看一下啊，点击它啊，这里我们先去新建一个窗体，好 cd 啊， open 点，然后呢我们去打开它， hello word 往上面一拖。 好，那么这个呢，就是 hello world 的一个项目结构啊，这里的 lab 呢，就是我们的原码部分啊，然后这里的 android 啊，其实它是对应我们原声的一一部分代码啊， 最后呢，我们打包也都是通过这个安卓的下面的这个文件夹去生成的啊，通过这个 lab 呢，呃，下面的这个原码呢，会编译成啊， so 文件啊， ios 也是一样的啊，那么我们首先来看一下这个 flat 的一个原码，点击它。好，那这个呢，就是它的一个原码啊，这里目前大家可能还看不懂啊，这里呢，我先运行啊，给大家看一下啊， 怎么运行它呢？这里需要用到一个命令啊， flat run 杠 d， 杠 d 呢，就指的是我们运行到哪一个平台啊，这里呢，我们直接运行到一个 chrome 浏览器里面吧啊，回车 稍微等待一会，好，这个呢就是 hello world 应用的一个样子啊，我们点击右下方的这个加号，这个中间的数字呢会递增啊，大家看 好，这个呢，就是一个最基础的一个 flat 应用啊，最基础的一个 flat 应用。 好，那么这节课程呢，我们就到这里啊啊，这个课程呢，主要是给大家啊，主要是主要是带大家简单 认识一下 flat 啊，了解这个 flat 呢啊，是什么样的一个东西啊，怎么样去配置他的开发环境啊，怎么样去 编写它的第一个应用啊，那么下节课呢，我们再来给大家讲解啊， flat 当中的一些啊具体的知识点啊。好，今天的课程呢，我们就先到这里啊，大家可以先点击关注啊，我们下节课再见。

如何通过交换机 web 管理页面配置 vlan id 和窗口呢？第一步，通过浏览器访问交换机 ip， 登录 web 管理页面，一般在交换机背面或相应说明书有注明进入管理页的方法，如果不清楚，可以直接网上搜索自己的型号。第二步，新建 vlan nine hundred and ninety seven 第三步，端口配置 vlan 一、 选择接口管理以太网接口， gigabyte ethernet 零零十七、勾选配置二、链路类型为默认 access 配置，缺省 vlan 为九百九十七 三、选择接口管理以太网接口， gigabyte ethernet zero divided by zero nineteen 配置四、电路类型为默认 trunk 配置，缺省 vlan 为一。第四步，创接口配置 vlan 通过一、在业务管理 vlan 接口选项卡勾选 gigabyte ethernet 零零十九二、将要通过的 vlan 以 tag 的 方式添加进去，这样设置就完成了。关注我，给你带来更多干货教程！

让爱变得简单。

啊啊。

第二步的话，我是提前搭建好了 flat 的， 相关环境还有依赖，而且我还在本地电脑提前安装好了蓝碟模拟器， 这里的话就是通过 ai 工具，它就帮我出实化了个 flat 的 项目，这时候我就可以使用 flutter run 去运行， 运行的时候呢，主要是翻译代码，然后再通过翻译好之后再投放到模拟器上，可以查看 app 的 页面效果。 这里的话可以看到呃它的提的，它的提示就是没有找到相关的设备提示，我要浏览器打开，这时候我是不需要的，我需要的是 可以通过模拟器蓝点模拟器去查看那个页面效果，这时候就需要通过个常用命令 a、 d、 b 去连接到模拟器设备， 拒绝连接无法查看， 这时候呢可以看到它是无法连接到这个模拟器的 ip 地址和还有它的端口，然后这时候就需要打开蓝碟模拟器去查看它所开放的 ip 和端口是多少， 然后可以看到它是以幺二七零点零点一点四个五来去连接到安卓环境，这时候可以再控制台重新去连接到模拟器设备 哦，这是它的操纵命令， 无法连接，扫到了个五，可以看到已经成功连接到模拟器这个设备。 下一下一步的话就是需要运行， 然后正在等待翻译好的过程中，就可以看到模拟器上已经有一个初初识化页面的效果，它的标题 欢迎来到某某某个 app 页面上，然后呢，由于它里面的功能还是未开发的，这时候呢我需要呃发送指令给到对话框里面语描述好我的需求， 可以在对话框里面输入，就是下一步需要他帮我执行， 下一步是，嗯，帮忙读取需求文档，直接 app， 就是 这一份文档，直接 app 点 d o c， 然后生成一份设计稿页面 设计稿和交互页面，并且帮忙生成好所要的 基础功能点的代码，这时候呢，这里有下面可以选择自己想要的模型，这这这里的话我是选择 v max 模型， 可以自己去选择好自己需要的模型，然后再去发送指令，让 ai 来帮我执行， 哈哈， 这时候呢，再去模拟器里面查看，哎，可以看到它最终的一个效果，有一个今日的提示，还有快速开始可以记录我的一个事项，比如说跑步， 再点击开始计时，然后如果是忘记录入的话，可以做一个不录的功能， 可以去选择开始的结束时间， 可以去通过滑动平分，滑动这个拖拉条去记录一个平分， 好点击停止评分。啊，由于这里呢，可能是估计有一个 bug， 需要下期去跟大家分享，如何去修复 界面上的功能 bug， 还有如何去完善下一步的功能点，这只是个初识的大概的功能。基础功能， 这里呢，第一个页面呢，主要是用来记录的记录这个事项，还有它的开始时间，结束时间。第二个呢就是一个简单的报表， 然后第三个话配置，配置的话就要去新建个分类吧，点击添加分类也可以进行删除。 好，通知设置栏呢，需要下期去，呃，让 ai 帮我去继续继续做，这个功能就是手机通知栏的一个提醒功能。 好了，这期分享已结束，已经结束，谢谢大家。

let's go！ let's go。

如果你也像我一样以 web 开发为主，用不惯那些传统抓包工具的，不妨来试一试这个由国人开发的抓包神器吧！由于这个工具使用了 flutter 开发，所以天然跨平台 无论是桌面端还是移动端都有对应的版本，只有 ios 是 需要到商店安装的软件。 ui 风格浓浓的 material design， 整体功能布局和浏览器开发者工具类似。 左侧请求数，右侧详情面板，这你还敢说？用不明白？所有的请求还按域名应用进行了分组查找、过滤，一目了然。 支持多端互联，手机端扫个码就能把流量转发到桌面端，调试更方便。还有一些自定义的高级调试功能，比如域名映设、 请求重写等功能，也是开发调试利器啊！重点是完全免费开源，无广告，日常开发调试，省心又高效，快去试试！

客户说我要一个 app， ios 和 android 的 都要，最好桌面端也能用。以前这意味着什么？三个团队，三套代码，三倍预算，但现在用 flutter， 一 套代码搞定全部。 今天聊聊我用 flutter 做跨平台项目的真实经验，哪些坑踩过，哪些场景真的省了一半成本。 跨平台框架这么多，为什么我给客户推荐 flutter？ 三个核心原因，第一，性能接近原声。 flutter 不是 套壳网页，它有自己的渲染引擎，叫 skia， 所有 ui 都是自己画的，不依赖系统原声控件。 所以无论在 ios 还是安卓上，动画丝滑，交互流畅，用户体验几乎和原声一样。 第二， ui 一 致性。同一套代码在 ios 和 android 的 上跑长得一模一样，不会出现安卓上好好的，到了苹果就错位了的问题。第三，现在 flutter 不 只是移动端， flutter 三之后正式支持 macos， windows， linux， 桌面端，还有 web， 一 套代码真的可以跑六个平台。 react native 也不错，但它依赖原生控件做渲染，不同平台的表现有差异。对于追求 ui 高度一致的项目， flutter 是 更好的选择。 说个我做过的真实案例，客户是一家做企业培训的公司，需要一个学习平台，需求是学员用手机 app 学习，讲适用桌面端管理课程，管理员在 web 后台看数据。 传统做法，移动 app 一个团队，桌面端一个团队， web 一个团队，至少三个前端开发。我的做法全部用 flutter。 手机端，桌面端， web 后台一套代码。 核心架构是这样的，底层是一个统一的业务逻辑层，包括网络请求、数据模型、状态管理，这些代码三端完全共享，上面是 u i 层，用响应式布局，根据屏幕宽度自动适配。 手机上是底部导航栏加单列布局，桌面端变成侧边栏加多栏布局。状态管理，用的 river pod 网络，曾用 d i o， 本地存储用 hi， 最终效果，一个开发者三个月交付了三端产品客户，原本预算五十万，实际花了不到二十万。 当然， flutter 不是 万能的。说几个我踩过的坑坑一，平台特有功能要写桥接代码， 比如调用摄像头、蓝牙、推送通知，每个平台的实现不一样。 flutter 有 插件生态，大部分常见功能有现成插件，但偶尔遇到冷门需求，需要自己写 platform channel 桥解原声代码。 坑二，桌面端的生态还不够成熟 flutter 的 移动端生态非常好，但桌面端的一些插件还不够完善，比如系统托盘、窗口管理、文件拖拽，可能需要额外适配。坑三，包体积偏大 flutter 自带渲染引擎，所以打出来的安装包比原声大个几十 mb， 对 于大部分 app 来说不是问题。但如果你的用户对包体积非常敏感，需要提前说明， 不是所有项目都适合 flutter。 非常适合的场景需要同时做 ios 和 android 的 中等复杂度 app， 需要多端一致 ui 的 产品，预算有限，但要求双端甚至三端覆盖的项目。内容展示类和工具类 app。 不太适合的场景，需要大量调用系统底层 api 的 app， 比如像机类、 a r 类应用。对包体积有极致要求的超轻量 app 已经有成熟原声代码库，只需要做局部更新的项目。 总结一下 flutter 的 核心优势，一套代码多端，运行性能接近原声， ui 完全一致。 选 flutter 的 正确姿势，第一，确认你的需求适合跨平台。第二，架构上做好业务逻辑层和 ui 层的分离。第三，提前评估平台特有功能的插件支持情况。 如果你有一个多端 app 的 需求，不确定技术选型怎么做，可以私信我，我帮你分析一下。

兄弟们要彻底向收费远程工具说再见了！这是一款免费开源且支持多端设备运行的远程桌面项目， 你甚至可以直接通过浏览器来进行连接使用，不仅无时间与画质限制，还能多设备同时远控，覆盖了 n 多种常用功能，在低 top 上已经拿到了接近六 k star， 有 需要远程的兄弟们可以了解一下。

哈喽，大家好，我是周末。这几天 flutter 发布官方 skills 的 消息在开发者圈里传开了。对啊，表面看是给 ai agent 做的技能库，让 ai 能在 flutter 项目里执行复杂开发流程，但仔细想想，一个技术框架为什么要做这件事呢？ 是啊，现在 react 有 vsdk， 各大平台都在降低 ai 开发门槛， flutter 这一步已经超出单纯的技术更新范畴了吧？ 没错，这其实是典型的生态锁定策略啊，让开发者用习惯这套工具包迁移成本就会指数级上升，这不就是最温柔的陷阱吗？ 你这么一说还真是，之前 flatter 的 二零二六路线图里就提到项目要和 ai 持续绑定，这已经不是选择题，是生存题了。 对啊，现在 high agent 和 costco 都在降低开发 agent 的 成本，技术框架不跟进可不就被边缘化了，整个行业都在往 ai 集成上倾斜呢。 而且这次发布也是从开发工具往智能化平台引进，这可是商业模式的铺垫，开发者依赖工具包之后，后续的付费服务、企业级方案就都有入口了。 没错，先送工具再做生意。现在技术营销里这种玩法越来越常见了，最好的营销可不就是让用户离不开你的生态吗？说的太对了，好了，今天咱们就聊到这，我们下次再见。