Emscripten + CMakeLists.txt 将 C++ 项目编译成 WebAssembly(.wasm)/js,并编译 Html 测试
背景:Web 端需要使用已有的 C++ 库(使用 CMake 编译),需要将 C++ 项目编译成 WebAssembly(.wasm) 供 js 调用。
上篇文章《Mac 上安装 Emscripten》 已讲解如何安装配置 Emscripten 环境。
本篇文章主要讲解如何将基于 CMakeLists 配置的 C++ 项目编译成 WebAssembly 库来供 Web 前端使用。编译结果会生成 .wasm、.js,测试代码会生成 .wasm、.js、.html。
一、构建基于 CMakeList 的 C++ 库及测试 Demo 工程
目录结构如下:
二、编译项目库及测试 Demo
执行脚本 ./build_web.sh 记得给执行权限:chmod +x build_web.sh
脚本主要执行以下操作:
emcmake cmake -B build/web
emmake make
emcc libtest_lib.a -o libtest_lib.js
编译输出结果如下:

输出的 test_lib 库,在 cmake_demo/build/libs/web 目录下
输出的测试 demo,在 cmake_demo/build/web 目录下
三、测试
3.1 启动 Server
要在本地浏览器测试 .wasm 需要启动 server,否则报错,具体原因上篇文章《Mac 上安装 Emscripten》 有说明。
进入到 cmake_demo/build/web 所在目录执行 python -m http.server 9090 启动服务。
3.2 在浏览器测试
在浏览器地址栏输入:
http://localhost:9090/test_main.html
可以看到如下结果:
与 main.cpp 里的函数调用预期结果一致。
四、所有涉及的代码及编译脚本
math_test.h 代码如下:
只有两个函数:test_add、test_sub
/*** Author: AlanWang4523.* Date: 2023/10/31 16:08.* Mail: alanwang4523@gmail.com*/#ifndef CMAKEDEMO_MATH_TEST_H
#define CMAKEDEMO_MATH_TEST_H#ifdef __cplusplus
extern "C" {
#endifint test_add(int a, int b);
int test_sub(int a, int b);#ifdef __cplusplus
}
#endif#endif //CMAKEDEMO_MATH_TEST_H
math_test.cpp 代码如下:
/*** Author: AlanWang4523.* Date: 2023/10/31 16:08.* Mail: alanwang4523@gmail.com*/#include "math_test.h"#ifdef __cplusplus
extern "C" {
#endifint test_add(int a, int b) {return a + b;
}int test_sub(int a, int b) {return a - b;
}#ifdef __cplusplus
}
#endif
test_lib/CMakeLists.txt 代码如下:
include_directories(./)
include_directories(inc)
AUX_SOURCE_DIRECTORY(src DIR_TONE_CHANGE_SRCS)
add_library(test_lib ${DIR_TONE_CHANGE_SRCS})
math.cpp 代码如下:
#include <iostream>
#include "test_lib/inc/math_test.h"int main(int argc, const char * argv[]) {std::cout << "Hello AlanWang4523\n";int ret = test_add(1, 2);std::cout << "test_add: 1 + 2 = " << ret << "\n" ;ret = test_sub(3, 2);std::cout << "test_sub: 3 - 2 = " << ret << "\n" ;return 0;
}
CMakeLists.txt 代码如下:
cmake_minimum_required(VERSION 3.6)
project(test_main)
set(LIBRARY_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/lib)
set(CMAKE_CXX_STANDARD 11)include_directories(./ test_lib test_lib/inc)
add_subdirectory(test_lib)set(CMAKE_EXECUTABLE_SUFFIX ".html") # 编译生成.htmladd_executable(test_main main.cpp)
target_link_libraries(test_main test_lib)
build_web.sh 编译脚本如下:
#!/bin/sh# @Time : 2023-10-31 16:59
# @Author : AlanWang
# @FileName: build_web.shOUTPUT_LIBS="./build/libs/web"function build_for_webassembly() {BUILD_DIR="./build/web"PRE_EXE_DIR=$(pwd)echo ${PRE_EXE_DIR}emcmake cmake \-H"./" \-B"${BUILD_DIR}" \-DCMAKE_LIBRARY_OUTPUT_DIRECTORY="./build/web/libs/" \-DCMAKE_BUILD_TYPE="Release"cd ${BUILD_DIR}emmake makecd ${PRE_EXE_DIR}mkdir -p ${OUTPUT_LIBS}/mv ${PRE_EXE_DIR}/lib/* ${OUTPUT_LIBS}/
# rm -r ./build/webTARGET_NAME=""for file in $(ls ${OUTPUT_LIBS})doif [ "${file##*.}" == "a" ]; thenTARGET_NAME=${file%.*}breakfidoneecho "AlanTest::=====>>TARGET_NAME: ${TARGET_NAME}"emcc -s ALLOW_MEMORY_GROWTH=1 ${OUTPUT_LIBS}/${TARGET_NAME}.a -o ${OUTPUT_LIBS}/${TARGET_NAME}.js
}build_for_webassembly
相关文章:
Emscripten + CMakeLists.txt 将 C++ 项目编译成 WebAssembly(.wasm)/js,并编译 Html 测试
背景:Web 端需要使用已有的 C 库(使用 CMake 编译),需要将 C 项目编译成 WebAssembly(.wasm) 供 js 调用。 上篇文章《Mac 上安装 Emscripten》 已讲解如何安装配置 Emscripten 环境。 本篇文章主要讲解如何将基于 CMakeLists 配…...
MATLAB中preparets函数用法
目录 语法 说明 示例 准备开环和闭环网络的数据 preparets函数的功能是为网络模拟或训练准备输入和目标时间序列数据 语法 [Xs,Xi,Ai,Ts,EWs,shift] preparets(net,Xnf,Tnf,Tf,EW) 说明 [Xs, Xi, Ai, Ts, EWs, shift] preparets(net, Xnf, Tnf, Tf, EW) 这个函数接受…...
ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南续篇
作者:运维有术 前言 知识点 定级:入门级KubeKey 安装部署 ARM 版 KubeSphere 和 KubernetesARM 版 KubeSphere 和 Kubernetes 常见问题 实战服务器配置 (个人云上测试服务器) 主机名IPCPU内存系统盘数据盘用途ks-master-1172.16.33.1661650200KubeSp…...
react官网
应急方案 – React 中文文档 (docschina.org) 正版卡死版 Hooks FAQ – React (reactjs.org) 英文流畅版 应急方案 – React 中文网 (nodejs.cn) 盗版流畅版(翻译有稍稍的问题) http://www.react-cn.com/index.html 黄版...
前端css介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。 CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和…...
MySql创建索引
在MySQL中,可以使用CREATE INDEX语句来创建索引。以下是创建索引的基本语法: CREATE INDEX index_name ON table_name (column1, column2, ...);其中,index_name是索引的名称,可以自定义(也可以不指定索引名称&#x…...
前后端分离vue+springboot家庭理财账单财务管理系统
项目介绍: 该系统能够管理家庭收入支出,并且能直观得表现收支状态。主要功能包括用户管理、收支管理、财务管理、统计收支情况等功能。 技术栈: 后端: SpringBoot,Sa-Token,MyBatis-Plus,MyB…...
LeetCode:2003. 每棵子树内缺失的最小基因值(C++)
目录 2003. 每棵子树内缺失的最小基因值 题目描述: 实现代码与解析: dfs 启发式合并 原理思路: 2003. 每棵子树内缺失的最小基因值 题目描述: 有一棵根节点为 0 的 家族树 ,总共包含 n 个节点,节点编…...
React Hooks之useContext使用
官方文档写道:在组件的顶层调用 useContext 来读取和订阅 context。 我理解就是一个“全局变量”的概念。它可以用来声明一个变量,然后在各个组件中使用,避免了props一级一级往下传,当然使用场景有限,比如设置一个主题…...
多模态对比语言图像预训练CLIP:打破语言与视觉的界限
项目设计集合(人工智能方向):助力新人快速实战掌握技能、自主完成项目设计升级,提升自身的硬实力(不仅限NLP、知识图谱、计算机视觉等领域):汇总有意义的项目设计集合,助力新人快速实…...
使用s3cmd访问S3存储 -【真实案例】
背景 项目中使用到了 S3 存储(基于华为云 OBS),并且在应用服务器上开通了到 S3 存储的防火墙。 👉 目标:在应用服务器上验证 S3 存储是否通畅可用。 👉 选型:经过分析,发现在 Linux 下可以使用 s3cmd 来访问 S3 存储。 s3cmd 简介 s3cmd 是一个开源免费的、基于 P…...
51单片机复位电容计算与分析(附带Proteus电路图)
因为iC x (dU/dt).在上电瞬间,U从0变化到U,所以这一瞬间就是通的,然后这就是一个直流回路,因为电容C直流中是断路的,所以就不通了。 然后来分析一下这个电容的电压到底是能不能达到单片机需要的复位电压。 这是一个线性电容&…...
前端性能瓶颈崩溃项目?Webpack助力解决!
🎬 江城开朗的豌豆:个人主页 🔥 个人专栏 :《 VUE 》 《 javaScript 》 📝 个人网站 :《 江城开朗的豌豆🫛 》 ⛺️ 生活的理想,就是为了理想的生活 ! 目录 ⭐ 专栏简介 📘 文章引言 一、背…...
纷享销客BI,助力企业激活数据价值,科学企业决策
10月25日上午,国家数据局正式挂牌成立,这标志着我国数字经济发展将进入新的发展阶段,也将有力促进数据要素技术创新、开发利用和有效治理,以数据强国支撑数字中国的建设。伴随数据作为企业新的生产要素的意义不断凸显,…...
SpringBoot整合阿里云OSS对象存储
文章目录 1、OSS介绍及开通1.1、阿里云OSS简介1.2、开通OSS 2、创建存储空间bucket及密钥获取2.1、创建存储空间2.2、获取密钥 3、OSS快速入门案例4、在springboot项目中整合4.1、将oss配置放到yml文件中4.2、创建Oss属性类,接收yml文件中的属性4.3、封装文件上传功…...
【ES专题】ElasticSearch快速入门
目录 前言从一个【搜索】说起 阅读对象阅读导航笔记正文一、全文检索1.1 什么是【全文检索】1.2 【全文检索】原理1.3 什么是倒排索引 二、ElasticSearch简介2.1 ElasticSearch介绍2.2 ElasticSearch应用场景2.3 数据库横向对比 三、ElasticSearch环境搭建3.1 Windows下安装3.2…...
案例分析真题-质量属性
案例分析真题-质量属性 2009 年真题 【问题1】 【问题2】 2011 年真题 【问题1】 骚戴理解:首先要知道这样的题目没有可靠性,只有可用性,更没有容错性,这里我(3)写成了i,而不是f,仔…...
微信小程序面试题之理论篇
本文内容,来源于极客学院的分享,这里只做引用。 说说你对微信小程序的理解?优缺点? 背景 小程序与H5 优缺点 优点:缺点: 说说微信小程序的生命周期函数有哪些? 应用的生命周期页面的生命期组件的生命周期执行过程 应…...
C++前缀和算法的应用:统计上升四元组
C前缀和算法的应用:统计上升四元组 本文涉及的基础知识点 C算法:前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 题目 给你一个长度为 n 下标从 0 开始的整数数组 nums ,它包含 1 到 n 的所有数字,请你返回上…...
华泰证券:新奥能源:零售气待恢复,泛能与智家仍是亮点
来源:猛兽财经 作者:猛兽财经 猛兽财经获悉,由于新奥能源(02688)发布三季度经营数据: 1-3Q23:天然气零售量yoy-4.7%,燃气批发量yoy17.6%,综合能源销量yoy34.2%ÿ…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
大数据学习(132)-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏: 👑哲学语录: 用力所能及,改变世界。 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言Ǵ…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...
C++_哈希表
本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说,直接开始吧! 一、基础概念 1. 哈希核心思想: 哈希函数的作用:通过此函数建立一个Key与存储位置之间的映射关系。理想目标:实现…...
