上篇介绍了WebAssembly的前生今世,这篇准备写几个例子试玩一下。
1.安装Emscripten
首先肯定是先安装Emscripten,这是一个toolchain,可以把C/C++代码编译成asm.js和WASM字节码。内部其实分为三部分:
- 调用编译器前端Clang把C/C++代码编译成LLVM字节码
- 调用编译器后端Fastcomp把LLVM字节码编译成asm.js
- 调用Binaryen的asm2wasm把asm.js转换成WASM字节码
Emscripten的具体安装步骤如下:
# 下载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