最近 JetBarin 公司发布了 Compose Desktop。是的，你没听错，就是 Google 用于Android 上的 Compose。

Jetpack Compose 是用于构建原生 Android 界面的新工具包。Jetpack Compose 使用更少的代码、强大的工具和直观的 Kotlin API 简化并加快了 Android 上的界面开发。

而现在，就可以编写同样的UI层代码，然后运行到 Android 和 DeskTop 了。不难发现，这是 kotlin 一直在搞的套路，多平台共享代码。

使用了 Skia 进行硬件加速( 就是Flutter使用的 Skia )，可以与 AWT 和 Swing 进行互操作。

让我们先来一个 Hello World 试试水。

新建 Compose 项目

你可以更新到最新的idea 2020.3(目前还是beta)，或者从 Github 上拉取它的模板。这里我选择使用 idea。

在 kotlin 选项中找到 JetBrains Compose ,选择 Desktop uses Kotlin。

创建完成后等待 gradle 依赖下载。

但是在这里会出现问题，运行是报下面的错。

org/jetbrains/kotlin/cli/common/PropertiesKt

org.jetbrains.kotlin.cli.common.PropertiesKt

Try: Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

经过排查，这是由 Gradle 和 java 14 引起的，Gradle 6.6 的版本会引起该问题，可以将gradle更改到 6.7 或者 6.5 重新进行构建。我这里修改到 6.5.1

目前 compose 的版本为 113 , 而通过 idea 创建的 版本为 63，所以更新版本。

以下为官方的 gradle.kts 配置

import org.jetbrains.compose.compose
import org.jetbrains.compose.desktop.application.dsl.TargetFormat
import org.jetbrains.kotlin.gradle.tasks.KotlinCompile

plugins {
    kotlin("jvm") version "1.4.0"
    // __UPDATE_COMPOSE_VERSION_MARKER__
    id("org.jetbrains.compose") version (System.getenv("COMPOSE_TEMPLATE_COMPOSE_VERSION") ?: "0.1.0-build113")
}


group = "me.young"
version = "1.0-SNAPSHOT"

dependencies {
    implementation(compose.desktop.currentOs)
}

compose.desktop {
    application {
        mainClass = "MainKt"

        nativeDistributions {
            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
            packageName = "KotlinJvmComposeDesktopApplication"
        }
    }
}
repositories {
    jcenter()
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
}

运行

打开 main.kt, 运行 main 函数。

看样子还行，还是熟悉的界面 JavaFx , 还是熟悉的味道 Material Design 。让我们来瞅瞅代码。

fun main() = Window {
    var text by remember { mutableStateOf("Hello, World!") }

    MaterialTheme {
        Button(onClick = {
            text = "Hello, Desktop!"
        }) {
            Text(text)
        }
    }
}

通过通过点击按钮，来更改 text，从而来刷新界面。基本和其他声明式 UI ，大同小异，比如 flutter，swiftUI 等。

基本使用控件使用可以参考 androidx.compose 文档。

针对桌面做了一些扩展，比如鼠标，键盘事件，系统的原生通知，系统的托盘菜单。

具体文档可以参考官方 JetBrains/compose-jb 仓库

打包

开发完成的应用可以直接打包为平台可执行文件。我使用的是 windows 平台。通过 packageMsi 命令打包为 exe 应用。

这里会下载 wix3 。

这里可能会出现下载失败，如果下载失败，请手动到 Github 下载 wix311-binaries.zip。然后将文件命名为 wix311.zip 放在 build/wixToolset 下，重新运行 packageMsi 。

当你认为你要编译成功时， Gradle 再次报错。

������������, �����˴������MSI ��װ�����: �汾�ַ��������� MSI ���� [1.0-SNAPSHOT] �޸�����: �������¹������ô��������� “win.msi.productVersion”��https://msdn.microsoft.com/en-us/library/aa370859%28v=VS.85%29.aspx��

夺命�错，打开连接一看，好像是指定版本有问题， 微软要求版本必须按照 major.minor.build 这样的方式进行指定，而且 major 的范围是 0-255，minor的范围是 0-255，最后的 build 的范围是 0-65535 。

在 Gradle 中添加版本号。

nativeDistributions {
    targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
    packageName = "Hello World"
    version = "0.1.0"
}

更新 gradle 后重新 packageMsi。

仍旧是报错。这次是 IO 异常。

