WebAssembly_Web运行CC++程序(win10)
1. webassembly技术介绍 webassembly是2015年诞生的一项新的技术，在2015年7月，wasm首次对外公开，并正式开始设计，同年，w3c成立了wasm社区小组（成员包括chrome、edge、firefox和webkit），致力于推动wasm技术的早期发展。
wasm 是一个可移植、体积小、加载快并且兼容 web 的全新格式。
webassembly的中文官网：webassembly.org.cn/
来至官网的介绍：
webassembly 是由主流浏览器厂商组成的 w3c 社区团体 制定的一个新的规范。
高效 webassembly 有一套完整的语义，实际上 wasm 是体积小且加载快的二进制格式， 其目标就是充分发挥硬件能力以达到原生执行效率
安全 webassembly 运行在一个沙箱化的执行环境中，甚至可以在现有的 javascript 虚拟机中实现。在web环境中，webassembly将会严格遵守同源策略以及浏览器安全策略。
开放 webassembly 设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。
标准 webassembly 在 web 中被设计成无版本、特性可测试、向后兼容的。webassembly 可以被 javascript 调用，进入 javascript 上下文，也可以像 web api 一样调用浏览器的功能。当然，webassembly 不仅可以运行在浏览器上，也可以运行在非web环境下。
由于不同的计算机 cpu 架构不同，机器码标准有所差别，常见的架构有 x86、amd 64、arm，因此高级语言编译成可执行代码时需要指定目标架构。
webassembly 抹平了不同 cpu 架构的机器码，webassembly 的机器码不能放在任何一个平台上运行，但由于非常接近机器码，可以被非常快速的翻译为对应架构的机器码。因此，webassembly 的运行速度和机器码非常接近。
通过官网的介绍看出，webassembly技术的目的就是提高web端代码性能，总所周知c/c++语言的运行性能一直是天花板，许多 3d 游戏，大型图形编辑相关的工具软件都是用 c/c++ 语言写的，如果能把c/c++代码搬到web端运行，那么理论上可以大大提高web端的运行效率。
要使用webassembly技术，需要先安装emscripten编译器，这个emscripten编译器可以将 c/c++ 代码编译成 js 代码，但不是普通的 js，而是一种叫做 asm.js 的 javascript 变体。
在webassembly官网有介绍如何编译安装emscripten sdk，网站地址： webassembly.org.cn/getting-sta…
emscripten的官网也有详细介绍： emscripten.org/docs/gettin…
2. 安装emscripten编译器 官网上有步骤介绍，这里再把安装的步骤做个总结。
注： 当前是在win10 64 位环境下操作。
（1）需要先安装python环境，推荐安装python3.x，因为emscripten编译器里用到了python命令。
python环境安装看这里：
xiaolong.blog.csdn.net/article/det…
xiaolong.blog.csdn.net/article/det…
（2）安装git工具，因为需要使用git命令在线从仓库下载需要的文件。
git工具安装看这里：翻到git工具安装章节。
blog.csdn.net/xiaolong112…
（3）从github仓库下载编译器项目文件，选择一个英文目录，鼠标右键，打开git命令行。（安装完git工具后会自动关关键鼠标右键）
运行下面命令进行下载，过程中需要等待一段时间。
git clone https://github.com/emscripten-core/emsdk.git 复制代码 下载成功后，当前目录下会出现一个emsdk目录。
（4）在当前目录下的文件夹地址栏里输入cmd，按下回车，快速打开cmd命令终端。
输入命令进入到emdk目录下。
cd emsdk复制代码 （5）安装最新的sdk并激活，在当前命令行继续输入命令。 注: 安装要一点时间，需要耐心等待，具体速度看网络情况。
emsdk install latest emsdk activate latest --permanent复制代码 完成输出的过程：
c:\qt\emsdk>emsdk install latest installing sdk 'sdk-releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'.. skipped installing node-12.18.1-64bit, already installed. skipped installing python-3.7.4-pywin32-64bit, already installed. skipped installing java-8.152-64bit, already installed. installing tool 'releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'.. downloading: c:/qt/emsdk/zips/37fc7647c754ac9a28ad588c143b82286de0ef71-wasm-binaries.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/37fc7647c754ac9a28ad588c143b82286de0ef71/wasm-binaries.zip, 476624087 bytes unpacking 'c:/qt/emsdk/zips/37fc7647c754ac9a28ad588c143b82286de0ef71-wasm-binaries.zip' to 'c:/qt/emsdk/upstream' done installing tool 'releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'. running post-install step: npm ci ... running post-install step: npm install google-closure-compiler-windows done running: npm ci done installing sdk 'sdk-releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'. c:\qt\emsdk>emsdk activate latest --permanent registering active emscripten environment permanently setting the following tools as active: node-12.18.1-64bit python-3.7.4-pywin32-64bit java-8.152-64bit releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit setting environment variables: path = c:\qt\emsdk;c:\qt\emsdk\node\12.18.1_64bit\bin;c:\qt\emsdk\python\3.7.4-pywin32_64bit;c:\qt\emsdk\java\8.152_64bit\bin;c:\qt\emsdk\upstream\emscripten;c:\users\11266\appdata\local\programs\python\python38-32\scripts;c:\users\11266\appdata\local\programs\python\python38-32;%userprofile%\appdata\local\microsoft\windowsapps;c:\users\11266\appdata\local\programs\microsoft vs code\bin;c:\mingw\i686-8.1.0-release-posix-dwarf-rt_v6-rev0\mingw32\bin;c:\opencv_3.4.7\opencv-mingw-build-opencv-3.4.7\x86\mingw\bin;%userprofile%.dotnet\tools;c:\ffmpeg\ffmpeg_x86_4.2.2\bin;c:\ffmpeg\ffmpeg_x86_x64_3.3.2\bin;c:\users\11266\appdata\roaming\npm global environment variables up to date复制代码 （6）在命令行输入em++ -v测试编译器是否安装成功。
出现以下提示，表示编译器已经安装成功。
c:\qt\emsdk>emcc -v emcc (emscripten gcc/clang-like replacement + linker emulating gnu ld) 2.0.10 clang version 12.0.0 (cswircachegitchromium.googlesource.com-external-github.com-llvm-llvm--project 445289aa63e1b82b9eea6497fb2d0443813a9d4e) target: x86_64-pc-windows-msvc thread model: posix installeddir: c:/qt/emsdk/upstream/bin shared:info: (emscripten: running sanity checks) c:\qt\emsdk>em++ -v emcc (emscripten gcc/clang-like replacement + linker emulating gnu ld) 2.0.10 clang version 12.0.0 (cswircachegitchromium.googlesource.com-external-github.com-llvm-llvm--project 445289aa63e1b82b9eea6497fb2d0443813a9d4e) target: x86_64-pc-windows-msvc thread model: posix installeddir: c:/qt/emsdk/upstream/bin shared:info: (emscripten: running sanity checks) c:\qt\emsdk>复制代码 （7）这时可以先关闭当前终端，再重新开一个新终端，运行emcc或者em++查看帮助，会出现以下提示。
c:\users\11266>cd /d d:\linux-share-dir\tmp\webassembly_testcode d:\linux-share-dir\tmp\webassembly_testcode>emcc -help ============================================================================== welcome to emscripten! this is the first time any of the emscripten tools has been run. a settings file has been copied to ~/.emscripten, at absolute path: c:\users\11266.emscripten it contains our best guesses for the important paths, which are: llvm_root = /usr/bin node_js = c:\program files\nodejs\node.exe emscripten_root = c:\qt\emsdk\upstream\emscripten please edit the file if any of those are incorrect. this command will now exit. when you are done editing those paths, re-run it. ==============================================================================复制代码 打开当前系统的用户目录，会看到一个.emscripten文件。这个文件里存放了编译器需要的环境变量和路径。
如果后续运行emcc或者em++命令编译程序时报错，例如：
d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -os -s wasm=1 -s side_module=1 -o hello.wasm shared:error: binaryen_root is set to empty value in c:\users\11266/.emscripten d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -os -s wasm=1 -s side_module=1 -o hello.wasm cache:info: generating system asset: is_vanilla.txt... (this will be cached in c:\users\11266.emscripten_cache\is_vanilla.txt for subsequent builds) shared:error: llc executable not found at `c:\users\11266/upstream/bin\llc.exe`复制代码 解决办法：将.emscripten文件里的所有路径改成绝对路径。
例如：原来的路径
import os emsdk_path = os.path.dirname(os.environ.get('em_config')).replace('\', '/') node_js = emsdk_path + '/node/12.18.1_64bit/bin/node.exe' python = emsdk_path + '/python/3.7.4-pywin32_64bit/python.exe' java = emsdk_path + '/java/8.152_64bit/bin/java.exe' llvm_root = emsdk_path + '/upstream/bin' binaryen_root = emsdk_path + '/upstream' emscripten_root = emsdk_path + '/upstream/emscripten' temp_dir = emsdk_path + '/tmp' compiler_engine = node_js js_engines = [node_js]复制代码 修改后的配置文件路径:
import os node_js = 'c:/qt/emsdk/node/12.18.1_64bit/bin/node.exe' python = 'c:/qt/emsdk/python/3.7.4-pywin32_64bit/python.exe' java = 'c:/qt/emsdk/java/8.152_64bit/bin/java.exe' llvm_root = 'c:/qt/emsdk/upstream/bin' binaryen_root = 'c:/qt/emsdk/upstream' emscripten_root = 'c:/qt/emsdk/upstream/emscripten' temp_dir = 'c:/qt/emsdk/tmp' compiler_engine = node_js js_engines = [node_js]复制代码 再重新运行即可：
d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -os -s wasm=1 -s side_module=1 -o hello.wasm cache:info: generating system asset: generated_struct_info.json... (this will be cached in c:\users\11266.emscripten_cache\wasm-obj-pic\generated_struct_info.json for subsequent builds) cache:info: - ok复制代码 3. 编写c/c++代码浏览器运行测试 （1）编写一个简单的c/c++代码
#include int main() { printf(hello world! \n); printf(webassembly 牛逼!\n); return 0; }复制代码 （2）使用emcc编译编译
d:>cd /d d:\linux-share-dir\tmp\webassembly_testcode d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -s wasm=1 -o3 -o hello-emcc.js d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -s wasm=1 -o3 -o hello-emcc.html复制代码 编译成功之后，在目录下会生成：js，html，wasm 等3个文件。
（3）开一个http服务器，测试网页运行效果
在当前编译目录，使用python开一个http服务器。
d:\linux-share-dir\tmp\webassembly_testcode>python -m http.server serving http on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...复制代码 打开edge浏览器(win10自带的浏览器)，输入http://127.0.1:8000。
选择hello-emcc.html文件打开。下面是运行效果。
也可以使用 emrun 命令来创建一个 http 协议的 web server 展示编译后的文件，和前面python命令的功能类似。
$ emrun --no_browser --port 8080复制代码 4. 编写c/c++代码给前端调用测试 （1）编写一个函数，用于测试调用
#include #include int func_square(int x) { return x * x; } int func_sum(int x, int y) { return x + y; } char* func_string(char* str) { return str; }复制代码 （2）编译成wasm文件
d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.c -os -s wasm=1 -s side_module=1 -o hello.wasm复制代码 （3）编写一个js文件。名称为: loader.js
function loadwebassembly(filename, imports = {}) { return fetch(filename) .then(response => response.arraybuffer()) .then(buffer => { imports.env = imports.env || {} object.assign(imports.env, { memorybase: 0, tablebase: 0, __memory_base: 0, __table_base: 0, memory: new webassembly.memory({ initial: 256, maximum: 256 }), table: new webassembly.table({ initial: 0, maximum: 0, element: 'anyfunc' }) }) return webassembly.instantiate(buffer, imports) }) .then(result => result.instance ) } function loadjs (url, imports = {}) { return fetch(url) .then(response => response.text()) .then(code => new function('imports', `return (${code})()`)) .then(factory => ({ exports: factory(imports) })) }复制代码 （4）编写一个html文件调用函数接口 : 例如: index.html
compile c to webassembly the test result can be found in console.
复制代码 （5）启动http服务器，访问测试。
python -m http.server复制代码 打开谷歌浏览器输入地址访问: http://127.0.0.1:8000/index.html
运行后，按下f12，查看控制台的输出。
注意：如果要反复修改html文件测试结果，浏览器最好打开无痕模式进行测试。
在浏览器里可以看到wasm转成wast文本格式的代码，从代码里可以看到导出的函数。
5. webassembly在线调试工具 地址：wasdk.github.io/wasmfiddle/
6. wasm2wast工具安装 wasm2wast这个工具是将 webassembly 二进制转换为 s-expressions。他是命令行工具，一个二进制文件作为输入，输出一个包含可以读文本的文件。开发者可以编辑文本文件，然后再将其转换为二进制文件，比如优化算法、追踪问题、插入调试语句等等。
地址： github.com/webassembly…
用法示例：
wast2wasm demo.wast -o demo.wasm wasm2wast demo.wasm -o demo.wast复制代码 7. emsdk常用命令介绍 （1）emcc -v 显示安装的版本号 （2）em++ -v 显示安装的版本号 （3）emsdk update 更新emssk库到最新版 （4）emsdk list --old 查看emsdk历史版本号列表 （5）emsdk list --old > sdklist.txt 将历史版本号写入到sdklist.txt文件中 （6）emsdk install 安装对应版本号的sdk tool 例如: emsdk install 1.39.7 （7）emsdk install latest 安装最新版本号的std tool （8）emsdk activate 激活对应版本号的std tool ，也就是设置当前使用的版本 例如:emsdk activate --embedded 1.39.7 --permanent （9）emsdk uninstall 卸载对应版本号的sdk tool （10）emsdk help 或者 emsdk --help 查看帮助复制代码 8. 总结
华为MateBook13i3版体验 到底怎么样
三星GalaxyS9集成三星最先进科技 搭载了Bixby人工智能平台
金立M7正式发布怎么样：金立M7外观、配置、性能很惊喜，价格2799值得拥有
中国已进入智慧城市规划和建设的高潮期
珠海紫燕无人飞行器将开源首款飞行平台生态系统
WebAssembly_Web运行CC++程序(win10)
怎样在AI领域领先
从数字经济如何来认识工业革命
格力从零起步做芯片不容易，入股安世半导体是合适的做芯片道路
Mate 30系列的全部供应商列表揭秘！
STWBC -MC无线充电发射器使参考设计具有高度可塑性
中科院计算所联合国内合作伙伴推出国产AI设计CPU
先进制造如何赋能汽车行业
韩国运营商表示5G的发展需要政府大力支持
庆科信息技术EMW5080简介
工业互联网疯长的背后是什么
新机卖到5000多，现在1300甩卖，这部手机真的很值
小米mix2配置彻底曝光：全是惊喜!小米mix2、iPhone8发布会仅隔一天,你会支持谁?
中国尖端科技看中关村，中关村尖端科技在中关村壹号
让每个人享受造物乐趣？米家3D打印机值得注意的二三事
wasm 是一个可移植、体积小、加载快并且兼容 web 的全新格式。
webassembly的中文官网：webassembly.org.cn/
来至官网的介绍：
webassembly 是由主流浏览器厂商组成的 w3c 社区团体 制定的一个新的规范。
高效 webassembly 有一套完整的语义，实际上 wasm 是体积小且加载快的二进制格式， 其目标就是充分发挥硬件能力以达到原生执行效率
安全 webassembly 运行在一个沙箱化的执行环境中，甚至可以在现有的 javascript 虚拟机中实现。在web环境中，webassembly将会严格遵守同源策略以及浏览器安全策略。
开放 webassembly 设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。
标准 webassembly 在 web 中被设计成无版本、特性可测试、向后兼容的。webassembly 可以被 javascript 调用，进入 javascript 上下文，也可以像 web api 一样调用浏览器的功能。当然，webassembly 不仅可以运行在浏览器上，也可以运行在非web环境下。
由于不同的计算机 cpu 架构不同，机器码标准有所差别，常见的架构有 x86、amd 64、arm，因此高级语言编译成可执行代码时需要指定目标架构。
webassembly 抹平了不同 cpu 架构的机器码，webassembly 的机器码不能放在任何一个平台上运行，但由于非常接近机器码，可以被非常快速的翻译为对应架构的机器码。因此，webassembly 的运行速度和机器码非常接近。
通过官网的介绍看出，webassembly技术的目的就是提高web端代码性能，总所周知c/c++语言的运行性能一直是天花板，许多 3d 游戏，大型图形编辑相关的工具软件都是用 c/c++ 语言写的，如果能把c/c++代码搬到web端运行，那么理论上可以大大提高web端的运行效率。
要使用webassembly技术，需要先安装emscripten编译器，这个emscripten编译器可以将 c/c++ 代码编译成 js 代码，但不是普通的 js，而是一种叫做 asm.js 的 javascript 变体。
在webassembly官网有介绍如何编译安装emscripten sdk，网站地址： webassembly.org.cn/getting-sta…
emscripten的官网也有详细介绍： emscripten.org/docs/gettin…
2. 安装emscripten编译器 官网上有步骤介绍，这里再把安装的步骤做个总结。
注： 当前是在win10 64 位环境下操作。
（1）需要先安装python环境，推荐安装python3.x，因为emscripten编译器里用到了python命令。
python环境安装看这里：
xiaolong.blog.csdn.net/article/det…
xiaolong.blog.csdn.net/article/det…
（2）安装git工具，因为需要使用git命令在线从仓库下载需要的文件。
git工具安装看这里：翻到git工具安装章节。
blog.csdn.net/xiaolong112…
（3）从github仓库下载编译器项目文件，选择一个英文目录，鼠标右键，打开git命令行。（安装完git工具后会自动关关键鼠标右键）
运行下面命令进行下载，过程中需要等待一段时间。
git clone https://github.com/emscripten-core/emsdk.git 复制代码 下载成功后，当前目录下会出现一个emsdk目录。
（4）在当前目录下的文件夹地址栏里输入cmd，按下回车，快速打开cmd命令终端。
输入命令进入到emdk目录下。
cd emsdk复制代码 （5）安装最新的sdk并激活，在当前命令行继续输入命令。 注: 安装要一点时间，需要耐心等待，具体速度看网络情况。
emsdk install latest emsdk activate latest --permanent复制代码 完成输出的过程：
c:\qt\emsdk>emsdk install latest installing sdk 'sdk-releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'.. skipped installing node-12.18.1-64bit, already installed. skipped installing python-3.7.4-pywin32-64bit, already installed. skipped installing java-8.152-64bit, already installed. installing tool 'releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'.. downloading: c:/qt/emsdk/zips/37fc7647c754ac9a28ad588c143b82286de0ef71-wasm-binaries.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/37fc7647c754ac9a28ad588c143b82286de0ef71/wasm-binaries.zip, 476624087 bytes unpacking 'c:/qt/emsdk/zips/37fc7647c754ac9a28ad588c143b82286de0ef71-wasm-binaries.zip' to 'c:/qt/emsdk/upstream' done installing tool 'releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'. running post-install step: npm ci ... running post-install step: npm install google-closure-compiler-windows done running: npm ci done installing sdk 'sdk-releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit'. c:\qt\emsdk>emsdk activate latest --permanent registering active emscripten environment permanently setting the following tools as active: node-12.18.1-64bit python-3.7.4-pywin32-64bit java-8.152-64bit releases-upstream-37fc7647c754ac9a28ad588c143b82286de0ef71-64bit setting environment variables: path = c:\qt\emsdk;c:\qt\emsdk\node\12.18.1_64bit\bin;c:\qt\emsdk\python\3.7.4-pywin32_64bit;c:\qt\emsdk\java\8.152_64bit\bin;c:\qt\emsdk\upstream\emscripten;c:\users\11266\appdata\local\programs\python\python38-32\scripts;c:\users\11266\appdata\local\programs\python\python38-32;%userprofile%\appdata\local\microsoft\windowsapps;c:\users\11266\appdata\local\programs\microsoft vs code\bin;c:\mingw\i686-8.1.0-release-posix-dwarf-rt_v6-rev0\mingw32\bin;c:\opencv_3.4.7\opencv-mingw-build-opencv-3.4.7\x86\mingw\bin;%userprofile%.dotnet\tools;c:\ffmpeg\ffmpeg_x86_4.2.2\bin;c:\ffmpeg\ffmpeg_x86_x64_3.3.2\bin;c:\users\11266\appdata\roaming\npm global environment variables up to date复制代码 （6）在命令行输入em++ -v测试编译器是否安装成功。
出现以下提示，表示编译器已经安装成功。
c:\qt\emsdk>emcc -v emcc (emscripten gcc/clang-like replacement + linker emulating gnu ld) 2.0.10 clang version 12.0.0 (cswircachegitchromium.googlesource.com-external-github.com-llvm-llvm--project 445289aa63e1b82b9eea6497fb2d0443813a9d4e) target: x86_64-pc-windows-msvc thread model: posix installeddir: c:/qt/emsdk/upstream/bin shared:info: (emscripten: running sanity checks) c:\qt\emsdk>em++ -v emcc (emscripten gcc/clang-like replacement + linker emulating gnu ld) 2.0.10 clang version 12.0.0 (cswircachegitchromium.googlesource.com-external-github.com-llvm-llvm--project 445289aa63e1b82b9eea6497fb2d0443813a9d4e) target: x86_64-pc-windows-msvc thread model: posix installeddir: c:/qt/emsdk/upstream/bin shared:info: (emscripten: running sanity checks) c:\qt\emsdk>复制代码 （7）这时可以先关闭当前终端，再重新开一个新终端，运行emcc或者em++查看帮助，会出现以下提示。
c:\users\11266>cd /d d:\linux-share-dir\tmp\webassembly_testcode d:\linux-share-dir\tmp\webassembly_testcode>emcc -help ============================================================================== welcome to emscripten! this is the first time any of the emscripten tools has been run. a settings file has been copied to ~/.emscripten, at absolute path: c:\users\11266.emscripten it contains our best guesses for the important paths, which are: llvm_root = /usr/bin node_js = c:\program files\nodejs\node.exe emscripten_root = c:\qt\emsdk\upstream\emscripten please edit the file if any of those are incorrect. this command will now exit. when you are done editing those paths, re-run it. ==============================================================================复制代码 打开当前系统的用户目录，会看到一个.emscripten文件。这个文件里存放了编译器需要的环境变量和路径。
如果后续运行emcc或者em++命令编译程序时报错，例如：
d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -os -s wasm=1 -s side_module=1 -o hello.wasm shared:error: binaryen_root is set to empty value in c:\users\11266/.emscripten d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -os -s wasm=1 -s side_module=1 -o hello.wasm cache:info: generating system asset: is_vanilla.txt... (this will be cached in c:\users\11266.emscripten_cache\is_vanilla.txt for subsequent builds) shared:error: llc executable not found at `c:\users\11266/upstream/bin\llc.exe`复制代码 解决办法：将.emscripten文件里的所有路径改成绝对路径。
例如：原来的路径
import os emsdk_path = os.path.dirname(os.environ.get('em_config')).replace('\', '/') node_js = emsdk_path + '/node/12.18.1_64bit/bin/node.exe' python = emsdk_path + '/python/3.7.4-pywin32_64bit/python.exe' java = emsdk_path + '/java/8.152_64bit/bin/java.exe' llvm_root = emsdk_path + '/upstream/bin' binaryen_root = emsdk_path + '/upstream' emscripten_root = emsdk_path + '/upstream/emscripten' temp_dir = emsdk_path + '/tmp' compiler_engine = node_js js_engines = [node_js]复制代码 修改后的配置文件路径:
import os node_js = 'c:/qt/emsdk/node/12.18.1_64bit/bin/node.exe' python = 'c:/qt/emsdk/python/3.7.4-pywin32_64bit/python.exe' java = 'c:/qt/emsdk/java/8.152_64bit/bin/java.exe' llvm_root = 'c:/qt/emsdk/upstream/bin' binaryen_root = 'c:/qt/emsdk/upstream' emscripten_root = 'c:/qt/emsdk/upstream/emscripten' temp_dir = 'c:/qt/emsdk/tmp' compiler_engine = node_js js_engines = [node_js]复制代码 再重新运行即可：
d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -os -s wasm=1 -s side_module=1 -o hello.wasm cache:info: generating system asset: generated_struct_info.json... (this will be cached in c:\users\11266.emscripten_cache\wasm-obj-pic\generated_struct_info.json for subsequent builds) cache:info: - ok复制代码 3. 编写c/c++代码浏览器运行测试 （1）编写一个简单的c/c++代码
#include int main() { printf(hello world! \n); printf(webassembly 牛逼!\n); return 0; }复制代码 （2）使用emcc编译编译
d:>cd /d d:\linux-share-dir\tmp\webassembly_testcode d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -s wasm=1 -o3 -o hello-emcc.js d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.cpp -s wasm=1 -o3 -o hello-emcc.html复制代码 编译成功之后，在目录下会生成：js，html，wasm 等3个文件。
（3）开一个http服务器，测试网页运行效果
在当前编译目录，使用python开一个http服务器。
d:\linux-share-dir\tmp\webassembly_testcode>python -m http.server serving http on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...复制代码 打开edge浏览器(win10自带的浏览器)，输入http://127.0.1:8000。
选择hello-emcc.html文件打开。下面是运行效果。
也可以使用 emrun 命令来创建一个 http 协议的 web server 展示编译后的文件，和前面python命令的功能类似。
$ emrun --no_browser --port 8080复制代码 4. 编写c/c++代码给前端调用测试 （1）编写一个函数，用于测试调用
#include #include int func_square(int x) { return x * x; } int func_sum(int x, int y) { return x + y; } char* func_string(char* str) { return str; }复制代码 （2）编译成wasm文件
d:\linux-share-dir\tmp\webassembly_testcode>emcc hello.c -os -s wasm=1 -s side_module=1 -o hello.wasm复制代码 （3）编写一个js文件。名称为: loader.js
function loadwebassembly(filename, imports = {}) { return fetch(filename) .then(response => response.arraybuffer()) .then(buffer => { imports.env = imports.env || {} object.assign(imports.env, { memorybase: 0, tablebase: 0, __memory_base: 0, __table_base: 0, memory: new webassembly.memory({ initial: 256, maximum: 256 }), table: new webassembly.table({ initial: 0, maximum: 0, element: 'anyfunc' }) }) return webassembly.instantiate(buffer, imports) }) .then(result => result.instance ) } function loadjs (url, imports = {}) { return fetch(url) .then(response => response.text()) .then(code => new function('imports', `return (${code})()`)) .then(factory => ({ exports: factory(imports) })) }复制代码 （4）编写一个html文件调用函数接口 : 例如: index.html
compile c to webassembly the test result can be found in console.
复制代码 （5）启动http服务器，访问测试。
python -m http.server复制代码 打开谷歌浏览器输入地址访问: http://127.0.0.1:8000/index.html
运行后，按下f12，查看控制台的输出。
注意：如果要反复修改html文件测试结果，浏览器最好打开无痕模式进行测试。
在浏览器里可以看到wasm转成wast文本格式的代码，从代码里可以看到导出的函数。
5. webassembly在线调试工具 地址：wasdk.github.io/wasmfiddle/
6. wasm2wast工具安装 wasm2wast这个工具是将 webassembly 二进制转换为 s-expressions。他是命令行工具，一个二进制文件作为输入，输出一个包含可以读文本的文件。开发者可以编辑文本文件，然后再将其转换为二进制文件，比如优化算法、追踪问题、插入调试语句等等。
地址： github.com/webassembly…
用法示例：
wast2wasm demo.wast -o demo.wasm wasm2wast demo.wasm -o demo.wast复制代码 7. emsdk常用命令介绍 （1）emcc -v 显示安装的版本号 （2）em++ -v 显示安装的版本号 （3）emsdk update 更新emssk库到最新版 （4）emsdk list --old 查看emsdk历史版本号列表 （5）emsdk list --old > sdklist.txt 将历史版本号写入到sdklist.txt文件中 （6）emsdk install 安装对应版本号的sdk tool 例如: emsdk install 1.39.7 （7）emsdk install latest 安装最新版本号的std tool （8）emsdk activate 激活对应版本号的std tool ，也就是设置当前使用的版本 例如:emsdk activate --embedded 1.39.7 --permanent （9）emsdk uninstall 卸载对应版本号的sdk tool （10）emsdk help 或者 emsdk --help 查看帮助复制代码 8. 总结
华为MateBook13i3版体验 到底怎么样
三星GalaxyS9集成三星最先进科技 搭载了Bixby人工智能平台
金立M7正式发布怎么样：金立M7外观、配置、性能很惊喜，价格2799值得拥有
中国已进入智慧城市规划和建设的高潮期
珠海紫燕无人飞行器将开源首款飞行平台生态系统
WebAssembly_Web运行CC++程序(win10)
怎样在AI领域领先
从数字经济如何来认识工业革命
格力从零起步做芯片不容易，入股安世半导体是合适的做芯片道路
Mate 30系列的全部供应商列表揭秘！
STWBC -MC无线充电发射器使参考设计具有高度可塑性
中科院计算所联合国内合作伙伴推出国产AI设计CPU
先进制造如何赋能汽车行业
韩国运营商表示5G的发展需要政府大力支持
庆科信息技术EMW5080简介
工业互联网疯长的背后是什么
新机卖到5000多，现在1300甩卖，这部手机真的很值
小米mix2配置彻底曝光：全是惊喜!小米mix2、iPhone8发布会仅隔一天,你会支持谁?
中国尖端科技看中关村，中关村尖端科技在中关村壹号
让每个人享受造物乐趣？米家3D打印机值得注意的二三事