环境：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. LeetCode118. Pascal's Triangle 杨辉三角

    题目 给定行数,生成对应的杨辉三角 思考 同一行是对称的,最大的下标为(行数+1)/2;1,1,2,3,6;下标从0开始,则对应分别为0.0.1.1.2.2 对于第偶数行,个数也是偶数,对于奇数行,个 ...

  2. ORA-14450: 试图访问已经在使用的事务处理临时表

    需要对临时表动态添加列,经常碰到表在事务中被使用的情况,如果可以的话,可以现在只用临时表的时候先truncate,这样可以终止事务对当前临时表的占用. execute immediate('trunc ...

  3. 【python】QT5 cvimg 转 pixmap

    自己乱搞了一个 import cv2 from PIL import Image imageRGB = cv2.cvtColor(img, cv2.COLOR_BGR2RGB) im = Image. ...

  4. Exponential family of distributions

    目录 定义 性质 极大似然估计 最大熵 例子 Bernoulli 指数分布 正态分布 Choi H. I. Lecture 4: Exponential family of distributions ...

  5. WEB文档在线预览解决方案

    web页面无法支持预览office文档,但是却可以预览PDF.flash文档,所以大多数解决方案都是在服务端将office文档转换为pdf,然后再通过js的pdf预览插件(谷歌浏览器等已经原生支持嵌入 ...

  6. 使用 JavaScript 根据消费金额和消费者是否为会员确定折扣，最终核算实际应该支付的金额

    查看本章节 查看作业目录 需求说明: 根据消费金额和消费者是否为会员确定折扣,最终核算实际应该支付的金额 消费金额在 200 元以上的会员折扣是 7.5 折,消费金额没有达到 200 元的会员折扣是 ...

  7. 【MySQL作业】DDL 和 DML——美和易思使用 DML 删除表数据应用习题

    点击打开所使用到的数据库>>> 删除客户"刘一鸣". 执行 SQL 代码"delete from customer where cName=' 刘一鸣 ...

  8. 简单通俗讲解 android 内存泄漏

    在柠檬班社区看到老师一篇android 内存泄漏写的通俗易懂,绝对是小白能看懂的! 原文:http://www.lemfix.com/topics/2 平常会听到程序员说"内存泄漏" ...

  9. 如何检入空文件夹到GitHub

    Git 有一个古怪的特性,就是会忽略本地的空文件夹,而不予以检入(check in). 怎样解决呢?办法就是在空文件夹下放置一个 .gitignore 文件.该文件内容以下: # Ignore eve ...

  10. SQL高级优化（三）之存储引擎

    一.MySQL数据库引擎简介 1. ISAM(indexed Sequential Access Method) ​ ISAM 是一个定义明确且历经时间考验的数据表格管理方法,它在设计之时就考虑到数据 ...