Hi, 大家好，我是姜友华。
今天，我们来试试Flutter 2.0的Web开发。为什么要用Flutter呢？是因为不知道从何时开始，前端开发变得越来越杂乱。特怀念JQuery当老大的时代。
使用Flutter开发Web的好处是：
- 服务接口可以更趋一致性。
- 界面更有预知性。
一、下载Android Studio最新版。
记得要最新版。Android Studio 2020.3.1。只有最新版在Build时有浏览器选择项。
二、 安装Flutter最新版本。
建议使用brew install flutter来安装Flutter。Flutter接近1个G，使用brew安装等间接实现了断点下载。
- 更新并下载flutter。
$ brew upgrade.
$ brew install flutter.
等着下载就好了，下载安装成功后，我们进入到第二步。
- 确认flutter可用。
- 用
flutter doctor检查一下。第一次运行flutter doctor需要花一些时间，会使用flutter pub get获取flutter tools。
$ flutter doctor
- 当这一进程一直被卡住时，表示我们需要更换为国内资源再试。
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ pod doctor
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale en-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.61.2)
[✓] Connected device (2 available)
Android toolchain错误可以先不管。
- 最后，来确保一下是最新版本（后期有用）
$ flutter channel stable
$ flutter upgrade
到这里，flutter安装算是完成了。
当然，我们也安装了Chrome。
- 找到flutter的安装目录。
$ brew list flutter
==> Binary
/usr/local/bin/dart -> /usr/local/Caskroom/flutter/2.5.3/flutter/bin/dart (2KB)
/usr/local/bin/flutter -> /usr/local/Caskroom/flutter/2.5.3/flutter/bin/flutter (2KB)
- 安装目录在
/usr/local/Caskroom/flutter/2.5.3/flutter/，建立flutter工程时需要用到。
三、使用Android Studio建立Flutter APP工程。
- 安装Flutter支持。
- 打开Android Studio，如果未显示
New Flutter Object项话，我们需要安装Flutter支持。在切换左侧到Plugins，输入flutter，选第一项并安装。
安装Flutter Plugin
安装完成后，重启。
- 新建Flutter工程。
- 在重启界面，选择
New Flutter Object。
新建Flutter工程
- 设置Flutter工程。
在Flutter页面里，添加Flutter SDK路径，即上面找到的安装目录。
Flutter SDK path
接着设置工程的保存位置与使用的语言。
工程设置
一定人要勾选Web，我们也保留了Android、iOS以备用。
-
选择Chrome为Flutter Device，运行一下。
选择Chrome为Flutter Device
-
Chrome显示效果如下：
显示效果
四、编译为Web
- 编译。我们在Terminal里进行到工程目录。然后运行
flutter build web，就可以了。
$ flutter build web
💪 Building with sound null safety 💪
Compiling lib/main.dart for the Web... 26.2s
- 查看编辑的内容：
$ ls lib
main.dart
$ ls build/web
assets icons manifest.json
favicon.png index.html version.json
flutter_service_worker.js main.dart.js
$ cat build/web/index.html
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="shop">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>shop</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = '2207918894';
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing || reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
</body>
</html>
4 检查一个内容。
老规矩，我们还是用go有实现一个Web Server。
- 用vscode打开
/path/to/shop/build/web，新建一个main.go文件内容如下：
package main
import (
"net/http"
)
func main() {
http.Handle("/", http.FileServer(http.Dir(".")))
http.ListenAndServe(":80", nil)
}
- 在当前目录里运行
$ go run main.go
- 在浏览器输入
http://localhost
验证有效
好，就这样。我是姜友华，下次见。
网友评论