跟我一起从零开始学习WebAssembly(二)、最简单的例子hello world(编译创建HTML和JavaScript)

目录

  • C/C++代码
    • 1、创建一个hello.c文件
    • 2、编译hello.c文件
    • 运行实例


C/C++代码

1、创建一个hello.c文件

#include 

int main(int argc, char ** argv)
{
    printf("Hello World\n");
}

2、编译hello.c文件

让我们看看如何使用它将C/C++示例编译为Emscripten。使用Emscripten进行编译时可以使用多种选项,但我们将介绍的主要两种方案是:

  • 1、编译为wasm并创建HTML以运行我们的代码,以及在Web环境中运行wasm所需的所有JavaScript“粘合”代码。
  • 2、编译为wasm并只创建JavaScript

现在进入Emscripten编译器环境的终端窗口,导航到与hello.c文件相同的目录。
跟我一起从零开始学习WebAssembly(二)、最简单的例子hello world(编译创建HTML和JavaScript)_第1张图片
然后运行以下命令:

emcc hello.c -s WASM=1 -o hello.html

跟我一起从零开始学习WebAssembly(二)、最简单的例子hello world(编译创建HTML和JavaScript)_第2张图片
其中、命令中的选项含义:

-s WASM = 1 - 指定我们想要输出。 如果我们不指定它,Emscripten将只输出asm.js,就像默认情况下那样。
-o hello.html - 指定我们希望Emscripten生成一个HTML页面来运行我们的代码(和要使用的文件名),以及wasm模块和JavaScript“粘合”代码来编译和实例化wasm以便于它可以在Web环境中使用。

编译结果:
在我们的源目录中,具有:

二进制wasm模块代码(hello.wasm)
一个JavaScript文件,包含在本机C函数和JavaScript / wasm(hello.js)之间进行转换的粘合代码
用于加载,编译和实例化我们的wasm代码的HTML文件,并在浏览器中显示其输出(hello.html)
如图:
跟我一起从零开始学习WebAssembly(二)、最简单的例子hello world(编译创建HTML和JavaScript)_第3张图片

运行实例

右键我们的hello.html文件,打开方式选择我们的浏览器(目前我们支持WebAssembly的主要浏览器:Chrome, Edge, Firefox, 和 WebKit)。
如果一切按计划运行,在网页上出现的Emscripten控制台和浏览器的JavaScript控制台中看到“Hello world”输出。刚刚将C/C++编译为WebAssembly并在浏览器中运行它!
效果如图:
跟我一起从零开始学习WebAssembly(二)、最简单的例子hello world(编译创建HTML和JavaScript)_第4张图片

你可能感兴趣的:(跟我一起从零开始学习WebAssembly(二)、最简单的例子hello world(编译创建HTML和JavaScript))