第一章：Go-App 框架介绍与快速开始

1.1 什么是 Go-App？

Go-App 是一个革命性的 Go 语言包，用于构建渐进式 Web 应用（Progressive Web Apps, PWA）。它由法国开发者 Maxence Charriere 创建，核心理念是：

用纯 Go 代码编写前端应用，编译为 WebAssembly 在浏览器中运行。

核心特性

架构概览

┌─────────────────────────────────────────┐
│           用户浏览器                      │
│  ┌─────────────────────────────────┐    │
│  │   Go 应用 (WebAssembly)          │    │
│  │   - 组件渲染                     │    │
│  │   - 状态管理                     │    │
│  │   - 事件处理                     │    │
│  └─────────────────────────────────┘    │
│              │                          │
│  ┌───────────▼───────────┐              │
│  │   JavaScript 桥接层    │              │
│  │   (wasm_exec.js)      │              │
│  └───────────┬───────────┘              │
│              │                          │
│  ┌───────────▼───────────┐              │
│  │      DOM API          │              │
│  └───────────────────────┘              │
└─────────────────────────────────────────┘
                   │
                   │ HTTP/WebSocket
                   │
┌──────────────────▼──────────────────────┐
│           Go HTTP 服务器                 │
│    (app.Handler 提供静态资源服务)         │
└─────────────────────────────────────────┘

1.2 环境准备

系统要求

• Go 版本: 1.18 或更高（推荐 1.21+）
• 操作系统: Windows / macOS / Linux
• 浏览器: Chrome, Firefox, Safari, Edge（均支持 WebAssembly）

安装 Go-App

# 创建项目目录
mkdir my-go-app
cd my-go-app

# 初始化 Go 模块
go mod init my-go-app

# 安装 go-app (v10 是最新版本)
go get -u github.com/maxence-charriere/go-app/v10/pkg/app

1.3 Hello World 示例

第一步：创建组件

创建 main.go 文件：

package main

import (
	"log"
	"net/http"

	"github.com/maxence-charriere/go-app/v10/pkg/app"
)

// hello 是一个简单的组件
type hello struct {
	app.Compo           // 嵌入 Compo，获得组件基础能力
	name        string  // 组件状态
}

// Render 定义组件的 UI
func (h *hello) Render() app.UI {
	return app.Div().Body(
		app.H1().Body(
			app.Text("Hello, "),
			app.If(h.name != "", func() app.UI {
				return app.Text(h.name)
			}).Else(func() app.UI {
				return app.Text("World!")
			}),
		),
		app.P().Body(
			app.Input().
				Type("text").
				Value(h.name).
				Placeholder("What is your name?").
				AutoFocus(true).
				OnChange(h.ValueTo(&h.name)), // 双向绑定
			),
		),
	)
}

func main() {
	// 路由配置
	app.Route("/", func() app.Composer { return &hello{} })
	
	// 在浏览器中运行应用
	app.RunWhenOnBrowser()

	// HTTP 服务器配置
	http.Handle("/", &app.Handler{
		Name:        "Hello",
		Description: "An Hello World! example",
		Title:       "Hello App",
	})

	// 启动服务器
	if err := http.ListenAndServe(":8000", nil); err != nil {
		log.Fatal(err)
	}
}

第二步：编译为 WebAssembly

# 设置环境变量，编译为 WASM
GOARCH=wasm GOOS=js go build -o web/app.wasm

# 复制 wasm_exec.js（Go 提供的 JS 桥接文件）
cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" web/

第三步：创建 web 目录结构

my-go-app/
├── main.go           # 服务器和组件代码
├── go.mod            # Go 模块定义
├── go.sum            # 依赖校验
└── web/              # 静态资源目录
    ├── app.wasm      # 编译后的 WebAssembly
    └── wasm_exec.js  # Go 的 JS 桥接文件

第四步：运行应用

# 编译并运行服务器
go run .

# 或者先编译服务器，再运行
go build -o server
./server

打开浏览器访问 http://localhost:8000，你应该能看到：

• 一个标题 "Hello, World!"
• 一个输入框
• 在输入框中输入名字，标题会实时更新

1.4 代码解析

组件结构

type hello struct {
    app.Compo     // 必须嵌入 Compo
    name string   // 组件的状态字段
}

• app.Compo 提供组件的基础能力（生命周期、渲染等）
• name 是组件的本地状态，修改后会触发重新渲染

Render 方法

func (h *hello) Render() app.UI {
    return app.Div().Body(
        // 子元素...
    )
}

• Render() 返回组件的 UI 结构
• app.UI 是 UI 元素的接口类型
• 使用链式调用构建 DOM：.Body() 添加子元素

条件渲染

app.If(h.name != "", func() app.UI {
    return app.Text(h.name)
}).Else(func() app.UI {
    return app.Text("World!")
})

• app.If() 实现条件渲染
• .Else() 处理 else 分支

事件绑定

app.Input().
    OnChange(h.ValueTo(&h.name))

• OnChange 绑定 change 事件
• h.ValueTo(&h.name) 是便捷方法，自动将输入值绑定到字段

路由配置

app.Route("/", func() app.Composer { return &hello{} })

• 将路径 / 映射到 hello 组件
• 支持动态路由，如 /user/{id}

HTTP 处理器

http.Handle("/", &app.Handler{
    Name:        "Hello",
    Description: "An Hello World! example",
})

• app.Handler 实现了 http.Handler 接口
• 自动处理静态资源、PWA manifest 等

1.5 浏览器兼容性

Go-App 支持所有主流浏览器：

1.6 本章小结

在这一章中，我们：

1. ✅ 了解了 Go-App 的核心概念和特性
2. ✅ 搭建了开发环境
3. ✅ 创建了第一个 Hello World 应用
4. ✅ 学习了组件的基本结构

练习

1. 修改 Hello World 应用，添加一个按钮，点击后清空输入框
2. 添加第二个页面 /about，显示关于信息
3. 尝试在输入框中使用不同的占位符样式

下一章：声明式语法与组件系统

#教程 #Go #GoApp #PWA #WebAssembly #小凯