四川住建厅官方网站的网址,wordpress评论vip,个人简历免费制作网站,网站建设收费标准渠道文章目录 开发环境demo简单介绍实践出真知各个文件内容CMakeLists.txtmain.cpp cmake 编译结果 遇到问题错误1#xff1a;both async and sync fetching of the wasm failedvscode安装Preview on Web Server插件 最近因为项目原因#xff0c;研究了一下WebAssembly。2015年上… 文章目录 开发环境demo简单介绍实践出真知各个文件内容CMakeLists.txtmain.cpp cmake 编译结果 遇到问题错误1both async and sync fetching of the wasm failedvscode安装Preview on Web Server插件 最近因为项目原因研究了一下WebAssembly。2015年上线与JS、HTML、CSS并称web界四语言额虽然已经上线快10年但是研究的人好少注定这个探索之路是崎岖的。事实也是这样已经耗进去快2周了人都麻了-_-|| 这是刚开始一个不太顺利的demo
按照这位大佬的文章快速上手WebAssembly应用开发Emscripten使用入门纯纯javaer看不懂仔细研读了n遍才看懂里面的代码目录。。。 开发环境
为啥要把开发环境放在第一位呢这里面也是采了无数的坑。
开发工具版本Ubuntu18.04emscripten3.1.55cmake3.28.3
demo简单介绍
纯hello world引入了第三方库也是下载到了本地最后编译出来的一个简单demo
实践出真知
如下
┌─demo 项目名称
│─thirdparty 第三方依赖库集合
│ └─cJson cJson库(https://github.com/DaveGamble/cJSON)
│ │ └─cJSON.c 来源github
│ │ └─cJSON.h 来源github
│ │ └─CMakeLists.txt
├─main.cpp 主入口
├─CMakeLists.txt 各个文件内容
CMakeLists.txt
主目录的CmakeLists文件
cmake_minimum_required(VERSION 3.8) # 根据你的需求进行修改
project(sample )include_directories(thirdparty) # 使得我们能引用第三方库的头文件set(CMAKE_EXECUTABLE_SUFFIX .html) # 编译生成.htmladd_subdirectory(thirdparty/cJSON)add_executable(sample main.cpp)# 设置Emscripten的编译链接参数我们等等会讲到一些常用参数
target_link_libraries(sample cjson) # 将第三方库与主程序进行链接 set_target_properties(sample PROPERTIES LINK_FLAGS -s EXIT_RUNTIME1 -s EXPORTED_FUNCTIONS\[_json_parse]\)子目录的CmakeLists文件
# CMakeLists.txt in the subdirectory# 添加源文件
add_library(cjson cJSON.c)main.cpp
#include stdio.h
#include cJSON/cJSON.hint json_parse(const char *jsonstr) {cJSON *json cJSON_Parse(jsonstr);const cJSON *data cJSON_GetObjectItem(json, data);printf(%s\n, cJSON_GetStringValue(data));cJSON_Delete(json);return 0;
}cmake 编译
在demo项目目录下创建build文件夹并进入执行emcmake cmake ..命令生成MakeFile执行emmake make命令生成sample.html, sample.js和sample.wasm mkdir buildcd buildemcmake cmake ..emmake make最终目录结构如下
┌─demo 项目名称
│─build 编译文件(emcmake和emmake后的产物)
│ └─CMakeFile
│ │ └─...
│ └─thirdparty
│ │ └─...
│ └─cmake_install.cmake
│ └─CMakeCache.txt
│ └─Makefile
│ └─sample.html
│ └─sample.js
│ └─sample.wasm
│─thirdparty 第三方依赖库集合
│ └─cJson cJson库(https://github.com/DaveGamble/cJSON)
│ │ └─cJSON.c 来源github
│ │ └─cJSON.h 来源github
│ │ └─CMakeLists.txt
├─main.cpp 主入口
├─CMakeLists.txt 结果
在Console上打印Module发现其中的_json_parse函数了
遇到问题
错误1both async and sync fetching of the wasm failed
需要通过http服务器运行html 这位博主发表的文章中说明了原因WASM_WebAssembly简单运行-helloworld
1.浏览器上运行接从本地硬盘打开生成的 HTML 文件hello.html例如 file://your_path/hello.html你会得到一个错误信息大意是 both async and sync fetching of the wasm failed。你需要通过 HTTP 服务器http://运行你的 HTML 文件——参见如何设置本地测试服务器获取更多信息。2.非浏览器上运行浏览器以外运行 .wasm 程序系统需要提供一个 wasm 运行环境 (runtime)对嵌入式的 wasm-micro-runtime 了简称为 WAMR云服务的运行环境现在比较主流的是 wasmer 和 wasmtime3.浏览器运行说明 HTML文件直接在浏览器打开和本地服务器localhost打开有什么区别最直接的区别很容易注意到一个是file协议另一个是http协议。 http请求方式则是通过假架设一个web服务器解析http协议的请求然后向浏览器返回资源信息。我们所开发的html文件最后必定是会以网页的形式部署在服务器上访问服务器上的html文件是以http的协议方式去打开有网络交互。直接打开html文件是以file协议的方式去打开没有网络交互 启动http服务01.Python自带一个微型的http服务可以通过命令行启动:python3 -m http.server 然后这个服务启动后在浏览器输入localhost:8000即可。显示的内容是基于你启动服务时所在的路径下的文件。http.server 不推荐用于生产环境。它仅仅实现了 basic security checks 的要求。可用性: 非 Emscripten非 WASI。此模块在 WebAssembly 平台 wasm32-emscripten 和 wasm32-wasi 上不适用或不可用02. http-server 启动一个静态服务器只负责当前目录的文件路由http-servernpm i http-server -gNPM的全称是Node Package Manager是一个NodeJS包管理和分发工具已经成为了非官方的发布Node模块包的标准 注意http-server 和http.server的不同vscode安装Preview on Web Server插件
对于不会启动前端demo的开发者vscode的Preview on Web Server插件真的很棒选中html文件右键就可以选择在浏览器或者侧边栏打开预览棒棒哒啊~
