1.首先科学online，运行以下命令安装wasm
# 下载Emscripten源码
git clone https://github.com/juj/emsdk.git
cd emsdk
# 安装最新版本
./emsdk install latest
# 使用最新版本
./emsdk activate latest
# 添加环境变量
source ./emsdk_env.sh
2.HelloWorld
写个HelloWorld：
#include <stdio.h>
int main(int argc, char** argv) {
printf("Hello World!\n");
return 0;
}
用下面的命令编译：
注：最新版本的Emscripten默认就会生成.wasm，不需要像以前那样指定“-s WASM=1”了
emcc hello.c -o index.html
编译后的目录文件结构如下：
需要注意的是，生成的index.html直接双击打开是无法运行的，必须运行一个本地的HTTP服务器。通过下面的命令安装http-server：
npm install http-server -g
然后，在当前目录下直接运行HTTP服务器：
最后通过URL访问该网页：http://127.0.0.1:8080/index.html
当然，如果你想把网页搞得更漂亮一点，还可以自定义HTML模版，在emsdk目录中有一个最小版本的HTML模版shell_minimal.html，可以在这个基础上进行修改，然后用下面的命令编译：
emcc hello.c -o index.html --shell-file shell_minimal.html
3.C代码调用Javascript
C代码里可以通过Emscripten中的EM_ASM这个宏调用Javascript代码，注意Javascript代码要放进大括号里。我们把上面的代码改一改，让它蹦一个弹窗：
#include <stdio.h>
#include <emscripten.h>
int main(int argc, char** argv) {
EM_ASM({ alert("Hello!"); });
return 0;
}
重新编译、运行的结果如下：
如果运行后发现代码修改没有生效，清理一下浏览器的缓存再重新加载。
4.Javascript调用C代码
Javascript也可以直接调用WebAssembly中定义的函数，需要使用Emscripten中的ccall()函数以及EMSCRIPTEN_KEEPALIVE声明（将你的函数添加到导出的函数列表中，默认只导出main()）。
我们在前面的代码中增加一个自定义函数：
#include <stdio.h>
#include <emscripten.h>
void EMSCRIPTEN_KEEPALIVE myFunction() {
printf("Good Morning!\n");
}
int main(int argc, char** argv) {
printf("Hello World!\n");
return 0;
}
编译的时候要注意，由于ccall()函数默认是不导出的，需要加上一个编译选项：
emcc hello.c -o index.html -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]'
然后在生成的index.html中添加一个按钮，用来调用我们的自定义函数：
<button class="mybutton">Run myFunction</button>
最后在</script>标签之前添加以下代码，响应按钮点击事件：
document.querySelector('.mybutton').addEventListener('click', function(){
var result = Module.ccall('myFunction', // name of C function
null, // return type
null, // argument types
null); // arguments
});
最终运行结果：
5.加入source-map调试
还是上面的demo，执行以下命令
emcc hello.c -o index2.html -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]' -g4 --source-map-base http://172.16.2.16:8080/
注意source-map-base后面url最后一个字符必须为/
然后在生成的index.html中添加一个按钮，用来调用我们的自定义函数：
<button class="mybutton">Run myFunction</button>
最后在</script>标签之前添加以下代码，响应按钮点击事件：
document.querySelector('.mybutton').addEventListener('click', function(){
var result = Module.ccall('myFunction', // name of C function
null, // return type
null, // argument types
null); // arguments
});
启动http-server后chrome打开页面，如下图，我们可以在前端看到c++代码，和运行堆栈，但是不能获取某个变量值，后续知道方法后回来结贴。
本文参考 https://blog.csdn.net/turkeycock/article/details/83317935
如果你也在研究WebAssembly技术，可以加我微信，EagleAndy，备注“wasm”，拉你入群，一起学习进步。
也可以加入slack在线聊天室，一起聊聊wasm!
