之前介绍了 WebAssembly 基础知识,如果有兴趣可以点击查阅。本文进行 WebAssembly 实战,介绍在浏览器如何使用 WebAssembly,如何把 C++ 编译成 WASM 模块。

Emscripten

Emscripten是一种开源 LLVM 编译器,可以将 C 和 C++ 代码编译为 asm.js 和 WebAssembly 字节码。通过以下步骤,安装Emscripten

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

如果命令行等太久,可以直接通过github下载zip包

接下来进入安装SDK tools,如果是windows,./emsdk 替换为 emsdk.batsource ./emsdk_env.sh 替换为 emsdk_env.bat

./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

windows安装用这个

./emsdk.bat install latest
./emsdk.bat activate latest
emsdk_env.bat

安装的时间比较长,先出去溜达一圈再回来看看。。。🤡 如果 PowerShell 提示下面错误,重新执行下命令 ./emsdk.bat activate latest --permanent 即可

emcc : 无法将“emcc”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。

开始编码

经过漫长的等待下载完成后,我们来编写一个如何级别的 C 代码,创建一个 hello.c 文件,输入以下代码。

#include <stdio.h>
int main() {
  printf("Hello WebAssembly!");
  return 0;
}

接下来通过 emcc 编译,输出到 html 。

emcc ./hello.c -s WASM=1 -s NO_EXIT_RUNTIME=0 -o hello.html

d72fb914-bb96-4175-b205-f1bf0197ddce.jpg

可以看到输出了 hello.html,hello.js,hello.wasm 等文件,启动 http 服务,通过ip访问 http://127.0.0.1/hello.html,可以看到控制台输出了 Hello WebAssembly 结果。

52546939-07a5-4e38-aeaa-65fc0f78dba2.jpg

我们也通过 nodejs 直接运行 hello.js 文件,结果如下:

836032d4-f63e-4366-a562-b6c09e09c063.png

一个简单的 WebAssembly 入门例子已经完成了。

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: 工具