凹语言开发 WebAssembly 应用 3 分钟入门

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 51 天前的主题，其中的信息可能已经有所发展或是发生改变。

凹语言是国内首个面向 WebAssembly 设计通用编程语言，也是目前被 CNCF 基金会 wasm 全景图收录的的唯一一个来自中国的开源编程语言项目。凹语言项目诞生时的一个愿景就是简化 WebAssembly 网页应用的开发。这里我们将展示如何快速开启一个 WebAssembly 应用。

1. 安装凹语言命令行

凹语言采用 Go 语言实现，目前可以通过以下 Go 命令安装最新的凹语言命令行：

$ go install wa-lang.org/wa@master

安装完成后输出wa命令查看帮助信息。

2. 初始化凹语言工程

通过wa init命令初始化一个名为hello的工程。

3. 编译并执行凹语言程序

在hello目录对应的命令行环境通过wa run命令编译并执行：

$ wa run
listen at http://localhost:8000
...

该命令在编译得到 wasm 文件后，会在 output 命令启动一个 web 服务。然后通过以上网址可以访问index.html页面。效果如下：

在开发者控制台窗口输出了“你好，凹语言！”和5050结果。

4. 定制 html 页面

打开网页看到的是1+2+3+...+100 = 5050，这是在output/index.html网页调用Sum函数计算的结果。index.html文件如下：

<!DOCTYPE html>
<html lang="en">
<body>
  <pre id="output"></pre>
  <script type="text/javascript" src="./hello.js"></script>

  <script>
    let app = new WaApp();
    app.init().then((result) => {
      app.main();
      document.getElementById('output').innerText = `1+2+3+...+100 = ${app.Sum(100)}`;
    })
  </script>
</body>
</html>

首先是通过hello.js胶水代码初始化wasm模块，得到了WaApp对象。然后通过app.init()执行凹语言的init初始化代码，然后通过app.main()执行main函数代码。app.Sum对应的是导出的Sum函数，然后将计算结果更新到页面的output区域。