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. 覆盖equals方法时请遵守通用约定

    覆盖equals方法时请遵守通用约定   覆盖equals方法看起来很简单,但是有许多覆盖方式会导致错误,并且后果很严重.最容易避免这种类问题的方法就是不覆盖equals方法,在这种情况下,类的每个实 ...

  2. idea svn 问题

    https://blog.csdn.net/liyantianmin/article/details/52837506

  3. 【UVA - 10815】Andy's First Dictionary （set）

    Andy's First Dictionary Description 不提英文了 直接上中文大意吧 XY学长刚刚立下了再不过CET就直播xx的flag,为了不真的开启直播模式,XY学长决定好好学习英 ...

  4. （十三）SpringBoot 发送E-mail

    一:添加mail依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  5. moiezen(2018.10.16)

    题意:有n件行李,编号为1~n.行李的质量是模 P 意义下的(P不一定是质数).有 k 个背包,要装下这些行李,为了方便在背包中找行李,每个背包中的行李编号是连续的,允许有背包为空.我们想让最重的背包 ...

  6. 后台管理系统·快速开发框架JSite

    平台介绍 框架基于Maven构建,拆分成多个子模块,层次结构清晰.可用于所有Web应用,如企业后台管理系统.OA系统.CMS.CRM等. 框架本身集成了最新的 Flowable工作流引擎 https: ...

  7. [題解]（狀壓/水）luogu_P1879玉米田

    大水題然而因為智障的錯誤调了半天......n,m别反着输入啊......內外循環和狀態數都不等價 别的就是記錄一下每一行不可行的點,也狀壓一下,dp的時候判一下即可 #include<bits ...

  8. PHP之session

    p:first-child, #write > ul:first-child, #write > ol:first-child, #write > pre:first-child, ...

  9. attribute与property区别总结

    在前阵子看JQuery源码中,attr()的简单理解是调用了element.getAttribute()和element.setAttribute()方法,removeAttr()简单而言是调用ele ...

  10. 用CSS3和伪元素绘制三角形

    具体怎样的写法,参照右边链接:https://segmentfault.com/a/1190000002783179 加以改良,不想多一个标签,可以直接利用伪元素,以下面代码为例所示: html代码: ...