Flutter_web技术预览版已经发布了一段时间了,但国内还没有完整的教程,蔚然作为Flutter爱好者之一,当然有必要写一篇文章来引导新手啦~

目前我们已经使用Flutter_Web构建了两个小站点了(ExaGear资源中心蔚然导航),效果还不错(除了加载慢外。

下面就让我们开始了解Flutter_Web吧。

缺陷

Flutter_Web已经在浏览器上实现了几乎所有Flutter的Api,但目前还不支持插件,您可以将插件代码复制进lib,以投入使用。

因浏览器限制,dart:io不能在浏览器使用,若需要http请求,请使用 package:http 。

……

开始

目前Flutter_Web以git仓库的形式提供,我们为国内开发者提供了一个高速镜像,要创建一个Flutter_Web程序并使用我们的git仓库,您可以这样做:

1.git clone https://git.weiran.org.cn/WeFlutter/flutter_web.git

2.找到examples/hello_world,将其独立复制到一个文件夹

3.将 pubspec.yaml 中 dependency_overrides 的内容替换为:

dependency_overrides:
  flutter_web:
    git:
      url: https://git.weiran.org.cn/WeFlutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://git.weiran.org.cn/WeFlutter/flutter_web
      path: packages/flutter_web_ui
  flutter_web_test:
    git:
      url: https://git.weiran.org.cn/WeFlutter/flutter_web
      path: packages/flutter_web_test

4.使用安装了Dart插件和Flutter插件的iea打开此项目

5.执行 flutter pub global activate webdev 获取webdev工具

6.执行flutter pub upgrade 获取依赖

7.执行 flutter pub global run webdev --auto restart 启动开发环境,待控制带出现 http://localhost:8080 时点击url唤醒浏览器(强烈推荐使用最新Chrome),等待编译完成,屏幕上会出现红色的Helllo World,至此,开发环境的调试就完成了,详细过程请阅读: https://git.weiran.org.cn/WeFlutter/flutter_web/src/branch/master/README.md

开发

虽说Flutter_Web还在技术预览,但像我们这种无所谓的小团队,使用这玩意写网站也没啥大问题~

1.将之前的Hello World文件夹修改为你的项目名

2.修改 pubspec.yaml 中的 name ,将其修改为你的项目名

3.这两步完成后,web文件夹会出现报错,修改错误哪一行的包为你的项目名即可。

4.找到web文件夹的index.html,修改语言为 zh-CN ,title为你的网站标题。

5.删掉Hello World的Text,开始像写Flutter App一样写网站吧!

6.欢迎参考:https://git.weiran.org.cn/WeiRanTeam/hao.git 和 https://git.weiran.org.cn/WeiRanTeam/exagear_res.git

与浏览器的交互

既然使用了浏览器为宿主,那么与浏览器的交互必不可少,Flutter团队目前开放了: dart:htmldart:jsdart:svgdart:indexed_db 这几个库用于浏览器交互,但官方文档中强调,该库只是临时使用,后期将可能会被其他插件代替。

编译与发布

代码肝完了,怎么发布呢?

1.执行 flutter pub global run webdev build 即可编译出一个web代码在build目录,观察index.html。震惊的发现全部页面均由js渲染,你慌不慌,审查元素将会更刺激。。。

2.请将代码放入静态web服务器中查看,本地双击是不行滴。


0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注