导航
- Flutter学习篇(一)—— Dialog的简单使用
- Flutter学习篇(二)—— Drawer和水纹按压效果
- Flutter学习篇(三)—— MobX的使用和原理
- Flutter学习篇(四)—— 尺寸解惑
- Flutter学习篇(五)——路由剖析前篇
- Flutter学习篇(六)——路由剖析终篇
前言
随着Flutter1.9的正式发布,Flutter web已经合并到Flutter的主Repo, 这意味着以后只要使用同一套基准代码,就可以构建出移动端和网页端的应用,真正进入全平台时代。
架构
先放出两张图:
分别对应flutter web和flutter的架构图,很明显,Framework层是一致的,所以对于开发者来讲,无感知,写的是同一套代码,区别在于flutter web底层是把dart代码转为js,而移动端则是使用skia引擎。
环境
其实对于做移动开发的技术人员,他们多多少少会很渴望拥有个人网站,但奈何web开发不精通,成本太高,而用了flutter web,将不再苦恼。
先从环境配置开始:
flutter channel master
flutter upgrade
flutter config --enable-web
cd <into project directory>
flutter create .
这个过程可能会花一些时间,具体看网速情况。
运行:
flutter run -d chrome
打包
flutter build web
具体可以查看Flutter中文网。
打包之后的产物如下:
index.html是入口,代码逻辑都编译在main.dart.js里面。
部署
当完成上述操作,就意味着离我们的个人网站越来越近了,打包的产物已经有了,就差部署🔨了。这时候,有人会说,部署肯定很麻烦啊,又要买服务器,又要配乱七八糟的环境,你这标题党,几分钟肯定不行🤥。
别急别急,有个神器,叫做Github Page, 是github专门给开发者提供的免费站点,我们可以在上面部署自己的网站,很多知名博主就是把自己的博客部署在github page上面。在github page部署的项目可以通过以下形式的链接访问:
https://username.github.io/project
,这样一来就等于拥有了服务器和域名。
我猜还是会有人起哄,说这样没办法自动化部署,太鸡肋了。🙆还有我早有准备,其实,github还有另一个神器,叫做Github Actions, 主要是提供持续集成的服务。这样一来,我们就可以实现这样一个自动化部署的流程:
提交项目代码到github,触发github actions,执行flutter build web命令,把生成的产物部署到项目的gh_pages分支,关联gitHub page。
如此一来,我们只要专注于编写自己的个人网站,其他部署等乱七八糟的事情就交给GitHub。当然,即使有这些准备,从0开始,几分钟还是不足以打造自己的个人网站的😵,不过呢,有了demo就不一样了😏,欢迎大家⭐。