Webassembly

Webassembly是一种兼容Web的容器，它并不是一门新的编程语言，它更像一种新的编译器，可以帮助代码解释到二进制方向。同时它是一套完整的语义系统，你也可以像使用Docker一样使用Webassembly。从命名的角度Webassembly可以写作单词的组合，也就是：Web base simply（简单网络基础）读音一定也是这样的（确信）

完成开发

我将会使用CMake完成这次开发，首先如果你不会CMake你可以看我之前的博客，地址都在文末。操作系统使用Ubuntu。

首先我们需要安装Emscripten：

# 获取emsdk
git clone https://github.com/juj/emsdk.git

cd emsdk

# 补齐文件库,如果速度过慢就需要代理咯,两串指令等价,用哪个都可以
./emsdk install latest
./emsdk activate latest

# 添加指令
source ./emsdk_env.sh
# 注意官方汉语文档有误，请以博客所写为主

然后再emsdk文件夹内创建一个文件夹，我们叫他ahh

然后我们创建CMake项目文件夹，CmakeLists.txt的写法可以参考我的。

root@minloha:~/WebAssembly/demo01# tree
.
├── build
├── CMakeLists.txt
└── src
    ├── CMakeLists.txt
    └── main.cpp

1
2
3

# 这是项目根目录
PROJECT (MinuiW)
ADD_SUBDIRECTORY(src)

# 这是src目录
PROJECT (MinuiW)
SET(SRC_LIST main.cpp)
MESSAGE(STATUS "Building project!")
ADD_EXECUTABLE(MinuiW ${SRC_LIST})

我们在项目main.cpp写入我们的代码。

/* 一段十分恶趣味的代码
 * @author Minloha
*/

[[include]] <iostream>
[[include]] <emscripten.h>

using namespace std;

class Exam {
public:
    ~Exam() {
        cout << "分数是:" << this->score << endl;
    }
    Exam(int score) {
        this->score = score;
    }
private:
    int score;
};

int main()
{
    Exam* e = new Exam(10);
    delete e;
    cout << "哈哈哈" << endl;
}

写完之后我们切换到build文件夹，完成代码编译：

cd build/

# 使用emcmake进行make编译
emcmake cmake ..

# 生成最后的js文件
emmake make

root@minloha:~/WebAssembly/demo01# cd build/
root@minloha:~/WebAssembly/demo01/build# emcmake cmake ..
configure: cmake .. -DCMAKE_TOOLCHAIN_FILE=/root/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_CROSSCOMPILING_EMULATOR=/root/emsdk/node/14.18.2_64bit/bin/node;--experimental-wasm-threads
-- Building project!
CMake Warning (dev) in CMakeLists.txt:
  No cmake_minimum_required command is present.  A line of code such as

    cmake_minimum_required(VERSION 3.16)

  should be added at the top of the file.  The version specified may be lower
  if you wish to support older CMake versions for this project.  For more
  information run "cmake --help-policy CMP0000".
This warning is for project developers.  Use -Wno-dev to suppress it.

-- Configuring done
-- Generating done
-- Build files have been written to: /root/WebAssembly/demo01/build
root@minloha:~/WebAssembly/demo01/build# ls
CMakeCache.txt  CMakeFiles  cmake_install.cmake  Makefile  src
root@minloha:~/WebAssembly/demo01/build# emmake make
make: make
Scanning dependencies of target MinuiW
[ 50%] Building CXX object src/CMakeFiles/MinuiW.dir/main.o
[100%] Linking CXX executable MinuiW.js
[100%] Built target MinuiW
root@minloha:~/WebAssembly/demo01/build#

我们可以看到已经生成了MinuiW.js文件，我们浅浅的看一下。

1
2
3

root@minloha:~/WebAssembly/demo01/build# cd src
root@minloha:~/WebAssembly/demo01/build/src# ls
CMakeFiles  cmake_install.cmake  Makefile  MinuiW.js  MinuiW.wasm

我们看到了出现wasm文件和基础js文件，我们把两个文件同时取出，把Js引入我们的html文件中。

<html>
        <head>
                <meta charset="utf-8">
                <title>WebAssembly</title>
        </head>
        <body>
                <script src="MinuiW.js"></script>
        </body>
</html>