Flutter学习篇(七)—— flutter web ➡ 几分钟打造个人网站

3,787 阅读3分钟

导航

前言

随着Flutter1.9的正式发布,Flutter web已经合并到Flutter的主Repo, 这意味着以后只要使用同一套基准代码,就可以构建出移动端和网页端的应用,真正进入全平台时代。

架构

先放出两张图:

flutter_web

flutter

分别对应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就不一样了😏,欢迎大家⭐。

个人网站

少年阿涛

参考