尝试写一个 Web Assembly - HelloWorld示例程序（C语言）

[gogoend]

参考链接

[WebAssembly入门]一，概念与环境搭建

[WebAssembly入门]二，Hello,World!

环境搭建

环境搭建在Ubuntu下。 首先，clone emsdk的仓库。 然后更新 emsdk 的版本。这里是从GitHub中进行clone的，因此从原仓库直接pull即可。 接下来安装最新版本的组件即可。 之后激活emsdk。 然后将相关命令加入环境变量中。 此时环境便已搭建完成。

使用emcc编译C语言代码

写一个C语言源文件

#include <stdio.h>

int main(){
  return 0;
}

int add(int a,int b){
  return a+b;
}

这里定义了两个函数，一个是main()函数，其实这个函数什么也没做，仅仅return 了0；另一个函数是add()，用于相加两个传入的整数。

同样，首先需要注册环境变量，然后执行

emcc helloworld.c -s BINARYEN=1 -s SIDE_MODULE=1 -O3 -o helloworld.wasm

编译得到一个名为helloworld.wasm的文件。下一步我们就将把这个文件放入浏览器中运行。

将wasm放入浏览器中运行

在wasm同目录新建一个html文件，在其中写一个<script>标签，内容如下：

        let wasmFun={}
        fetch("helloworld.wasm").
            then(response => response.arrayBuffer()).
            then(bytes => WebAssembly.instantiate(bytes)).
            then(mod => mod.instance).
            then(instance => {
                wasmFun = instance.exports;
                console.log(wasmFun)
            });

这里使用fetch()方法获取到了该文件，以ArrayBuffer的形式读取文件内容，然后对文件内容进行编译，最终便获得了C语言源文件中所包含的main()和add()函数。此时我们便可以在浏览器中调用这两个函数。

当然，本文仅仅是以十分简单的方式介绍了如何将一个C语言文件通过emcc编译为wasm文件并在浏览器中执行，实现了一个Hello World实例，最终还有很多细节没考虑，例如参考资料的文章中还讲到了内存分配等内容。