首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WebAssembly之使用JS调用C/C++接口

WebAssembly之使用JS调用C/C++接口

作者头像
李小白是一只喵
发布2020-09-10 15:08:45
3.8K0
发布2020-09-10 15:08:45
举报
文章被收录于专栏:算法微时光算法微时光

image.png

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

代码创建

创建一个test.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 add(int a, int b)
{
    printf("a+b=%d\n", a+b);
}

#ifdef __cplusplus
}
#endif

默认情况下,Emscripten生成的代码总是只调用该main()函数,其他函数作为死代码被删除。

将EMSCRIPTEN_KEEPALIVE放在函数名称之前可以阻止这种情况发生。 还需要导入emscripten.h库来使用EMSCRIPTEN_KEEPALIVE。

添加模板文件HTML

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

其余步骤和上一章节相同。

运行实例

执行编译:

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

编译成功后执:

 emrun --no_browser --port 8080 .

image.png

在浏览器中执行:http://127.0.0.1:8080/ 进入test.html:

image.png

但是并没有调用我们的函数,下面就要修改html文件调用我们的函数。

在html文件中添加按钮和对应的回调函数:

<button class="mybutton">Run myFunction</button>
document.querySelector('.mybutton')
    .addEventListener('click', function(){
        alert('check console');
        var result = Module.ccall(
            'add',
            null,
            ['number', 'number'],
            [13, 40]
        );
    })

image.png

ccall函数语法解释:

var result = Module.ccall(ident, returnType, argTypes, args);

参数:

  • ident :C导出函数的函数名(不含“_”下划线前缀);
  • returnType :C导出函数的返回值类型,可以为'boolean'、'number'、'string'、'null',分别表示函数返回值为布尔值、数值、字符串、无返回值;
  • argTypes :C导出函数的参数类型的数组。参数类型可以为'number'、'string'、'array',分别代表数值、字符串、数组;
  • args :参数数组。 使用例子:
var result = Module.ccall('add', 'number', ['number', 'number'], [13.0, 42]);

执行的效果:

image.png

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代码创建
    • 添加模板文件HTML
      • 运行实例
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档