WebAssembly之使用JS调用C/C++接口
时间:2022-07-24
本文章向大家介绍WebAssembly之使用JS调用C/C++接口,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 Worldn");
}
#ifdef __cplusplus
extern "C"
{
#endif
void EMSCRIPTEN_KEEPALIVE add(int a, int b)
{
printf("a+b=%dn", 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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python与seo,百度关键词相关搜索关键词采集源码
- istio请求路由分析
- [剑指]2空格替换
- (补充)SPAN+AVISPA for Verifying Cryptographic Protocols
- 如何修改终端中$符号前面的一串名称?
- Alfred 有多强悍,我写了个一键上传图片的 workflow 来告诉你
- Peewee出错:Illegal mix of collations
- 【TOOLS】Linux环境下升级python2.7到python3.6
- 溯源黑帽利用 Web 编辑器漏洞非法植入 SEO 页面事件
- Milvus 查询合并机制
- Django model 层之Models与Mysql数据库小结
- 【010期】JavaSE面试题(十):集合之Map18连环炮!
- 每日打卡 373. 查找和最小的K对数字
- IE11出现"__doPostBack”未定义
- latex()、ploy2sym()、symsum()的妙用