谷歌开发者大会上宣布flutter1.9正式发布，并且flutter_web已经合到dev合master。
首先切换到master并升级flutter到最新版本
flutter channel master
flutter upgrade
安装webdev
flutter pub global activate webdev
这里需要注意一下，安装之后看提示还要添加环境变量
Installed executable webdev.
Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):
export PATH="$PATH":"$HOME/.pub-cache/bin"
Activated webdev 2.5.1.
打开~ > .bash_profile把export PATH="$PATH":"$HOME/.pub-cache/bin"添加进去，然后更新环境变量。
source ~/.bash_profile
到这webdev就完事了，命令行敲webdev测试一下
webdev
/Users/xxx/.pub-cache/bin/webdev: line 7: dart: command not found
惊不惊喜，意不意外，这是因为dart没有添加环境变量。
在.bash_profile中添加dart环境变量
export DART_HOME=/Users/xxx/sdk/flutter/bin/cache/dart-sdk/bin
export PATH=${DART_HOME}:${PATH}
刷新环境变量
source ~/.bash_profile
重新试一下webdev如果显示如下，说明没有问题
A tool to develop Dart web projects.
Usage: webdev <command> [arguments]
Global options:
-h, --help Print this usage information.
--version Prints the version of webdev.
Available commands:
build Run builders to build a package.
help Display help information for webdev.
serve Run a local web development server and a file system watcher that rebuilds on changes.
Run "webdev help <command>" for more information about a command.
这里需要注意一下，如果没有用flutter自带的dart-sdk而是单独安装，这里可能会因为dart版本与flutter版本不匹配而出现如下提示
Can't load Kernel binary: Invalid kernel binary format version.
No active package webdev.
出现这种情况把dart卸载
brew uninstall dart
然后如前边所述将flutter内置的dart-sdk添加到环境变量就可以了。
启用flutter_web
flutter config --enable-web
出现如下提示
Setting "enable-web" value to "true".
接下来创建一个flutter项目
flutter create myapp
cd myapp
可以看见目录下多了一个web文件夹里边是一个index.html，内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myapp</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
从这里可以看见，最终也是编译成js文件。
先看一下已连接的设备
➜ myapp flutter devices
3 connected devices:
macOS • macOS • darwin-x64 • Mac OS X 10.14.5 18F132
Chrome • chrome • web-javascript • Google Chrome 76.0.3809.132
Server • web • web-javascript • Flutter Tools
这里合之前相比多了Chrome和Server
在chrome里跑一下项目
flutter run -d chrome
效果如下，一个熟悉的页面。
image.png
可以看见大多数都是自定义标签，当然也不全是自定义，比如中间那一行文本和数字就是
p标签，关于渲染flutter用了CSS Paint，就是用css画图，挺有意思的api。点
sources，然后command+o
image.png
可以看见这里并不是js文件，而是dart文件。
选择
main.dart，看到的就是main.dart的源码。接下来说一下调试，直接用chrome的开发者工具查找DOM是比较困难的，这个时候需要
android Studio，在android Studio中打开myapp，设备选择chrome(web)，点绿色的三角跑起来
image.png
在
View > Tool Windows下选择Flutter Inspector
image.png
打开之后是这个样子
image.png
可以看到不知道多少个层级
image.png
这个按钮可以在页面上显示
widget的边界
image.png
这个准星一样的按钮相当于浏览器的审查元素，点击之后页面左下角会出现一个放大镜，想要重新在页面上选择元素需要点击放大镜，也可以在
Inspector之中直接选择，页面上对应的元素会高亮。这里再说一下另一种方式，chrome内置了
Dart DevTools项目跑起来之后点下边这个按钮
image.png
chrome会弹出个新窗口
image.png
和
Flutter Insector类似，但是更好用一点。
关于dart文件的调试，和js一样可以打断点
image.png
接下来是打包
➜ myapp flutter build web
Compiling lib/main.dart for the Web... 26.4s
build结束后看一下build > web目录下
➜ web ls
assets index.html main.dart.js main.dart.js.map
dart被编译成了js
网友评论