使用Go-App开发Wasm的PWA应用

官网说明：Go-app是一个使用Go+WebAssembly(Wasm)技术构建的渐进式web应用程序(PWA)的软件包；
通过声明性语法，仅使用Go语言创建和组合HTML元素来创建UI界面；
使用Go标准HTTP模型，对SEO友好的，可安装的，支持离线模式。

当前go-app为v9版本，需要安装Go版本1.18+。

本文写了个登录后进入首页的测试go-app的功能

1、创建项目

# 创建项目
go mod init hello
cd hello
# 安装依赖
go get -u github.com/maxence-charriere/go-app/v9/pkg/app

main.go

package main

import (
	"fmt"
	"github.com/maxence-charriere/go-app/v9/pkg/app"
	"log"
	"net/http"
)

type Home struct {
	app.Compo
}

func (home *Home) Render() app.UI {
	return app.H1().Class("grid").Text("登录成功，进入首页！")
}

type Login struct {
	app.Compo
	isLogin  bool
	name     string
	password string
}

func (login *Login) OnMount(ctx app.Context) {
	fmt.Println("OnMount")
	ctx.SessionStorage().Get("isLogin", &login.isLogin)
}

func (login *Login) Render() app.UI {
	if login.isLogin == true {
		home := Home{}
		return home.Render()
	} else {
		return app.Section().Class("section").Body(
			app.Div().Class("grid").Body(
				app.Div().Styles(map[string]string{"height": "300px"}),
				app.Div().Body(
					app.Span().Text("用户名:"),
					app.Input().OnChange(login.ValueTo(&login.name)),
				),
				app.Div().Body(
					app.Span().Text("密 码:"),
					app.Input().OnChange(login.ValueTo(&login.password)),
				),
				app.Div().Body(
					app.Button().Text("提交").OnClick(login.onSubmit),
				),
			),
		)
	}
}

func (login *Login) onSubmit(ctx app.Context, e app.Event) {
	e.PreventDefault()
	if login.name == "test" && login.password == "123456" {
		login.isLogin = true
		ctx.SessionStorage().Set("isLogin", login.isLogin)
	}
}

func main() {
	app.Route("/", &Login{})
	app.Route("/home", &Home{})

	app.RunWhenOnBrowser()

	http.Handle("/", &app.Handler{
		Name:        "Hello",
		Styles:      []string{"/web/styles.css"},
		Description: "An Hello World! example",
	})
	if err := http.ListenAndServe(":8000", nil); err != nil {
		log.Fatal(err)
	}
}

styles.css

.section{
    justify-content:center;
    display:flex;
    align-items:center;
}

.top{
    height:300px;
}

文件结构：

2、编译为.wasm文件

GOARCH=wasm GOOS=js go build -o web/app.wasm

3、构建服务

go build

构建后的文件结构
生了web/app.wasm文件
生成hello服务器端应用，./hello文件运行时，会自动加载app.wasm文件

4、运行

./hello

运行效果
访问登录页

登录页对应在HTML源码

输入帐号密码后显示的页面和HTML

官网：https://go-app.dev/
GitHub地址：https://github.com/maxence-charriere/go-app
API参考文档：https://go-app.dev/reference