面向WebAssembly编程：应用开发方法与实践
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2　你好，世界！

本节将从经典的“你好，世界！”例程入手，介绍如何使用Emscripten编译C/C++代码并运行测试。

2.2.1　生成.wasm文件

新建一个名为hello.cc的C源文件，为了正确标识中文字符串，将其保存为UTF8编码，代码如下：

//hello.cc
#include <stdio.h>

int main() {
    printf("你好，世界！\n");
    return 0;
}

进入控制台，使用2.1节介绍的emsdk_env命令设置Emscripten环境变量后，切换至hello.cc所在的目录，执行以下命令进行编译：

emcc hello.cc

在hello.cc所在的目录下得到两个文件：a.out.wasm以及a.out.js。其中，a.out.wasm为C源文件编译后形成的WebAssembly汇编文件；a.out.js是Emscripten生成的胶水代码，其中包含了Emscripten的运行环境和.wasm文件的封装，导入a.out.js即可自动完成.wasm文件的载入/编译/实例化、运行时初始化等繁杂的工作。

使用-o选项可以指定emcc的输出文件，代码如下：

emcc hello.cc -o hello.js

编译后的成果文件分别为hello.wasm以及hello.js。

2.2.2　运行

与原生代码不同，C/C++代码被编译为WebAssembly后是无法直接运行的。我们需要将它导入网页发布，之后通过浏览器来执行。

在hello.js所在目录下，新建一个名为test.html的网页文件，代码如下：

<!doctype html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Emscripten:你好，世界！</title>
  </head>

  <body>
    <script src="hello.js"></script>
  </body>
</html>

将test.html、hello.js、hello.wasm所在的目录通过HTTP协议发布后，使用浏览器打开test.html网页文件，打开开发者面板（Chrome浏览器下使用F12快捷键），可以看到控制台输出，如图2-2所示。

图2-2　“你好，世界！”例程运行效果

提示

WebAssembly例程通过网页发布后方可运行。本书的例程目录中有一个名为py_simple_server.bat的批处理文件。该批处理文件用于在Windows操作系统下使用Python将当前目录设置为http服务，端口为8000。当然您也可以使用nginx/IIS/apatch或任意一种惯用的工具来完成该操作。

WebAssembly程序不仅可以在网页中运行，也可以在Node.js 8.0及以上的版本中运行。Emscripten自带了Node.js环境，因此我们可以直接使用node来测试刚才的程序：

> node hello.js
你好，世界！

2.2.3　使用Emscripten生成测试页面

使用emcc命令进行编译时，若指定输出文件后缀为.html，那么Emscripten不仅会生成WebAssembly汇编文件.wasm、JavaScript环境胶水代码.js，还会额外生成一个Emscripten测试页面，例如：

emcc hello.cc -o hello.html

上述命令执行后，将获得hello.wasm、hello.js以及hello.html。其中，hello.wasm、hello.js与使用-o hello.js参数时获得的文件内容是一致的。将这些编译成果所在的目录发布后，使用浏览器访问hello.html，可以看到页面显示如图2-3所示。

图2-3　Emscripten生成的测试页面运行效果

页面下方是一个模拟标准控制台输入/输出区域；其上方较小的黑色区域是一个画布，可用于模拟图形界面。页面自动载入hello.js文件，并在控制台正确输出了“你好，世界！”。

Emscripten自动生成的测试页面使用很方便，但是其页面代码量很大，不利于讲解，因此除特殊说明外，本书均使用手动编写的网页进行测试。

上一章目录下一章