当前位置：首页 > news >正文

Qt6.8.2中JavaScript调用WebAssembly的js文件＜1＞

news 来源：原创 2025/6/8 22:22:47

前段时间已经学习了如何在QtAssembly中编译FFmpeg资源了，接下来需要使用Html来调用QtCreator中WebAssembly套件写的功能，逐步实现javascrpt与c++复杂功能的视线。

接下来我先为大家介绍一个非常简单的加法调用吧！

功能讲解

开发环境：win11电脑，QtCreator6.8.2匹配WebAssembly3.1.56

1：新建运行文件夹

首先需要新建一个名为"run"的文件夹

2：创建一个cpp文件

#include <emscripten.h>
#include <iostream>
 
extern "C" {
    int add(int a, int b) {
        return a + b;
    }
}

假设CPP文件名是：example.cpp

3：创建inde.html文件

该文件中用于实现javascript代码，来调用C++中的加法功能

<!DOCTYPE html>
<html>
<head>
    <title>WebAssembly Example</title>
    <script src="example.js"></script>
    <script>
        Module().then(function(module) {
            var add = module.cwrap('add', 'number', ['number', 'number']);
            console.log("5 + 3 =", add(5, 3)); // 应该输出 8
        });
    </script>
</head>
<body>
    <h1>WebAssembly Test</h1>
</body>
</html>

4：在该文件夹中打开CMD编译cpp文件

编译cpp的指令是：

emcc example.cpp -o example.js -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" -s EXPORTED_RUNTIME_METHODS="['ccall', 'cwrap']" -s MODULARIZE=1 -s ENVIRONMENT='web'

其中，里面对应的参数解析是：

这里是一些关键选项的解释

-o example.js：指定输出文件名为 example.js

-s WASM=1：生成 WebAssembly 输出

-s EXPORTED_FUNCTIONS：指定哪些函数需要被导出到 JavaScript

-s EXPORTED_RUNTIME_METHODS：导出运行时方法，例如 ccall 和 cwrap

-s MODULARIZE=1：生成一个模块化的 JavaScript 文件，这样你可以通过 ES6 import 语法来导入它。

-s ENVIRONMENT='web'：指定运行环境为 Web。

出现下面的页面时，表示编译成功了