WebAssembly学习笔记--编写一个C语言函数并在JS中使用9.刷新页面，可以看到控制台打出模块对象，其中包含_a

一、准备开发环境

下载安装python: www.python.org/downloads/ ,并设置环境变量
下载安装https://cmake.org/download/，并设置环境变量
确保能在命令行访问git, cmake, python
下载https://github.com/emscripten-core/emsdk

    $ git clone https://github.com/emscripten-core/emsdk.git
    $ cd emsdk
    $ ./emsdk install latest
    $ ./emsdk activate latest
    $ source ./emsdk_env.sh

5.运行emcc -v，有输出就安装成功

二、编译并使用一个C文件

1.编写C语言代码，保存为test目录下的test.c

    #include <emscripten.h> // 导入头文件
    
    // EMSCRIPTEN_KEEPALIVE：add函数没有被调用，使用该标志防止被优化删除
    EMSCRIPTEN_KEEPALIVE int add(int a, int b){ 
        return a + b;
    }

2.进入test目录，命令行设置编译器环境

    $ source D:/emsdk/emsdk_env.sh 同一(4)的最后一步

3.编译代码

    $ emcc -O3 -s WASM=1 test.c
    // -O3 最高优化级别
    // -s WASM=1 生成WASM代码
    // 文件夹里生成了a.out.js胶水，包含模块代码，以及内存泄漏保护等代码
    // 文件夹里生成了a.out.wasm代码

4.编写html验证

    <!DOCTYPE html>
    <html>
    <body>
        <script src="./a.out.js"></script>
        <script>
            console.log(Module); // 一般会报错，看第五点
        </script>
    </body>
    </html>

5.由于跨域问题，需架设本地服务器 6.Npm 全局安装http-server

    $ npm intsall http-server -g

7.在a.out.wasm所在目录开启本地服务器，获取域名和端口

    $ http-server --cors
    // 此时命令行会输出本地服务器的地址

8.将a.out.js中的wasm地址修改为服务器地址

    // 修改前
    var wasmBinaryFile = 'a.out.wasm';
    if (!isDataURI(wasmBinaryFile)) {
        wasmBinaryFile = locateFile(wasmBinaryFile);
    }
    // 修改后
    var wasmBinaryFile = 'http://172.17.205.243:8080/a.out.wasm';

9.刷新页面，可以看到控制台打出模块对象，其中包含_add方法，即封装后的add方法，可直接调用。

    <!DOCTYPE html>
    <html>
    <body>
        <script src="./a.out.js"></script>
        <script>
            Module.onRuntimeInitialized = () => {
                let result = Module._add(1, 2);
                console.log(result);
            };
        </script>
    </body>
    </html>

WebAssembly学习笔记--编写一个C语言函数并在JS中使用

一、 准备开发环境

二、编译并使用一个C文件

一、准备开发环境