在Gradle 中添加新的配置 vendor 。

nativeDistributions {
    targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
    packageName = "Hello World"
    version = "0.1.0"
    vendor = "Example vendor"
}

经历了一番波折后终于可以打包成功。

打包后的 msi 在 build\compose\binaries\main\msi\Hello World-0.1.0.msi。

一个简单的Hello World 大小在 40 mb 左右。

总结

目前来说，项目还有很多 bug，毕竟才 Alpha，而且官方文档也有错误。例如打包这一块，很多问题需要自己摸索。

例如中文输入法的输入的情况下报错。

Exception in thread “AWT-EventQueue-0 @coroutine#2” java.lang.NullPointerException: event.text must not be null。

图标显示问题，在我这里显示一个黑框框。

但是，jvm 上的 GUi 技术有了新的发展未尝不是一件好事，可以一处编写，多端运行。

参考资料

compose-jb

JetBrains/compose-jb

androidx.compose

Jetpack Compose 基础知识

每次我都是将用的关键技术告诉他，按道理讲搭建博客的技术网上的文章应该有很多很多了。但是我还是打算自己写一下教程，方便更多的人来进行学习和搭建博客的使用。

Hugo

目前我的博客由之前的 Hexo 迁移到 Hugo，Hugo 无论是安装，配置还是部署个人感觉都比 Hexo 方便太多了。Hugo 的安装仅仅需要一个安装包。可以在 Github 上找到你的对应版本，进行安装。

Hugo 是有 Go 语言写的，从 markdown 渲染 html 的速度很快。自称为 世界上渲染网站最快的框架。另外 Hugo 也有很多的主题，可以供我们选择。

安装

安装完记得将 Hugo 添加到环境变量中。在终端进行 hugo version 进行验证是否安装正确。

是的，安装就是如此的简单，官方提供了其他安装方式，你可以选择官方提供的方式。

建站

通过 Hugo 的命令我们可以快速生成我们的网站。你可以选择你喜欢的地方来执行下面的命令。

hugo new website your_website_name

这样就建立了新的站点。

此时我们的新站点无法启动。需要安装主题，你可以在你选择你喜欢的主题。

这里我随便搜索了一个主题进行安装。

cd themes
git clone https://github.com/vividvilla/ezhil.git

安装完成后，在根目录中 config.toml 进行配置，填写主题名称。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ezhil"

在根目录下使用 hugo server 进行项目启动。

此时我们的网站已经启动，可以看到我们的页面。

新建文章

我们执行 hugo new posts/Hello.md 我们将文章同意存放到 posts 目录下。posts 目录会信件到 content 目录下。

对 Hello.md 进行编辑。

---
title: "Hello"
date: 2019-10-12T22:15:50+08:00
draft: true
---
# Hello Hugo

这是 Hugo 的第一篇文章。

其中有着 draft 选项。当 draft 为 true 的时候，默认是不会渲染的。 我们可以将 draft 改为 false，或者在渲染启动时候添加参数 hugo server -D 就会渲染。

这样我们就已经安装完成了 Hugo。更多的主题配置可以参考当前主题的 themes/${name}/exampleSite/config.toml 。

生成静态页面

在项目根目录下直接使用 hugo 命令，会生成 public 目录，该目录下都是关于我们的 markdown 编译完成的 html 静态页面。

部署

博客已经安装完成，并且本地已经测试完成，文章也已经写好了。那么就该部署了。

部署到哪里呢？

之前我喜欢放到 Git Page ,但是我发现了更好的地方 Firebase。Firebase 上有 Hosting，每个月都有免费的流量和空间使用，对于个人来说，足够使用了，并且可以配置个人域名等，版本控制。

使用 Firebase 是稍微有点门槛的，大陆无(ti)法(zi)直接使用。

建立 Firebase 项目

首先登录 firebase 官网，登录账号后新建一个项目。

Firebase CLI 安装

首先确保本地有 node.js 环境。设置终端代理。

set http_proxy=http://127.0.0.1:1080

set https_proxy=http://127.0.0.1:1080

set http_proxy_user=user
set http_proxy_pass=pass

set https_proxy_user=user
set https_proxy_pass=pass

设置完代理之后就可以安装我们的 cli 了。

通过 npm 进行安装 npm install -g firebase-tools 这样就完成了安装。

安装完成后首先是登录。firebase login 进行登录，会打开浏览器进行授权。这个过程使用全局代理，否则有可能无法验证通过。

