环境：centos 7.9

1、准备环境

sudo yum install docker
sudo systemctl start docker.service
sudo docker pull trzeci/emscripten:latest

2、编写C++源文件

//main.cc
#include<stdio.h>
#include<string>
#include<emscripten.h>

extern "C"{
  EMSCRIPTEN_KEEPALIVE
  int add(int x,int y)
  {
    return x + y;
  }

  EMSCRIPTEN_KEEPALIVE
  int min(int x,int y)
  {
    return x -y;
  }

  EMSCRIPTEN_KEEPALIVE
  char* get(char* a)
  {
    return a;
  }
}

3、启动docker，并将main.cc文件拷贝至docker中进行编译。

sudo docker run -ti 7634ecdacf21 /bin/bash

编译指令：

emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' main.cc -o main.js

编译后，产生如下main.js 和main.wasm文件。

WebAssembly编译_html

 

 4、测试

将main.js、main.wasm(两个文件存放目录一致)拷贝到web容器中，并编写main.html测试页面。

<html>
  <head>
    <meta charset="utf-8">
    <title>WebAssemble Demo</title>
  </head>
  <body>
    <button onclick="fun_add()">add</button>
    <button onclick="fun_min()">min</button>
    <button onclick="fun_get()">get</button>
    <div id="log"></div>
    <script>
      function fun_add()
      {
        const add=Module.cwrap('add');
        log.innerHTML=("add(12,5)的计算结果:" + add(12, 5));
      }
      function fun_min()
      {
        const min=Module.cwrap('min');
        log.innerHTML=("min(12,5)的计算结果:" + min(12, 5));
      }
      function fun_get()
      {
        const get = Module.cwrap('get','string',['string']);
        log.innerHTML=get('汉语-hanyu-demo!');
      }
    </script>
    <script src="main.js"></script>
  </body>
</html>

在浏览器中输入main.html页面请求地址，分别点击[add]、[min]、[ge]三个按钮进行测试，实验效果如下图所示：

WebAssembly编译_docker_02