编译 C++ 代码为 WebAssembly

2025-03-29 23:02 flyfish163 阅读(140) 评论(0) 收藏举报

spellcheck.cpp文件内容

为简化起见，先不放自己的代码，只放示例中最简单的代码。

#include <emscripten/bind.h>  // Emscripten 绑定头文件
#include <string>

using namespace emscripten;

// 假设这是你原有的拼写检查函数
bool checkSpelling(const std::string &word) {
    // 你的拼写检查逻辑...
    return true;  // 示例返回值
}

// 包装函数，供 JavaScript 调用
bool checkSpellingWrapper(const std::string &word) {
    return checkSpelling(word);
}

// 使用 Emscripten 绑定导出函数
EMSCRIPTEN_BINDINGS(spellcheck_module) {
    emscripten::function("checkSpelling", &checkSpellingWrapper);
}

第三步：编译 C++ 代码为 WebAssembly

使用 Emscripten 的 emcc 命令将代码编译为 .wasm 和 .js 文件

执行命令

emcc -o spellcheck.js spellcheck.cpp -O3 -s WASM=1 -s MODULARIZE=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']" --bind

成功生成Js文件

第四步：创建前端页面调用 WASM

把范例中的hmtl文件原样拷贝，保存成sample.html

<!DOCTYPE html>
<html>
<head>
    <title>拼写检查工具</title>
</head>
<body>
    <input type="text" id="wordInput" placeholder="输入单词">
    <button onclick="checkSpelling()">检查</button>
    <div id="result"></div>

    <!-- 加载生成的 JS 文件 -->
    <script src="spellcheck.js"></script>
    <script>
        // 等待 WASM 模块初始化完成
        Module.onRuntimeInitialized = () => {
            console.log("WASM 模块已加载！");
        };

        // 调用 C++ 函数
        function checkSpelling() {
            const word = document.getElementById('wordInput').value;
            
            // 使用 ccall 调用 C++ 函数
            const result = Module.ccall(
                'checkSpelling',  // C++ 函数名
                'boolean',        // 返回值类型
                ['string'],       // 参数类型数组
                [word]            // 参数值数组
            );

            // 显示结果
            document.getElementById('result').innerHTML = 
                result ? '✓ 拼写正确' : '✗ 拼写错误';
        }
    </script>
</body>
</html>

第五步：本地测试与调试

方法一：使用 VS Code 的 Live Server 扩展

Live Server 是一个 VS Code 插件，它允许开发者在本地快速搭建一个具有实时加载功能的小型服务器，用于实时预览 HTML、CSS 和 JavaScript 文件的更改。这个插件特别适合前端开发，因为它可以在代码修改后自动刷新页面，从而提高开发效率。

安装步骤