在项目的根目录下执行 firebase init 。选择 Hosting，通过空格进行确认。

之后选择 Use an existing project。从项目列表里找到我们刚刚创建的项目。回车继续。下一步是询问是否使用public 目录。这里直接回车就好。因为public目录就是我们要进行部署的文件。

是否要重写 index.html ，这里可以选择不重写。

这样我们的项目就已经安装创建完成。

完成了创建，那么下一步就是要部署。

部署到 firebase 上

通过命令firebase deploy 就可以将我们的编译后的网页部署到 firebase 上去。

执行完成后下方会告诉我们项目控制台的地址和项目地址，我们可以打开项目地址进行项目的查看。

但是，当我们打开项目的时候，发现上面没有样式。通过浏览器控制台可以看到样式文件并没有被请求到。

这里需要我们手动设置一下。

打开项目的 config.toml 文件，第一行的 baseURL 进行修改，将它修改为我们firebase给的网站地址。

重新进行 hugo 和 firebase deploy。 刷新页面后，可以看到我们的网站已经有了样式，重新部署到 firebase 上了。

集成 CI/CD

话说，每次写完文章都要来一串命令，很费事，也容易出错。所以我们可以集成 CI/CD 来进行部署。

这里我选择了 Gitlab 自带的 CI/CD 功能。方便快捷。

通过命令 firebase login:ci 进行重新登录授权，此时授权完成之后就会在终端上出现一行 token。

请把 token 保存好。

在项目根目录建立 CI/CD 执行文件,命名为 .gitlab-ci.yml。粘贴下面的代码。

variables:
  GIT_SUBMODULE_STRATEGY: recursive
  GIT_SUBMODULE_DEPTH: 1
stages:
  - config
  - build
  - deploy
cache:
  paths:
    - public/

git_config:
  stage: config
  script:
    git config --global core.quotePath false

hugo_build:
  stage: build
  image: registry.gitlab.com/pages/hugo/hugo_extended:latest
  before_script:
    - hugo version
    
  script:
    - git config --global core.quotePath false
    - git config --global core.autocrlf false
    - git config --global core.safecrlf true
    - git config --global core.ignorecase false
    - rm -rf public
    - hugo mod clean
    - hugo  --gc --minify


index_upload:
  stage: deploy
  image: node:latest
  before_script:
    - node -v
    - npm -v
    - npm i
  script:
    - npm run algolia

hugo_deploy:
  stage: deploy
  image: sdvcrx/hugo-firebase
  before_script:
    - firebase --version
  script:
    - firebase deploy --token "$FIREBASE_TOKEN"

将项目上传到 gitlab 上。打开项目设置，找到 CI/CD 目录。在Key的位置填入 FIREBASE_TOKEN ，在 Valeu 中填入我们刚刚记下的 Token，并保存。

当这些完成后，选择 CI/CD 目录，点击 Run Pipeline 进行重新运行。

等待运行完成之后，项目就会自动部署到 Firebase 了。

从此以后，我们只需要负责写文章就好，编译，部署都提交到 gitlab 服务器上进行。

总结

基本的 Hugo 如何建立一个网站，如何部署的教程已经完成。不同的主题设置不同，比如评论，阅读统计等，这些可以参考你选择的主题中的说明进行。

祝你也可以有一个自己的博客。

Kotlin 不仅仅是能写Android，而且可以写服务端，可以说只要可以写Java的地方，就可以用Kotlin来进行替换。当然Kotlin远不止这些。目前Kotlin可以做到以下平台的开发和使用。jvm,android,js和native(beta)。正因为可以开发 Native ，所以Kotlin现在对 ios 开发也是支持的，虽然看起来效果不是那么的好。

今天进行的 Kotlin 进行 react 开发，这只是对 KotlinJs 的一次尝试和使用。

环境

• 浏览器：Microsoft Edge 77.0.235.5 (官方内部版本) dev(64 位)

• Kotlin: 1.3.12

安装环境

很早以前，kotlin 官网就出现了两个库，这两个库基本就是来完善 react 在 kotlin 中的生态，第一个是 JetBrains/create-react-kotlin-app ，一个生成 React 工程的脚手架；第二个是JetBrains/kotlin-wrappers ，该库里存放了 react 周边生态组件，比如说 router，redux 等等。

按照脚手架文档，一行代码便能生成我们的项目。

