emsdk安装和编译2个C++基础示例

参考地址：Download and install — Emscripten 3.1.65-git (dev) documentation

 

环境：

ubuntu 24.04 LTS

gcc (Ubuntu 13.2.0-23ubuntu4) 13.2.0

g++ (Ubuntu 13.2.0-23ubuntu4) 13.2.0

cmake version 3.28.3

 

First check the Platform-specific notes below and install any prerequisites.

The core Emscripten SDK (emsdk) driver is a Python script. You can get it for the first time with

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

 

Run the following emsdk commands to get the latest tools from GitHub and set them as active:

# Fetch the latest version of the emsdk (not needed the first time you clone)
git pull

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

# Activate PATH and other environment variables in the current terminal
source ./emsdk_env.sh

Python is not provided by emsdk. The user is expected to install this beforehand with the system package manager:

# Install Python
sudo apt-get install python3

# Install CMake (optional, only needed for tests and building Binaryen or LLVM)
sudo apt-get install cmake

 

来2个示例：

eg1:

/// /input/hello1.cpp

#include <iostream>
using namespace std;

int main(){

  std::cout<<"Hello emsdk!"<<std::endl;

  return 0;
}


// step1: 编译C++工程
// emcc ./input/hello1.cpp -o ./output/hello1/hello1.html

// step2: 运行web
// emrun --no_browser  --port 8081  ./output/hello1/

// step3: 浏览器查看
// localhost:8081/hello1.html

eg2:

/// input/hello2.cpp

#include <iostream>  
  
extern "C" {  
    void say_hello2() {  
        std::cout << "Hello, Emscripten! 20240805" << std::endl;  
    }  
}  
  
int main() {  
    // 注意：在WebAssembly中，main函数可能不会被直接调用，  
    // 但我们可以从JavaScript中调用say_hello。  
    // 这里只是为了演示如何写C++代码。  
    say_hello2();  
    return 0;  
}


// step1: 编译C++工程，这里导出了一个函数
// emcc  -s WASM=1 -o ./output/hello2/hello2.js  ./input/hello2.cpp -s EXPORTED_FUNCTIONS='["_say_hello2"]'   -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' 

// step2: 运行web
// emrun --no_browser  --port 8082  ./output/hello2/

// step3: 浏览器查看
// localhost:8082/index.html
// output/hello2/index.html

<!DOCTYPE html>  
<html>  
<head>  
    <title>Emscripten Example</title>  
</head>  
<body>  
    <h1>Emscripten C++ Example</h1>  
    <button onclick="Module.ccall('say_hello2', null, [], [])">Say Hello</button>  
    <script src="./hello2.js"></script>  
</body>  
</html>

 

 

 

注意这里的目录结构，

emsdk,  input, output 3个目录是同级的。

emsdk/xxx

input/ 
  hello1.cpp
  hello2.cpp

output/
  hello1/
  hello2 /
      index.html

编写3个文件， input/hello1.cpp,  input/hello2.cpp,  output/hello2/index.html 。完成这3个文件的编写。

在 emsdk 文件夹所在目录，执行一些  工程编译的命令，编译C++代码。可以完成这2个工程。

## 第一个工程的编译命令
emcc ./input/hello1.cpp -o ./output/hello1/hello1.html


## 第2个工程的编译命令
emcc  -s WASM=1 -o ./output/hello2/hello2.js  ./input/hello2.cpp -s EXPORTED_FUNCTIONS='["_say_hello2"]'   -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

实际使用过程中，一个工程，一个工程来编译。完成了eg1, 再去完成eg2.注意

如果执行编译命令的时候，提示emcc找不到，那应该是emsdk文件夹下面的 环境变量脚本没有执行。

参考刚才安装步骤，把环境变量脚本 用source 命令执行一下。

还有，看看这的若干编译命令，要在  emsdk, input, output，这3个文件夹 同级目录执行编译命令。否则直接执行脚本，会找不到文件。

如果你看懂了这里脚本的路径，你可以根据自己的需要改写脚本路径。

 

posted @ 2024-08-05 17:38  He_LiangLiang  阅读(18)  评论(0)  编辑  收藏  举报