vugu,golang面向WebAssembly的WebUI库

Vugu是一个用Go编写的面向WebAssembly的Web UI实验库
开源:github.com/vugu/vugu
官网在这里:https://www.vugu.org/
文档在这里:https://www.vugu.org/doc
也可以即时运行 https://play.vugu.org

root.vugu 这是主要的文件,Web呈现。

    <div class="my-first-vugu-comp">
        <button @click="data.Toggle()">Test</button>
        <div vg-if="data.Show">I am here!</div>
    </div>
     
    <style>
        .my-first-vugu-comp { background: #eee; }
    </style>
     
    <script type="application/x-go">
        type RootData struct { Show bool }
        func (data *RootData) Toggle() { data.Show = !data.Show }
    </script>

devserver.go 这是运行文件,名字随意,注意第一行。

    // +build ignore
     
    package main
     
    import (
    	"log"
    	"net/http"
    	"os"
     
    	"github.com/vugu/vugu/simplehttp"
    )
     
    func main() {
    	wd, _ := os.Getwd()
    	l := "127.0.0.1:8844"
    	log.Printf("Starting HTTP Server at %q", l)
    	h := simplehttp.New(wd, true)
    	// include a CSS file
    	// simplehttp.DefaultStaticData["CSSFiles"] = []string{ "/my/file.css" }
    	log.Fatal(http.ListenAndServe(l, h))
    }

运行后,可以通过浏览器http://127.0.0.1:8844看到效果。

  1. root.vugu只支持一个顶级div,当然你可以嵌套
  2. root.vugu中的script不再支持javascript,只允许application/x-go,使用golang代码
  3. 像模板一样,vugu可以使用一些关键词,完成判断,循环,事件,动态,模块化等功能。

服务器部份还是主要看看引用的github.com/vugu/vugu/simplehttp/simple-handler.go文件,这里包括了页面的默认定义等等。

相关文章