npx create-react-kotlin-app my-app

在项目生成后，打开项目，使用 npm start 或者 yarn start 启动项目。

项目会自动打开浏览器，然后看到我们的项目，说明我们的项目便启动了。

我们可以看看官方提供的 wrappers 库里有什么，好像什么都有就是缺少一个成熟的 UI 组件库。难道说所有的样式都要我们自己写？

当然不是。

kotlinjs 是可以调用到 nodejs 模块的，只不过啊，有点烦。

安装 ant

ant 是 阿里前端 开发的一套 UI 组件，其中有着 React 版本。首先要安装该库。

通过 yarn add antd 进行安装,等待安装完成。

安装结束后，我们将 ant的演示引入到我们的项目中，打开 index.css 引入项目。

@import '~antd/dist/antd.css';

我们尝试的引入一个 Button 看看。

然后我们看到页面上，还是原来的button ，和 ant 的风格没有半毛钱关系。说明我们还是没有讲ant的组件使用到我们的项目中去。

绑定 UI 控件

新建立一个包 ui/ant 来存放我们与 ant 组件的绑定类。

如何编写我们的绑定类？这是我遇到的第一个难题。

首先要找到我们的 node_modules中的antd目录，找到我们要绑定的控件目录。

我们用 @file:JsModule("antd/lib/button") 来表明绑定目录。通过 @JsName("default") 来进行绑定，此时需要该控件是以 export default Button;

@file:JsModule("antd/lib/button")

package ui.ant

import react.RClass
import react.RProps

@JsName("default")
external val button: RClass<RProps>

在我们的 Main.kt 中重新引入我们刚刚写的 button。此时的 button 不同于 react.dom.button ,我们所声明的 button 无法直接设置任何属性，方法等。当然我们会给他设置的。

package app

import react.RBuilder
import react.RComponent
import react.RProps
import react.RState
import react.dom.div

class App : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div {
            ui.ant.button {
                +"Button"
            }
        }
    }
}

fun RBuilder.app() = child(App::class) {}

等待自动编译和刷新完成，查看我们的页面。

终于见到了我们的按钮了，而且样式和 Ant 官方文档上所示一致。

说明我们的绑定现在已经成功。

然后如法炮制，把其他的要使用控件进行同样的绑定。

我们 input 和 search 进行绑定。

此次绑定与上次有所改变，我们对这两个属性可以设置一些值，以便我们在 HTML DSL 中直接使用。这里我们通过实现 RProps 来重新定制了我们要使用的属性,对 Input 设置了一个 placeholder,而 SeacherRPorps 可以直接继承 InputRProps 来进行属性上的扩展。

@file:JsModule("antd/lib/input/Input")

package ui.antd

import react.*

external interface InputRProps:RProps {
    var placeholder:String
}

@JsName("default")
external val input: RClass<InputProps>

对 search 控件进行绑定

@file:JsModule("antd/lib/input/Search")
 
package ui.antd

import org.w3c.dom.events.Event

import react.*

external interface SearchProps : InputRProps {
    var onChange: (Event) -> Unit
    var value: String
}

@JsName("default")
external val search: RClass<SearchProps>

新建独立控件

我们重新独立出来一个组件，叫做 Home.kt 。将我们的 Button 存放进去，然后在 App.kt 上 使用 Home.kt。

package home

import react.RBuilder
import react.RComponent
import react.RProps
import react.RState
import react.dom.div
import ui.ant.button

class Home : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        div{
           button{
               +"Button"
           }
        }
    }
}

fun RBuilder.home() = child(Home::class) {}

等待页面刷新完毕，仍旧是原来的样子。

添加点击事件

因为我们的按钮中没有声明点击事件，所以无法直接调用，但是 kotlinjs 可以动态属性调用，通过 asDynamic 便可以调用我们想要使用的任何 html 中存在的属性。

 button {
	+"Button"
	attrs {
		asDynamic().onClick = {
			console.log("on click")
		}
	}
}

此时就完成了按钮的点击事件，当我们在页面中点击时，可以看到浏览器控制台上的信息进行打印。

进行双向绑定

对我们要使用的数据存放在 RState 中，我们重写来写 RState。 state 和 props 是 react 中两个重要的属性，state 是用来进行内部数据的修改更新，而 props 是可以将外部数据进行传入。

自定义 HomeState 来继承 RState，来进行对内部数据的修改。

