跟我一起从零开始学习WebAssembly(四)、将C/C++函数封装为接口，供js调用

---

如果你想在C/C++代码中定义一个你需要从JavaScript调用的函数，你可以使用Emscripten 的ccall()函数并使用EMSCRIPTEN_KEEPALIVE声明（它将添加你的函数到导出函数列表）来完成

1、创建一个hello.c文件

新建一个目录hello3，并在hello3中新建文件hello3.c，且加入如下代码：

#include <stdio.h>
#include <emscripten/emscripten.h>

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

#ifdef __cplusplus
extern "C"
{
#endif

void EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv)
{
    printf("MyFunction Called\n");
}

#ifdef __cplusplus
}
#endif

默认情况下，Emscripten生成的代码总是只调用该main()函数，其他函数作为死代码被删除。将EMSCRIPTEN_KEEPALIVE放在函数名称之前可以阻止这种情况发生。您还需要导入emscripten.h库来使用EMSCRIPTEN_KEEPALIVE。

注意：我们包含#ifdef块，因此如果您尝试将其包含在C ++代码中，该示例仍然有效。由于C与C ++名称修改规则，为防止被终止，但在这里我们设置它，以便在使用C ++时将其视为外部C函数。

2、添加模板文件HTML

在上一级新建html_template目录，并将shell_minimal.html复制到目录中。

3、编译

现在让我们再次运行编译步骤。 从最新目录内部（以及在Emscripten编译器环境终端窗口内），使用以下命令编译C代码。 （注意我们需要使用NO_EXIT_RUNTIME进行编译，这是必要的，否则当main（）退出运行时将被关闭 - 正确的C仿真所必需的，例如，调用atexits - 并且调用编译的代码是无效的。）

emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file ../html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1  -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']"

4、运行

如果你再次在浏览器中加载示例，你将看到与以前相同的内容！

5、调用接口

• 1、现在我们需要myFunction()从JavaScript 运行我们的新函数。首先，在文本编辑器中打开hello3.html文件。

• 2、添加<button>如下所示的元素，就在第一个开始<script type='text/javascript'>处的上方。

<button class="mybutton">Run myFunction</button>

• 3、现在在第一个 <script>元素的末尾添加以下代码：如图
  
• 4、再次运行，并点击mybutton按钮，结果如图：
  
  这样，我们就完成了对接口的调用。