<div class="coupon"></div>

.coupon { 
 position: relative; 
 width: 400px; 
 height: 160px; 
 margin: 50px auto; 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 }

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 8px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 ... 
 }

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 background-size: 200px 18px; 
 background-repeat-x: no-repeat; 
 ... 
 }

.coupon { 
 ... 
 background-image: 
 radial-gradient( 
 circle at 1px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px), 
 radial-gradient( 
 circle at 199px 8px, 
 transparent 6px, 
 #ff9e6d 6px, 
 #ff9e6d 0px); 
 background-size: 200px 18px; 
 background-position: 0 0, 200px 0; 
 background-repeat-x: no-repeat; 
}

<div class="coupon">50元</div>

.coupon { 
 ... 
 font-size: 60px; 
 color: #fff; 
 font-weight: bold; 
 line-height: 160px; 
 padding-left: 60px; 
 box-sizing: border-box; 
 cursor: pointer; 
} 
.coupon::before { 
 position: absolute; 
 content: ""; 
 left: 240px; 
 top: 0; 
 bottom: 0; 
 width: 0; 
 border-left: 1px dashed #fff; 
} 
.coupon::after { 
 position: absolute; 
 content: "立即領取"; 
 font-size: 26px; 
 width: 70px; 
 top: 50%; 
 right: 2%; 
 transform: translate(-50%, -50%); 
 line-height: 40px; 
 letter-spacing: 5px; 
}

下文章來源于GoUpUp ，作者dj

簡介

go-app是一個使用 Go + WebAssembly 技術編寫漸進式 Web 應用的庫。WebAssembly 是一種可以運行在現代瀏覽器中的新式代碼。近兩年來，WebAssembly 技術取得了較大的發展。我們現在已經可以使用 C/C++/Rust/Go 等高級語言編寫 WebAssembly 代碼。本來就來介紹go-app這個可以方便地使用 Go 語言來編寫 WebAssembly 代碼的庫。

快速使用

go-app對 Go 語言版本有較高的要求（Go 1.14+），而且必須使用Go module。先創建一個目錄并初始化Go Module（Win10 + Git Bash）：

$ mkdir go-app && cd go-app
$ go mod init

然后下載安裝go-app包：

$ go get -u -v github.com/maxence-charriere/go-app/v6

至于Go module的詳細使用，去看煎魚大佬的Go Modules 終極入門。

首先，我們要編寫 WebAssembly 程序：

package main

import "github.com/maxence-charriere/go-app/v6/pkg/app"

type Greeting struct {
  app.Compo
  name string
}

func (g *Greeting) Render() app.UI {
  return app.Div().Body(
    app.Main().Body(
      app.H1().Body(
        app.Text("Hello, "),
        app.If(g.name != "",
          app.Text(g.name),
        ).Else(
          app.Text("World"),
        ),
      ),
    ),
    app.Input().
      Value(g.name).
      Placeholder("What is your name?").
      AutoFocus(true).
      OnChange(g.OnInputChange),
  )
}

func (g *Greeting) OnInputChange(src app.Value, e app.Event) {
  g.name = src.Get("value").String()
  g.Update()
}

func main() {
  app.Route("/", &Greeting{})
  app.Run()
}

在go-app中使用組件來劃分功能模塊，每個組件結構中必須內嵌app.Compo。組件要實現Render()方法，在需要顯示該組件時會調用此方法返回顯示的頁面。go-app使用聲明式語法，完全使用 Go 就可以編寫 HTML 頁面，上面繪制 HTML 的部分比較好理解。上面代碼中還實現了一個輸入框的功能，并為它添加了一個監聽器。每當輸入框內容有修改，OnInputChange方法就會調用，g.Update()會使該組件重新渲染顯示。

最后將該組件掛載到路徑/上。

編寫 WebAssembly 程序之后，需要使用交叉編譯的方式將它編譯為.wasm文件：

$ GOARCH=wasm GOOS=js go build -o app.wasm

如果編譯出現錯誤，使用go version命令檢查 Go 是否是 1.14 或更新的版本。

接下來，我們需要編寫一個 Go Web 程序使用這個app.wasm：

package main

import (
  "log"
  "net/http"

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

func main() {
  h := &app.Handler{
    Title:  "Go-App",
    Author: "dj",
  }

  if err := http.ListenAndServe(":8080", h); err != nil {
    log.Fatal(err)
  }
}

go-app提供了一個app.Handler結構，它會自動查找同目錄下的app.wasm（這也是為什么將目標文件設置為app.wasm的原因）。然后我們將前面編譯生成的app.wasm放到同一目錄下，執行該程序：

$ go run main.go

默認顯示"Hello World"：

在輸入框中輸入內容之后，顯示會隨之變化：

可以看到，go-app為我們設置了一些基本的樣式，網頁圖標等。

簡單原理

GitHub 上這張圖很好地說明了 HTTP 請求的執行流程：

用戶請求先到app.Handler層，它會去app.wasm中執行相關的路由邏輯、去磁盤上查找靜態文件。響應經由app.Handler中轉返回給用戶。用戶就看到了app.wasm渲染的頁面。實際上，在本文中我們只需要編寫一個 Go Web 程序，每次編寫新的 WebAssembly 之后，將新編譯生成的 app.wasm 文件拷貝到 Go Web 目錄下重新運行程序即可。注意，如果頁面未能及時刷新，可能是緩存導致的，可嘗試清理瀏覽器緩存。

組件

自定義一個組件很簡單，只需要將app.Compo內嵌到結構中即可。實現Render()方法可定義組件的外觀，實際上app.Compo有一個默認的外觀，我們可以這樣來查看：

func main() {
  app.Route("/app", &app.Compo{})
  app.Run()
}

編譯生成app.wasm之后，一開始的 Go Web 程序不需要修改，直接運行，打開瀏覽器查看：

事件處理

在快速開始中，我們還介紹了如何使用事件。使用聲明式語法app.Input().OnChange(handler)即可監聽內容變化。事件處理函數必須為func (src app.Value, e app.Event)類型，app.Value是觸發對象，app.Event是事件的內容。通過app.Value我們可以得到輸入框內容、選擇框的選項等信息，通過app.Event可以得到事件的信息，是鼠標事件、鍵盤事件還是其它事件：

type ShowSelect struct {
  app.Compo
  option string
}

func (s *ShowSelect) Render() app.UI {
  return app.Div().Body(
    app.Main().Body(
      app.H1().Body(
        app.If(s.option == "",
          app.Text("Please select!"),
        ).Else(
          app.Text("You've selected "+s.option),
        ),
      ),
    ),
    app.Select().Body(
      app.Option().Body(
        app.Text("apple"),
      ),
      app.Option().Body(
        app.Text("orange"),
      ),
      app.Option().Body(
        app.Text("banana"),
      ),
    ).
      OnChange(s.OnSelectChange),
  )
}

func (s *ShowSelect) OnSelectChange(src app.Value, e app.Event) {
  s.option = src.Get("value").String()
  s.Update()
}

func main() {
  app.Route("/", &ShowSelect{})
  app.Run()
}

上面代碼顯示一個選擇框，當選項改變時上面顯示的文字會做相應的改變。初始時：

選擇后：

嵌套組件

組件可以嵌套使用，即在一個組件中使用另一個組件。渲染時將內部的組件表現為外部組件的一部分：

type Greeting struct {
  app.Compo
}

func (g *Greeting) Render() app.UI {
  return app.P().Body(
    app.Text("Hello, "),
    &Name{name: "dj"},
  )
}

type Name struct {
  app.Compo
  name string
}

func (n *Name) Render() app.UI {
  return app.Text(n.name)
}

func main() {
  app.Route("/", &Greeting{})
  app.Run()
}

上面代碼在組件Greeting中內嵌了一個Name組件，運行顯示：

生命周期

go-app提供了組件的 3 個生命周期的鉤子函數：

• OnMount：當組件插入到 DOM 時調用；
• OnNav：當一個組件所在頁面被加載、刷新時調用；
• OnDismount：當一個組件從頁面中移除時調用。

例如：

type Foo struct {
  app.Compo
}

func (*Foo) Render() app.UI {
  return app.P().Body(
    app.Text("Hello World"),
  )
}

func (*Foo) OnMount() {
  fmt.Println("component mounted")
}

func (*Foo) OnNav(u *url.URL) {
  fmt.Println("component navigated:", u)
}

func (*Foo) OnDismount() {
  fmt.Println("component dismounted")
}

func main() {
  app.Route("/", &Foo{})
  app.Run()
}

編譯運行，在瀏覽器中打開頁面，打開瀏覽器控制臺觀察輸出：

component mounted
component navigated: http://localhost:8080/

編寫 HTML

在前面的例子中我們已經看到了如何使用聲明式語法編寫 HTML 頁面。go-app為所有標準的 HTML 元素都提供了相關的類型。創建這些對象的方法名也比較好記，就是元素名的首字母大寫。如app.Div()創建一個div元素，app.P()創建一個p元素，app.H1()創建一個h1元素等等。在go-app中，這些結構都是暴露出對應的接口供開發者使用的，如div對應HTMLDiv接口：

type HTMLDiv interface {
  Body(nodes ...Node) HTMLDiv
  Class(v string) HTMLDiv
  ID(v string) HTMLDiv
  Style(k, v string) HTMLDiv

  OnClick(h EventHandler) HTMLDiv
  OnKeyPress(h EventHandler) HTMLDiv
  OnMouseOver(h EventHandler) HTMLDiv
}

可以看到每個方法都返回該HTMLDiv自身，所以支持鏈式調用。調用這些方法可以設置元素的各方面屬性：

• Class：添加 CSS Class；
• ID：設置 ID 屬性；
• Style：設置內置樣式；
• Body：設置元素內容，可以隨意嵌套。div中包含h1和p，p中包含img等；

和設置事件監聽：

• OnClick：點擊事件；
• OnKeyPress：按鍵事件；
• OnMouseOver：鼠標移過事件。

例如下面代碼：

app.Div().Body(
  app.H1().Body(
    app.Text("Title"),
  ),
  app.P().ID("id").
    Class("content").Body(
      app.Text("something interesting"),
    ),
)

相當于 HTML 代碼：

<div>
  <h1>title</h1>
  <p id="id" class="content">
    something interesting
  </p>
</div>

原生元素

我們可以在app.Raw()中直接寫 HTML 代碼，app.Raw()會生成對應的app.UI返回：

svg := app.Raw(`
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
`)

但是這種寫法是不安全的，因為沒有檢查 HTML 的結構。

條件

我們在最開始的例子中就已經用到了條件語句，條件語句對應 3 個方法：If()/ElseIf()/Else()。

If和ElseIf接收兩個參數，第一個參數為bool值。如果為true，則顯示第二個參數（類型為app.UI），否則不顯示。

Else必須在If或ElseIf后使用，如果前面的條件都不滿足，則顯示傳入Else方法的app.UI：

type ScoreUI struct {
  app.Compo
  score int
}

func (c *ScoreUI) Render() app.UI {
  return app.Div().Body(
    app.If(c.score >= 90,
      app.H1().
        Style("color", "green").
        Body(
          app.Text("Good!"),
        ),
    ).ElseIf(c.score >= 60,
      app.H1().
        Style("color", "orange").
        Body(
          app.Text("Pass!"),
        ),
    ).Else(
      app.H1().
        Style("color", "red").
        Body(
          app.Text("fail!"),
        ),
    ),
    app.Input().
      Value(c.score).
      Placeholder("Input your score?").
      AutoFocus(true).
      OnChange(c.OnInputChange),
  )
}

func (c *ScoreUI) OnInputChange(src app.Value, e app.Event) {
  score, _ := strconv.ParseUint(src.Get("value").String(), 10, 32)
  c.score = int(score)
  c.Update()
}

func main() {
  app.Route("/", &ScoreUI{})
  app.Run()
}

上面我們根據輸入的分數顯示對應的文字，90及以上顯示綠色的Good!，60-90之間顯示橙色的Pass!，小于60顯示紅色的Fail!。下面是運行結果：

Range

假設我們要編寫一個 HTML 列表，當前有一個字符串的切片。如果一個個寫就太繁瑣了，而且不夠靈活，且容易出錯。這時就可以使用Range()方法了：

type RangeUI struct {
  app.Compo
  name string
}

func (*RangeUI) Render() app.UI {
  langs := []string{"Go", "JavaScript", "Python", "C"}
  return app.Ul().Body(
    app.Range(langs).Slice(func(i int) app.UI {
      return app.Li().Body(
        app.Text(langs[i]),
      )
    }),
  )
}

func main() {
  app.Route("/", &RangeUI{})
  app.Run()
}

Range()可以對切片或map中每一項生成一個app.UI，然后平鋪在某個元素的Body()方法中。

運行結果：

上下文菜單

在go-app中，我們可以很方便的自定義右鍵彈出的菜單，并且為菜單項編寫響應：

type ContextMenuUI struct {
  app.Compo
  name string
}

func (c *ContextMenuUI) Render() app.UI {
  return app.Div().Body(
    app.Text("Hello, World"),
  ).OnContextMenu(c.OnContextMenu)
}

func (*ContextMenuUI) OnContextMenu(src app.Value, event app.Event) {
  event.PreventDefault()

  app.NewContextMenu(
    app.MenuItem().
      Label("item 1").
      OnClick(func(src app.Value, e app.Event) {
        fmt.Println("item 1 clicked")
      }),
    app.MenuItem().Separator(),
    app.MenuItem().
      Label("item 2").
      OnClick(func(src app.Value, e app.Event) {
        fmt.Println("item 2 clicked")
      }),
  )
}

func main() {
  app.Route("/", &ContextMenuUI{})
  app.Run()
}

我們在OnContextMenu中調用了event.PreventDefault()阻止默認菜單的彈出。看運行結果：

點擊菜單項，觀察控制臺輸出~

app.Handler

上面我們都是使用go-app內置的app.Handler處理客戶端的請求。我們只設置了簡單的兩個屬性Author和Title。app.Handler還有其它很多字段可以定制：

type Handler struct {
  Author string
  BackgroundColor string
  CacheableResources []string
  Description string
  Env Environment
  Icon Icon
  Keywords []string
  LoadingLabel string
  Name string
  RawHeaders []string
  RootDir string
  Scripts []string
  ShortName string
  Styles []string
  ThemeColor string
  Title string

  UseMinimalDefaultStyles bool
  Version string
}

• Icon：設置應用圖標；
• Styles：CSS 樣式文件；
• Scripts：JS 腳本文件。

CSS 和 JS 文件必須在app.Handler中聲明。下面是一個示例app.Handler：

h := &app.Handler{
  Name:        "Luck",
  Author:      "Maxence Charriere",
  Description: "Lottery numbers generator.",
  Icon: app.Icon{
    Default: "/web/icon.png",
  },
  Keywords: []string{
    "EuroMillions",
    "MEGA Millions",
    "Powerball",
  },
  ThemeColor:      "#000000",
  BackgroundColor: "#000000",
  Styles: []string{
    "/web/luck.css",
  },
  Version: "wIKiverSiON",
}

本文代碼

本文中 WebAssembly 代碼都在各自的目錄中。Go Web 演示代碼在 web 目錄中。先進入某個目錄，使用下面的命令編譯：

$ GOARCH=wasm GOOS=js go build -o app.wasm

然后將生成的app.wasm拷貝到web目錄：

$ cp app.wasm ../web/

切換到 web 目錄，啟動服務器：

$ cd ../web/
$ go run main.go

總結

本文介紹如何使用go-app編寫基于 WebAssembly 的 Web 應用程序。可能有人會覺得，go-app編寫 HTML 的方式有點繁瑣。但是我們可以寫一個轉換程序將普通的 HTML 代碼轉為go-app代碼，感興趣可以自己實現一下。WebAssembly 技術非常值得關注一波~

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test background</title>
 <style type="text/css">
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 }
 .bg1{background:cyan url(bg.jpg);}
 .bg2{background:cyan url(bg.jpg) repeat-x;}
 .bg3{background:cyan url(bg.jpg) repeat-y;}
 .bg4{background:cyan url(bg.jpg) no-repeat;}
 .bg5{background:cyan url(bg.jpg) no-repeat left center;}
 .bg6{background:cyan url(bg.jpg) no-repeat right center;}
 </style>
</head>
<body>
 <div class="backshow bg1"></div>
 <div class="backshow bg2"></div>
 <div class="backshow bg3"></div>
 <div class="backshow bg4"></div>
 <div class="backshow bg5"></div>
 <div class="backshow bg6"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test background</title>
 <style type="text/css">
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 } 
 .bg{width:94px;
 height:94px;
 border:3px solid #666;
 background:url(location_bg.jpg) -110px -150px;
 }
 </style>
</head>
<body>
 <div class="bg"></div>
</body>
</html>