走进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!”这得是多大的新闻啊!想象你的手机、...
安卓开发新手引导系统,掌握核心... 你刚踏入安卓开发的广阔天地,是不是有点晕头转向呢?别担心,今天我就要给你来一场新手引导大作战,让你从...
国外安卓操作系统,全球视角下的... 你知道吗?在手机的世界里,操作系统可是个大头戏呢!今天,咱们就来聊聊国外那些风头正劲的安卓操作系统,...
安卓17系统窗口调用,Andr... 你知道吗?最近安卓系统又出新花样了!安卓17系统窗口调用,这可是个大招啊!今天,我就要带你深入了解一...
苹果庄安卓通讯系统,通讯系统融... 你知道吗?在手机江湖里,有两个门派可是鼎鼎大名,一个是以苹果为首的iOS,另一个则是安卓阵营。今天,...
安卓系统10寸屏幕,功能与体验... 你有没有想过,拥有一台10寸屏幕的安卓系统设备,会是怎样的体验呢?想象小巧的机身,却拥有强大的功能,...
安卓刷入linux系统,轻松刷... 你有没有想过,你的安卓手机其实可以变身成一个强大的Linux工作站呢?没错,就是那个在服务器上大显神...
安卓系统 看电视软件,便捷观影... 亲爱的手机控们,你是不是也和我一样,对安卓系统上的看电视软件情有独钟?没错,那种随时随地都能追剧的快...
安卓13系统图片备份,随时随地... 亲爱的安卓用户们,你是否在期待着安卓13系统的到来呢?听说这个新系统将会带来许多令人兴奋的新功能,但...
安卓手机系统壁纸大全,海量精美... 你有没有发现,手机屏幕上那一抹色彩,有时候能瞬间提升你的心情呢?没错,说的就是那些精美的壁纸!今天,...
白板 安卓系统内置电脑,融合移... 亲爱的读者,你是否曾想过,在你的安卓手机上,竟然可以变身为一台迷你电脑?没错,这就是今天我要跟你分享...
安卓系统游戏昵称英文,Unlo... 你有没有想过,在安卓系统的游戏世界里,一个独特的昵称能给你带来怎样的不同体验呢?想象当你化身成为一名...
原生安卓6.0系统占用,原生安... 你有没有发现,自从你的手机升级到了原生安卓6.0系统,它的反应速度好像变得不那么敏捷了?别急,今天就...
使命召唤10安卓系统,安卓平台... 亲爱的玩家们,你是否曾在深夜里,手握手机,沉浸在紧张刺激的战场中?今天,我要和你聊聊一款让无数玩家热...
鸣言系统安卓版,畅享智能语音交... 你知道吗?最近我在手机上发现了一个超级酷炫的应用——鸣言系统安卓版!这款应用简直是我的新宠,让我来给...
2020安卓什么系统好,最佳系... 2020年安卓系统哪家强?这个问题可是让不少手机用户头疼不已。毕竟,系统的好坏直接影响到手机的流畅度...
安卓系统有没有捷径,安卓系统快... 你有没有想过,使用安卓系统是不是也能找到一些小窍门,让生活变得更加轻松愉快呢?没错,今天就要来聊聊这...
安卓系统助手推荐软件,解锁手机... 手机里的安卓系统助手可是个宝库,里面藏着各种各样的实用软件。今天,就让我来给你推荐几款超级好用的安卓...