MDN 就是通过编译器编译完成c后生成的胶水代码 引入js 就能直接调用定义在c或者c++中的函数了

c代码如下:

　　

#include <stdio.h>

#include <stdlib.h>

#include <time.h>

//emscripten 的头文件

#include <emscripten/emscripten.h>

// 一旦WASM模块被加载，main()中的代码就会执行

int main() {

    printf("WebAssembly module Hello world!!\n");

}

// 返回1-10之间的一随机数

//EMSCRIPTEN_KEEPALIVE 宏定义防止删除除main之外的函数

int EMSCRIPTEN_KEEPALIVE abc() {

    srand ( time(NULL) );

    return rand() %  + ;

}

html与js代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <h1>WebAssembly module Hello world!!</h1>

    <p class="aa"></p>

    <p class="a"></p>

    <button class="btn">点击出现随机数</button>

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

    <script>

    //Module为全局对象可以直接Module._abc();调用c函数也可以_abc()直接函数名调用

    //注意页面初始化时候调用需要先调用 Module.onRuntimeInitialized
 
     document.querySelector(".btn").onclick = function(){

        let a = Module._abc();

        document.querySelector(".aa").innerText = a;

        document.querySelector(".a").innerText = _abc();

     }

    </script>

</body>

</html>

编译器使用emscripten编译指令为： emcc hello.c -s WASM=1 -O3 -o index.js

具体编译命令的含义请看emscripten官方文档！！

WebAssembly MDN简单使用的更多相关文章

  1. 【译】使用 Rust 和 WebAssembly 构建离线画图页面

    原文地址:https://dev.to/sendilkumarn/create-dev-s-offline-page-with-rust-and-webassembly-21gn 原文仓库:https ...

  2. 愚蠢的遗留BUG

    二次开发本来就是很恶心的事,我竟然是三次开发. 今天遇到一个BUG,上传图片的时候报错了,操作过程很简答,点击上传按钮,选择图片,确定上传,如图: 报错信息很直白,也很奇怪: (为了写博客,把代码回滚 ...

  3. 我的web聊天之---序章

    有时候自我感觉良好,人啊就开始膨胀,细细想来,自己还是那么苍白.---- 致傻傻的我 大家都知道,平时上班总是拿着手机看看微信,看看新闻,这个不太好,这不是重点,重点是我们公司web版本的微信,QQ都 ...

  4. 浏览器上的Qt Quick

    你想不想在浏览器上运行你的Qt Quick程序呢?在Qt 5.12之前,唯一的方法是使用Qt WebGL Streaming技术把界面镜像到浏览器上.但该方法有不少缺陷,下文会说.前不久随着Qt 5. ...

  5. 【重温基础】instanceof运算符

    最近开始在整理ES6/ES7/ES8/ES9的知识点(已经上传到 我的博客 上),碰到一些知识点是自己已经忘记(用得少的知识点),于是也重新复习了一遍. 这篇文章要复习的 instanceof 是我在 ...

  6. WebAssembly简单指导---译

    开发者指导 本页面提供一步一步的操作将一个简单的程序编译成webassembly 前提要求 为了编译成webAssembly,需要提前安装一些工具: Git.在Linux和OSX下已自带了Git,在W ...

  7. ASP.NET Core Blazor WebAssembly实现一个简单的TODO List

    基于blazor实现的一个简单的TODO List 最近看到一些大佬都开始关注blazor,我也想学习一下.做了一个小的demo,todolist,仅是一个小示例,参考此vue项目的实现http:// ...

  8. WebAssembly让你的Javascript计算性能提升70%

    现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...

  9. WebAssembly是什么？

    现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...

随机推荐

  1. idea下载

  2. with rollup

    实验吧的一道ctf题,这两天无聊,做做ctf题.在实验吧被一道也题卡了好久. 页面很简单就是一个登陆页面,按照之前的经验觉得应该是注入吧.再看题猜测应该是绕waf之类的. 查看页面源码找到了提供的源代 ...

  3. [arc063]F.すぬけ君の塗り絵2

    因为这题考虑可以观察一个性质,答案的下界为 \(2×(max(w,h)+1)\), 因为你至少可以空出一行或一列,因此这个矩形一定会经过 \(x=\frac{w}{2}\) 或 \(y=\frac{h ...

  4. 洛谷1005（dp）

    1.不要贪,缩小区间去dp就好. 2.预处理指数. 3.__int128可还行. #include <cstdio> #include <cctype> #include &l ...

  5. 104 Maximum Depth of Binary Tree 二叉树的最大深度

    给定一个二叉树,找出其最大深度.二叉树的深度为根节点到最远叶节点的最长路径上的节点数.案例:给出二叉树 [3,9,20,null,null,15,7],    3   / \  9  20    /  ...

  6. gdb手册

    摘自:https://github.com/hellogcc/100-gdb-tips/blob/master/src/quit-gdb-silently.md. 我只是摘抄我平时没注意到的,或者我认 ...

  7. TDH-hbase shell 常用命令

    一.HBASE shell 命令操作;1.建表: create ‘tableName’,'f1','f2'; 注:列簇,裂限定符都要尽量短: 2.插入数据: put 'tableName','RowK ...

  8. corn表达式 经典

    https://www.cnblogs.com/GarfieldTom/p/3746290.html

  9. Docker与虚拟机

    Docker与虚拟机 简述 Docker 在容器的基础上,进行了进一步的封装,从文件系统.网络互联到进程隔离等等,极大的简化了容器的创建和维护.使得 Docker 技术比虚拟机技术更为轻便.快捷.下面 ...

  10. 下面给出了四种设计模式的作用： 外观（F

    下面给出了四种设计模式的作用: 外观(Fa?ade :为子系统中的一组功能调用提供一个一致的接口,这个接口使得这一子系统更加容易使用: 装饰(Decorate):当不能采用生成子类的方法进行扩充时,动 ...