环境：centos 7.9

1、准备环境

sudo yum install docker

sudo systemctl start docker.service

sudo docker pull trzeci/emscripten:latest

2、编写C++源文件

//main.cpp

#include<stdio.h>

#include<string>

#include<cstring>

#ifdef __EMSCRIPTEN__

#include<emscripten.h>

#endif

int main()

{

  return 0;

}

extern "C"{

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  int add(int x,int y)

  {

    return x + y;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  int min(int x,int y)

  {

    return x -y;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  char* get(char* a)

  {

    return a;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  char* data(char* a)

  {

    *a = '\0';

    char name[] = "hello from native code.";

    strcat(a,name);

    return a;

  }

#ifdef __EMSCRIPTEN__

  EMSCRIPTEN_KEEPALIVE

#endif

  int get_data(char* name,int lenth,char* onoutput)

  {

    char str[260]={0};

    sprintf(str,"name:%s,lenth:%d,from native code.",name,lenth);

    strcpy(onoutput,str);

    return strlen(str);

  }

}

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

sudo docker run -ti 7634ecdacf21 /bin/bash

编译指令：

emcc main.cpp -o main.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap','UTF8ToString']

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

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>

    <button onclick="fun_data()">data</button>

    <button onclick="fun_get_data()">get_data</button>

    <div id="log"></div>

    <script>

      function fun_add()

      {

        const add=Module.cwrap('add','number',['number,number']);

        log.innerHTML=("add(12,5)的计算结果:" + add(12, 5));

      }

      function fun_min()

      {

        const min=Module.cwrap('min','number',['number','number']);

        log.innerHTML=("min(12,5)的计算结果:" + min(12, 5));

      }

      function fun_get()

      {

        const get = Module.cwrap('get','string',['string']);

        log.innerHTML=get('汉语-hanyu-demo!');

      }

      function fun_data()

      {

        const data = Module.cwrap('data','string',['string']);

        log.innerHTML=data('');

      }

      function fun_get_data()

      {

        let onoutput="";

        const pointer = Module._malloc(256);

        const get_data = Module.ccall('get_data','number',['string','number','number'],['hello from web',129,pointer]);

        onoutput = Module.UTF8ToString(pointer);

        log.innerHTML=onoutput;

        Module._free(pointer)

      }

    </script>

    <script src="democpp.js"></script>

  </body>

</html>

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

WebAssembly编译的更多相关文章

  1. 对于WebAssembly编译出来的.wasm文件js如何调用

    WebAssembly也叫浏览器字节码技术 这里就不过多的解释了网上很多介绍 主要是让大家知道在js里面如何调用执行它,我之前看WebAssemblyAPI时候反正是看得一脸懵逼 也是为了大家能更快的 ...

  2. 初探WebAssembly

    1.前言 参加完2018年上海的QCon大会,想到了会议中来自Microsoft的朱力旻大佬讲的WebAssembly,感触颇深. 我之前完全没有了解过WebAssembly,之前没有了解的原因也很简 ...

  3. WebAssembly 介绍

    http://blog.csdn.net/zhangzq86/article/details/61195685 WebAssembly 的出现是不是意味着 Javascript 要完? https:/ ...

  4. WebAssembly，Web的新时代

    在浏览器之争中,Chrome凭借JavaScript的卓越性能取得了市场主导地位,然而由于javascript的无类型特性,导致其运行时消耗大量的性能做为代价,这也是JavaScript的瓶颈之一.W ...

  5. 纵论WebAssembly,JS在性能逆境下召唤强援

    webassembly的作用 webassembly是一种底层的二进制数据格式和一套可以操作这种数据的JS接口的统称.我们可以认为webassembly的范畴里包含两部分 wasm: 一种体积小.加载 ...

  6. 在Windows10搭建WebAssembly开发环境

    最近研究WebAssembly技术,准备用WebAssembly编译C/C++代码供前端调用.网上看了很多文章,收获很大,现在就遇到的问题做一个记录. 官网关于windows开发环境搭建基本上几句话, ...

  7. shell 中长命令的换行处理

    考察下面的脚本: emcc -o ./dist/test.html --shell-file ./tmp.html --source-map-base dist -O3 -g4 --source-ma ...

  8. Linux 一条长命令占用多行

    前言 考察下面的脚本: ? 1 emcc -o ./dist/test.html --shell-file ./tmp.html --source-map-base dist -O3 -g4 --so ...

  9. Blazor带我重玩前端(一)

    写在前面 曾经我和前端朋友聊天的时候,我说我希望有一天可以用C#写前端,不过当时更多的是美好的想象,而现在这一切正变得真实…… 什么是Blazor 我们知道浏览器可以正确解释并执行JavaScript ...

随机推荐

  1. Codeforces629 C. Famil Door and Brackets

    C. Famil Door and Brackets time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  2. Monkey工具之fastbot-iOS实践

    Monkey工具之fastbot-iOS实践 背景 目前移动端App上线后 crash 率比较高, 尤其在iOS端.我们需要一款Monkey工具测试App的稳定性,更早的发现crash问题并修复. 去 ...

  3. 【C\C++笔记】指针输出字符串

    1错误代码 #include<stdio.h> int main(){ char a[]="hello"; char *p=a; for(int i=0;i<5; ...

  4. linux系统安装java

    1.下载Java压缩包 *.gz 2.解压 3.修改Linux配置文件,配置Java环境变量 4.使用命令source /etc/profile让修改生效 转载 https://www.cnblogs ...

  5. Java程序设计基础笔记 • 【第4章 条件结构】

    全部章节   >>>> 本章目录 4.1 条件结构 4.1.1 程序流程控制 ​4.1.2 单分支if结构 4.1.3 双分支if结构 4.1.4 实践练习 4.2 多重条件结 ...

  6. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  7. JDBC编程工具类 Dbconnection

    JDBC基础:https://blog.csdn.net/weixin_44893902/article/details/106746880 Dbconnection工具类(包含了连接,增删改查,关闭 ...

  8. JAVA之G1垃圾回收器

    概述 G1 GC,全称Garbage-First Garbage Collector,通过-XX:+UseG1GC参数来启用,作为体验版随着JDK 6u14版本面世,在JDK 7u4版本发行时被正式推 ...

  9. JAVA多线程之并发编程三大核心问题

    概述 并发编程是Java语言的重要特性之一,它能使复杂的代码变得更简单,从而极大的简化复杂系统的开发.并发编程可以充分发挥多处理器系统的强大计算能力,随着处理器数量的持续增长,如何高效的并发变得越来越 ...

  10. SRC(不定期更新)

    主域名收集 响应包 Content-Security-Policy-Report-Only