走进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,此处不做阐述,如有兴趣可参考这里

参考文档

中文官网
英文官网

相关内容

热门资讯

安卓系统只有英文翻译,Andr... 你知道吗?在咱们这个科技飞速发展的时代,手机已经成了我们生活中不可或缺的好伙伴。而说起手机,安卓系统...
安卓电视装苹果系统教程,轻松实... 亲爱的电视迷们,你是否曾梦想过在安卓电视上体验苹果系统的流畅与优雅?别再羡慕了,今天就来手把手教你如...
安卓系统换电池的方法 手机用久了,电池续航能力大不如前,是不是你也想给安卓手机来个“换血重生”呢?别急,今天就来手把手教你...
流量卡怎么解决安卓系统,高效使... 你是不是也遇到了这样的烦恼?手机流量不够用,但又不想每个月花大价钱买套餐?别急,今天就来给你支个招,...
dx80刷安卓系统 你有没有想过,给你的dx80手机换换口味呢?没错,就是那个一直默默陪伴你的dx80,今天咱们就来聊聊...
车载安卓系统安吉星卸载,轻松优... 你有没有发现,现在很多车载系统都开始流行起安卓系统了呢?尤其是安吉星,这个在汽车界小有名气的车载系统...
安卓手机系统ios系统升级,全... 你有没有发现,最近你的安卓手机又闹腾起来啦?没错,我又要来跟你聊聊这个让人又爱又恨的话题——安卓手机...
安卓系统7.0功略,深度解析全... 你有没有发现,你的安卓手机最近是不是变得有点儿不一样了?没错,它升级到了安卓系统7.0!这可不是一个...
安卓系统最新价格表,全面解析升... 你有没有发现,最近安卓系统的价格表又有了新变化?没错,这个话题可是让不少手机控们兴奋不已呢!今天,就...
安卓11q1系统,新特性与升级... 你知道吗?最近安卓系统又来了一次大更新,那就是安卓11Q1系统。这可不是一个小打小闹的更新,它可是带...
安卓系统有虾皮吗,便捷购物新体... 你有没有想过,手机里装了安卓系统,是不是也能找到那些让人爱不释手的购物APP呢?今天,就让我来给你揭...
安卓电脑学生管理系统,安卓电脑... 你有没有想过,在繁忙的校园生活中,有一款神器能帮你轻松管理学生信息,让老师们从繁琐的事务中解放出来?...
反向充电怎么用安卓系统 你有没有想过,手机没电的时候,竟然还能给其他设备充电?没错,这就是最近很火的“反向充电”功能。今天,...
爱酷系统跟安卓系统哪个好,揭秘... 你有没有想过,手机系统就像是我们生活的操作系统,每天陪伴着我们,影响着我们的使用体验。今天,就让我来...
小米手机刷安卓p系统,小米手机... 你有没有发现,最近小米手机圈子里掀起了一股热潮?没错,就是刷安卓P系统!这可是个让手机焕发第二春的大...
威图安卓系统升级,畅享智能生活... 你知道吗?最近手机界可是热闹非凡呢!威图安卓系统升级的消息一出,瞬间吸引了无数手机爱好者的目光。这不...
qq软件安卓系统软件,沟通无界 你有没有发现,最近你的手机里那个陪伴你多年的QQ软件又升级啦?没错,就是那个让你和朋友畅聊、分享生活...
安卓10系统有通知推送,畅享便... 你知道吗?最近安卓系统又升级啦!这次可是来到了安卓10系统,听说通知推送功能有了大变化,简直让人眼前...
安卓系统软件白屏,安卓系统软件... 手机屏幕突然变成了白茫茫的一片,这可怎么办?别急,今天就来和你聊聊安卓系统软件白屏这个让人头疼的问题...
美能达打印机安卓系统,轻松实现... 你有没有想过,家里的打印机也能玩转安卓系统?没错,今天就要给你揭秘这款神奇的美能达打印机,看看它是如...