interface HomeState : RState {
    var inputValue: Int
}

将我们 Home 中的 RState 类型改为 HomeState

class Home : RComponent<RProps, HomeState>()

这样便可以在下方使用 state 中的数据。

用一个 div 来写我们的数据。

div {
	+"${state.inputValue}"
}

对 button 中的点击事件进行微小的修改，在 react 中对数据进行修改都需要调用 setState 。

button {
	+"Button"
	attrs.asDynamic().onClick ={
		setState {
			inputValue += 1
		}
	}
}

然而，页面刷新后却是一个报错。TypeError: Cannot read property ’toString’ of undefined 无法读取 undefinded 的 toString 方法。

原来，单在 HomeState 中声明是不够的，还需要在 HomeState.init() 的重写方法中进行初始值的赋值。

重新等待页面刷新，出现了我们预想的结果。每次点击按钮就会数字就会进行累加。

配合 Axios

axios 是前端中常用的一个 http 请求框架，kotlin 官方已经对它进行了一次简单的封装。我们这里直接就可以使用。

首先仍旧是先安装 axios

yarn add axios

安装完成后新建一个文件夹axios，再新建Axios.js。

package axios

import kotlin.js.Promise

@JsModule("axios")
external fun <T> axios(config: AxiosConfigSettings): Promise<AxiosResponse<T>>

// Type definition
external interface AxiosConfigSettings {
    var url: String
    var method: String
    var baseUrl: String
    var timeout: Number
    var data: dynamic
    var transferRequest: dynamic
    var transferResponse: dynamic
    var headers: dynamic
    var params: dynamic
    var withCredentials: Boolean
    var adapter: dynamic
    var auth: dynamic
    var responseType: String
    var xsrfCookieName: String
    var xsrfHeaderName: String
    var onUploadProgress: dynamic
    var onDownloadProgress: dynamic
    var maxContentLength: Number
    var validateStatus: (Number) -> Boolean
    var maxRedirects: Number
    var httpAgent: dynamic
    var httpsAgent: dynamic
    var proxy: dynamic
    var cancelToken: dynamic
}

external interface AxiosResponse<T> {
    val data: T
    val status: Number
    val statusText: String
    val headers: dynamic
    val config: AxiosConfigSettings
}

我们做一个简单的应用，通过输入名字，到 Github 上寻找相关的仓库。

首先定义我们的数据类，来存放我们请求获取到的数据。

data class Result(
        val total_count: Int,
        val items: Array<Item>
)

data class Item(val id: Long,
                val node_id: String,
                val name: String,
                val full_name: String,
                val html_url: String)

然后在 HomeState 中声明所使用的类。

interface HomeState : RState {
    var inputValue: String
    var repos: Array<Item>
}

下面是界面定义的代码

div(classes = "search-input") {
    search {
        attrs {
            onChange = {
                val element = it.target as HTMLInputElement
                setState {
                    inputValue = element.value
                }
            }
            placeholder = "请输入 Github 仓库名称"
        }
    }
}

button {
    +"搜索"
    attrs {
        asDynamic().onClick = {

        }
    }
}

div(classes = "list") {
    if (state.repos.isNotEmpty()) {
        ul {
            for ((index, item) in state.repos.withIndex()) {
                li {
                    a(href = item.html_url) {
                        +"${index + 1} / ${item.full_name}"
                    }
                }
            }
        }
    }
}

不过当我们此时预览界面的时候，发现又又又错了，提示 repos 无法进行迭代。

明明是数组为什么无法迭代呢？原来是在 Home 组件创建的时候，还没有对 repos 进行初始化。这里需要了解 react 的生命周期，在组件建立前，对数据进行初始化。

    override fun componentWillMount() {
        setState {
            repos = emptyArray()
        }
    }

此时页面可以正常展示了。

完善 button 的点击事件。

 button {
    +"搜索"
    attrs {
        asDynamic().onClick = {
            //https://api.github.com/search/repositories?q=
            val config: AxiosConfigSettings = jsObject {
                url = "https://api.github.com/search/repositories?q=${state.inputValue}"
            }
            axios.axios<Result>(config).then { response ->
                setState {
                    repos = response.data.items
                }
            }.catch { error ->
                console.log("error", error)
            }
        }
    }
}

此时便完成了项目。

总结

