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. 計蒜課/排澇(Edmond-Karp)

    題目鏈接: https://nanti.jisuanke.com/t/36 題意:中文題目誒~ 思路: 最大流模板題.... 關於最大流算法blog: http://www.cnblogs.com/z ...

  2. 2014-9-9 NOIP模拟赛

    东方幻想乡系列模拟赛Stage 1命题 Nettle审题 Barty ccy1991911 FlanS39 Wagner T2 高精除高精,从来没写过,不知道怎么写,我就用大数减小数ans次,果断超时 ...

  3. [Xcode 实际操作]九、实用进阶-(23)多个Storyboard故事板中的页面跳转

    目录:[Swift]Xcode实际操作 本文将演示多个Storyboard故事板中的页面跳转. 使用快捷键[Command]+[N]创建一个新的故事板文件. (在项目文件夹[DemoApp]上点击鼠标 ...

  4. Node.js 内置模块fs(文件系统)

    fs模块的三个常用方法 1.fs.readFile() -- 读文件 2.fs.writeFile() -- 写文件 3.fa.stat() -- 查看文件信息 fs模块不同于其它模块的地方是它有异步 ...

  5. iOS图标去掉阴影和反光

    在ios开发时, 程序的图标会被apple进行美化, 自动圆角, 加上阴影和反光效果: 如果有时候不想要阴影和反光,可以这样做: 在Info.plist中 添加一个Icon already inclu ...

  6. C#：索引

    1. 什么是索引 索引是一组get和set访问器,类似于属性的访问器. 2. 索引和属性 和属性一样,索引不用分配内存来存储 索引和属性都主要被用来访问其他数据成员,这些成员和它们关联,它们为这些成员 ...

  7. webSocket的学习以及问题的解决

    查过很多资料,感觉大部分都讲的不够详细,做为一个新人我从webSocket的基本开始学起, 首先webSocket的原理其实和Http差不多,但是由于Http只能被动的去向服务器请求消息,导致缺点太明 ...

  8. 51Nod 1272 最大距离 (栈或贪心)

    #include <cstdio> #include <queue> #include <cstring> #include <iostream> #i ...

  9. java数据结构----链表

    1.链表:链表是继数组之后第二种使用的最广泛的通用存储结构,它克服了数组的许多弊端:无序数组的查找慢问题,有序数组的插入慢问题,数组定义时的定长问题.它也可取代数组,作为其他数据结构的基础. 2.引用 ...

  10. iOS蓝牙开发总结-4

    蓝牙开发总结 只要熟悉蓝牙的流程,和蓝牙中每一个角色的作用,其实蓝牙通讯并没有想象中的难 1.蓝牙中心CBCentralManager:一般指得是iPhone手机 2.设备(外设)CBPeripher ...