走进WebAssembly
目录
- WebAssembly是什么?
- 手把手起步
- 前置条件
- 从Rust编译到WebAssembly
- 安装rust
- wasm-pack
- 创建项目
- 打包并引用
- 参考文档
WebAssembly是什么?
通俗讲WebAssembly是一种在web浏览器中运行的新型代码,可以编译C/C++、C#和Rust等语言以便它们可以在web上运行。WebAssembly具备更高的运行速度,并且可以与js一起运行、互相调用。
手把手起步
前置条件
1.Git
2.CMake。在 Linux 和 OS X系统中,你可以使用包管理工具 apt-get 或 brew 来安装。如果是 Windows 系统,你可以点击这里。
从Rust编译到WebAssembly
此处我以rust为例,在座的大哥有其他熟练的编程语言技能也是可以选择,参考文档点击这里,当然作为像我一样的前端开发其实都不熟悉。
安装rust
安装地址点击这里,看不懂英文?没事,好心的rust官网最下方有语言选择下拉框。如果默认安装则不需要配置环境变量,否则需手动配置。安装成功后可使用 rustc --version 来检测是否安装成功。
wasm-pack
在终端执行以下命令,下载并安装wasm-pack,用于编译构建可执行在web端的工具。
cargo install wasm-pack
创建项目
在任意目录终端(比如桌面)执行以下命令,创建一个hello-wasm的项目
cargo new --lib hello-wasm
此时可见项目目录如下,其中Cargo.toml为配置文件,lib.rs为编译入口文件
+-- Cargo.toml
+-- src+-- lib.rs
将以下代码复制并覆盖lib.rs文件中的原有代码。如果你稍微了解前端代码,那大概率可以盲猜以下代码的执行结果是弹窗Hello, xxx!
use wasm_bindgen::prelude::*;#[wasm_bindgen]
extern {pub fn alert(s: &str);
}#[wasm_bindgen]
pub fn greet(name: &str) {alert(&format!("Hello, {}!", name));
}
复制以下代码,修改Cargo.toml配置文件
[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Your Name <you@example.com>"]
description = "A sample project with wasm-pack"
license = "MIT/Apache-2.0"
repository = "https://github.com/yourgithubusername/hello-wasm"
edition = "2018"[lib]
crate-type = ["cdylib"][dependencies]
wasm-bindgen = "0.2"
打包并引用
执行以下命令,打包lib.rs代码。第一次执行可能会非常慢。
wasm-pack build --target web
新建index.html,并引入打包后的文件。
<!DOCTYPE html>
<html lang="en-US"><head><meta charset="utf-8" /><title>hello-wasm example</title></head><body><script type="module">import init, { greet } from "./pkg/hello_wasm.js";init().then(() => {greet("WebAssembly");});</script></body>
</html>
可利用python、node等创建并启动本地服务,然后打开index.html。即可见证Hello, WebAssembly!
打包至本地npm,此处不做阐述,如有兴趣可参考这里
参考文档
中文官网
英文官网
走进WebAssembly相关推荐
- WebAssembly已支持所有主流浏览器
Firefox Quantum.Safari.Edge和Chrome一并支持WebAssembly,可以接近原生速度运行Web应用程序.点击[阅读原文]获取原文地址. 作者:Judy DeMocker ...
- webassembly类型_WebAssembly 那些事儿
WebAssembly 那些事儿 什么是 WebAssembly? WebAssembly 是除 JavaScript 以外,另一种可以在网页中运行的编程语言,并且相比之下在某些功能和性能问题上更具优 ...
- 萨默尔机器人_沣东新城王寺街道《民法典》企业宣传活动走进西安萨默尔科技...
2020年9月4日下午,我公司荣幸的邀请到西咸新区沣东新城王寺街道司法所组织的"学习宣传民法典,共创美好新生活"主题宣传活动企业行,在协同创新港西安萨默尔机器人科技有限公司进行专题 ...
- 计算机协会成立活动简报,“中国计算机学会CCF走进高校”活动在我校举行
校新闻中心讯 9月13日下午,由中国计算机学会(CCF)主办的"CCF走进河南科技大学"活动在工科二号楼610举行.副校长魏世忠教授出席活动并致辞.长江学者.国家杰出青年基金获得者 ...
- WebAssembly Studio:Mozilla提供的WASM工具
\ 看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料! \ \\ WebAssembly Studio是Mozilla开发的一款在线工具,用于将C/C++和R ...
- 走进云计算与虚拟化的底层核心
本文讲的是走进云计算与虚拟化的底层核心,2012年3月在国务院政府工作报告附录部分中,政府对云计算给出了官方的解释,体现了政府对云计算产业的高度重视和美好愿景.云计算在工作报告中是这样定义的:&quo ...
- 被追捧为“圣杯”的深度强化学习已走进死胡同
作者 | 朱仲光 编译 | 夕颜 出品 | AI科技大本营(ID:rgznai1100) [导读]近年来,深度强化学习成为一个被业界和学术界追捧的热门技术,社区甚至将它视为金光闪闪的通向 AGI 的圣 ...
- 你有一张邀请函:全球AI技术开发日南京站——9月8日走进地平线
搭建AI芯片和算法设计之路. AI领域AGI最新研究和发展. 自动驾驶中的视觉感知核心技术原理. 如何使用深度学习模型提高预测精确度? 本期走进地平线 - 探索地平线背后的AI大脑. 由来自硅谷和地平 ...
- 全球AI技术开放日系列之(七):走进阿里业务中台
主题: 全球AI技术开放日系列 7(杭州站): 走进阿里业务中台 - 探索阿里电商核心链路智能技术 时间: 9月1日 12:30-17:00 报名:点击阅读原文,半价早鸟票限时优惠 内容: 全球AI技 ...
最新文章
- django设置mysql数据库连接_django如何设置连接mysql数据库
- [你必须知道的.NET] 第八回:品味类型---值类型与引用类型(上)-内存有理
- mysql php pdo_php PDO mysql写法
- 服务器打包运营级H5商城源码
- 【python基础知识】写入文件指定编码格式,例如utf-8
- 分析rss/xml结构附带源码【原创】
- 基于SpringBoot的图书管理系统
- 酒店客房卫生打扫步骤及重点
- 如何查看一篇论文是否被SCI检索
- 高铁对合肥及周边城市可达性及商业腹地变化影响研究
- nexus5 博通芯片WIFI详解 (1)
- Java流程控制相关知识(四)
- ThinkPad E531加装固态硬盘全过程
- 科大讯飞 唤醒python_用Python来使用科大讯飞语音识别,so easy
- java编写自定义异常类,统一异常处理
- 被怼到绝望的我,Java框架体系架构的知识,超详细
- 记录一次使用线性回归和多项式回归为房价定价
- 惠普战66一代拆机_惠普战66 Pro笔记本详细拆机教程
- C语言(商品打折内容)
- 使用FFMPEG分离mp4/flv文件中的264视频和aac音频
热门文章
- 我用Python写了个网课查题小助手
- 再谈 Go 语言在前端的应用前景
- 百度员工猝死 是否过劳死引发争论
- Unity3D游戏作品大盘点
- 不用找 手机壁纸素材合集在这
- There is no getter for property named ‘xxx‘ in ‘class com.test.project.entity.
- Linux-2022版(尚硅谷)-Day01(全网最全笔记)
- 突发!爱奇艺崩了!小米电视崩了,韩剧TV也崩了?爱奇艺回应:正全力解决...
- CopyWebpackPlugin的ignore
- ARCore之路-放置物体