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. 即时通讯新手入门：一文读懂什么是Nginx？它能否实现IM的负载均衡？

    本文引用了“蔷薇Nina”的“Nginx 相关介绍(Nginx是什么?能干嘛?)”一文部分内容,感谢作者的无私分享. 1.引言   Nginx(及其衍生产品)是目前被大量使用的服务端反向代理和负载均衡 ...

  2. Spring security + oauth2.0 + redis + mybatis plus 搭建微服务

    上个星期一个朋友请求帮忙,让我搭建一个分布式授权中心的微服务,之前我也没搭建过,在网上撸了几天前辈们写的技术博客,搞出个模型,分享给大家: 前辈们博客地址: OAuth2.0 原理:https://b ...

  3. cmd,bat和dos的区别

    区别 dos是磁盘操作系统(Disk Operating System),是个人计算机上的一类操作系统. bat是DOS命令,在任何dos环境下都可以使用. bat文件是dos下的批处理文件,批处理文 ...

  4. DB2 错误 54001

    DB2 语句太长或者太复杂 SQLSTATE=54001 对数据库的参数的修改: db2 update db cfg for DB_NAME using STMTHEAP 4096 db2 updat ...

  5. 转 查看磁盘IO负载 - 看哪些进程在读写磁盘 以及oracle 异步I/O 和同步I/O

    https://www.cnblogs.com/cloudstorage/archive/2012/11/11/2764623.html #####sample 1: Oracle等待事件db fil ...

  6. 2个sql 函数dbms_lob.substr 和 wm_concat

    转自: http://blog.csdn.net/wenzhongyan/article/details/50315473 http://blog.csdn.net/ojerryzuo/article ...

  7. Sawgger框架

    简介详情:https://blog.csdn.net/sanyaoxu_2/article/details/80555328

  8. vue http请求 vue-resource使用方法

    1.安装vue-resource扩展: npm install vue-resource 2.在main.js中引入 import http from 'vue-resource' 3.使用方法 // ...

  9. APICloud手机APP开发

    官网 http://docs.apicloud.com/

  10. MyBatis框架的XML数据访问Dao层接口的组合使用

    MyBatis 的前生为Apache的开源项目iBatis.其优势在于灵活,几乎可以替代JDBC,同时提供了编程接口.目前MyBatis的数据访问Dao层不需要实现类,也不需要像JDBC那样拼接Hql ...