WebAssembly MDN简单使用

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官方文档！！