MDN 就是通过编译器编译完成c后生成的胶水代码 引入js 就能直接调用定义在c或者c++中的函数了
c代码如下:
#include <stdio.h> #include <stdlib.h> #include <time.h> //emscripten 的头文件 #include <emscripten/emscripten.h> // 一旦WASM模块被加载，main()中的代码就会执行 int main() { printf("WebAssembly module Hello world!! "); } // 返回1-10之间的一随机数 //EMSCRIPTEN_KEEPALIVE 宏定义防止删除除main之外的函数 int EMSCRIPTEN_KEEPALIVE abc() { srand ( time(NULL) ); return rand() % 10 + 1; }
html与js代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>WebAssembly module Hello world!!</h1> <p class="aa"></p> <p class="a"></p> <button class="btn">点击出现随机数</button> <script src="index.js"></script> <script> //Module为全局对象可以直接Module._abc();调用c函数也可以_abc()直接函数名调用 //注意页面初始化时候调用需要先调用 Module.onRuntimeInitialized
document.querySelector(".btn").onclick = function(){ let a = Module._abc(); document.querySelector(".aa").innerText = a; document.querySelector(".a").innerText = _abc(); } </script> </body> </html>
编译器使用emscripten编译指令为： emcc hello.c -s WASM=1 -O3 -o index.js
具体编译命令的含义请看emscripten官方文档！！