走进WebAssembly
创始人
2024-06-03 14:41:44
0

目录

    • 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 "]
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,并引入打包后的文件。


hello-wasm example

    可利用python、node等创建并启动本地服务,然后打开index.html。即可见证Hello, WebAssembly!
    打包至本地npm,此处不做阐述,如有兴趣可参考这里

参考文档

中文官网
英文官网

相关内容

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗?在安卓系统里,华为的应用可是个宝库呢!它们不仅功能强大,而且使用起来超级方便。今天,就让我...
安卓变ios系统魅蓝 你知道吗?最近有个朋友突然告诉我,他要把自己的安卓手机换成iOS系统,而且还是魅蓝品牌的!这可真是让...
幻书启世录安卓系统,安卓世界中... 亲爱的读者们,你是否曾在某个夜晚,被一本神奇的书所吸引,仿佛它拥有着穿越时空的力量?今天,我要带你走...
电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去,这可真是让人头疼的问题啊!你是不是也遇到了这种情况,心里直呼“怎么办怎...
用键盘切换控制安卓系统,畅享安... 你有没有想过,用键盘来控制你的安卓手机?是的,你没听错,就是那个我们每天敲敲打打的小玩意儿——键盘。...
小米安卓镜像系统在哪,小米安卓... 你有没有想过,你的小米手机里有一个隐藏的宝藏——安卓镜像系统?没错,就是那个可以让你的手机瞬间变身成...
安卓手机下载排班系统,高效排班... 你有没有想过,每天忙碌的工作中,有没有什么好帮手能帮你轻松管理时间呢?今天,就让我来给你介绍一个超级...
桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们,你是否曾梦想过将安卓系统搬到你的电脑桌面上?想象那些流畅的动画、丰富的应用,还有...
安卓13系统介绍视频,新功能与... 亲爱的读者们,你是否对安卓13系统充满好奇?想要一探究竟,却又苦于没有足够的时间去研究?别担心,今天...
车机安卓7.1系统,功能升级与... 你有没有发现,现在的车机系统越来越智能了?尤其是那些搭载了安卓7.1系统的车机,简直就像是个贴心的智...
安卓系统下如何读pdf,And... 你有没有遇到过这种情况:手机里存了一大堆PDF文件,可是怎么也找不到一个能顺畅阅读的工具?别急,今天...
安卓系统全国通用的吗,畅享智能... 你有没有想过,为什么你的手机里装的是安卓系统呢?安卓系统,这个名字听起来是不是有点神秘?今天,就让我...
假苹果手机8安卓系统,颠覆传统... 你有没有想过,如果苹果手机突然变成了安卓系统,会是怎样的景象呢?想象那熟悉的苹果外观,却运行着安卓的...
安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦?没错,就是那个让手机焕然一新的安卓12.0系统!那么,咱们国内的手...
核心芯片和安卓系统,探索核心芯... 你知道吗?在科技的世界里,有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...
如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们,你是否曾觉得安卓系统的屏幕颜色不够个性,或者是因为长时间盯着屏幕而感到眼睛疲劳?别担...
旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年,性能逐渐力不从心,却又不忍心让它退役呢?别急,今天就来教你怎么给...
美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统:一场技术革新还是政治博弈?在数字化时代,智能手机已经成为我们生活中不可或缺的一...
安卓系统日记本 你有没有发现,手机里的安卓系统日记本,简直就是记录生活点滴的宝藏库呢?想象每天忙碌的生活中,有没有那...
安卓手机广告最少的系统,探索安... 你有没有发现,用安卓手机的时候,广告总是无处不在,让人烦得要命?不过别急,今天我要给你揭秘一个秘密—...