首先声明 作者并非专业前端，所以文章中有错误还望指正；本文更重要的目的是为了表明 kotlin 在其他领域的使用和使用体验。

kotlin 写 react,在书写习惯上应该和 ts 写是差不多的，而且给后端同学带来了写前端的体验。但是生态不完整，就一个 UI 组件库没有一个官方用 kt 写的，而且编译速度慢，报错有时不明显，可查阅资料少。不过要说硬着头皮开发，个人感觉是完全可以的，不过估计要自己造不少轮子。

Flutter Web 开发

最近 Google I/O 大会宣布了 flutter 支持 web 开发。 下面我们就一同领略 flutter web。

flutter 目前的目的就是全平台开发。目前已经支持了 Android,ios ,windows, macOS,linux 以及 web 。

关于 flutter 的了解请移步官网 flutter官网

准备工作

• 请了解 dart 和 Flutter 基本知识

• 下载和安装好 dart 和 flutter sdk ，并且配置好相关环境

• 安装 IDEA

更新 Dart 和 Flutter

在 Google I/O 大会上，Google 发布了 flutter 1.5 版本，要想使用 flutter_web ,就需要更新 dart 和 flutter

更新 Dart

在 windows 中 找到你的 dart update ,运行更新 （最好科学上网）

更新 flutter

flutter 更新比较简单，在控制台中运行 flutter upgrade

dart 和 flutter 更新完成后，通过命令 flutter --version 查看当前环境

安装 Dart 和 flutter 插件

我们要给 IDEA 安装 dart 和 flutter 插件。安装完成后就可以开始我们的 flutter web之旅了。

新建一个 Flutter Web 项目

安装完成Dart 和 flutter 环境后，重启 IDEA后就可以快速的搭建一个 Flutter web 项目。

选择 新建 Dart项目，创建一个 Flutter Web App。

项目创建好，要等待 依赖包的下载。

一边让IDEA下载，我们一边去做另一件事情

安装 webdev 工具

我们需要官方提供的 webdev 工具来为我们编译。打开 flutter_web Github 网站 Github 在 Getting Started 中找到 Install the flutter_web build tools ，详细说明了如何安装 webdev 工具，其实也就是一行命令的事情。

运行下面的命令。

$ flutter packages pub global activate webdev

安装完成后，我们要找到 flutter 的安装目录，在目录的 .pub-cache/bin 中会找到我们下载的 webdev

确保安装成功 webdev 后 ，将路径 $HOME/.pub-cache/bin 添加到环境变量中。

设置完成后在终端输入 webdev 看看是否成功

坑：在一些终端上运行该命令会提示该命令不存在，比如 cmd,Fluent。

配置成功后就可以开始下一步了。

运行项目

首先确保 IDEA 将所需要的依赖正常安装完成。

在终端输入 webdev serve,当编译完成后，打开 http://localhost:8080, 如图，显示出 hello world

项目结构

项目已经运行，简单的看一下项目主要结构

helloFlutterWeb
|
|--.dart_tool
|--lib
|	|--main.dart
|	
|--web
|	|--index.html
|	|--main.dart

.dart_tool 是项目打包运行编译生成的文件

lib 是我们主要要写的项目代码和原有的 Flutter 基本一致

web 包含一个 html 文件和一个 main.dart

index.html 引用了 web/main.dart 编译生成的 js 文件

<head>
  <meta charset="UTF-8">
  <title>hello flutter</title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>

而 web/main.dart 调用了 lib/main.dart,我们写代码基本就可以修改lib目录下的代码进行运行。

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

与 Flutter 的不同

默认包名不同，

加载的默认UI包名不同，原flutter 的包为 import 'package:flutter/material.dart' 而 web 项目为 import 'package:flutter_web/material.dart' 多了一个 _web。

图标显示问题

在 web 项目上的图标无法显示。

 appBar: AppBar(
        leading: Icon(Icons.ac_unit),
        title: Text(title),
      )

项目不报错，IDEA的侧边栏也显示该图标，但是在页面上却无法显示

其他

简单的体验后，基本可以用flutter开发页面，目前来说还是有一些问题的，比如说上述的图标加载问题，而且如果将移动端的代码复制过来，除了包名要有修改外，很多第三方包还是对 web 不支持。编译速度也没有移动端那样快，相较于传统的web开发，编译速度也是一个问题。

简单的将原有的一个APP进行了一下迁移,基本涉及到具体的业务方法的地方都要重写。