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

参考文档

中文官网
英文官网

相关内容

热门资讯

安卓系统弹出窗口问题,安卓系统... 手机里的安卓系统突然弹出窗口,是不是让你心头一紧,手忙脚乱?别急,今天就来和你聊聊这个让人头疼的安卓...
安卓系统加苹果战队,科技竞技的... 你知道吗?在科技的世界里,有一场特别的较量正在悄然上演。那就是安卓系统和苹果战队的对决!这两大操作系...
miui与安卓系统关系,深度定... 亲爱的读者,你是否曾在使用手机时,对那熟悉的MIUI界面感到亲切又好奇?今天,就让我们一起揭开MIU...
安卓原生系统手机哪些,探索安卓... 你有没有想过,为什么你的手机总是那么流畅,那么强大?这背后,可是有一个默默无闻的英雄——安卓原生系统...
安卓系统cpu天梯图,性能比拼... 你有没有发现,手机里的安卓系统,就像是我们的好朋友,每天都在默默无闻地工作着。而它的心脏,也就是CP...
安卓系统通知时间,掌握生活节奏... 你有没有发现,手机里的安卓系统通知时间有时候会让人有点头疼呢?有时候它准时得像军号,有时候又懒洋洋得...
安卓系统默认安装位置,默认安装... 你有没有发现,每次新买一台安卓手机,打开它的时候,那些默认安装的APP总是占据着固定的位置?是不是好...
安卓系统内存优化模式,高效运行... 手机用久了是不是感觉越来越卡?别急,今天就来给你揭秘安卓系统内存优化模式的秘密,让你的手机焕发新生!...
零信任软件安卓系统,零信任软件... 你知道吗?在科技飞速发展的今天,手机已经成为了我们生活中不可或缺的一部分。而在这其中,安卓系统凭借其...
怎样更改安卓系统时间,安卓系统... 手机时间不对了?别急,我来教你怎样更改安卓系统时间,让你手机上的时间瞬间回到正轨!一、直接调整系统时...
鸿蒙系统离不开安卓,基于安卓的... 你知道吗?最近在科技圈里,有一个话题可是引起了不小的讨论呢!那就是鸿蒙系统与安卓的关系。很多人都在问...
安卓系统怎么重启应用,安卓系统... 手机里的安卓应用突然卡住了,是不是让你头疼不已?别急,今天就来教你怎么轻松重启安卓系统中的应用,让你...
安卓系统开启远程登录,安卓系统... 你有没有想过,即使你不在家,也能轻松管理你的安卓设备呢?没错,就是安卓系统开启远程登录!这可是个超级...
黑域安卓系统4.0,创新功能与... 亲爱的读者们,你是否对安卓系统有所好奇?今天,我要带你深入探索一个神秘而独特的存在——黑域安卓系统4...
安卓系统基础教程,从入门到精通 你有没有想过,你的安卓手机里那些神奇的软件和功能是怎么来的呢?其实,这一切都离不开安卓系统的基础。今...
安卓系统盒子停服,回顾辉煌历程 你有没有发现,最近你的安卓系统盒子突然有点不对劲?是不是觉得它变得有点“懒”,不再像以前那样活泼了呢...
安卓系统怎么下蝙蝠,安卓系统下... 你有没有想过,在安卓手机上下载蝙蝠APP,竟然也能成为一门学问呢?没错,就是那个让你随时随地畅游网络...
安卓系统能播放蓝光,安卓系统轻... 你有没有想过,你的安卓手机或者平板,竟然能播放那些高清到让人惊艳的蓝光电影呢?没错,就是那种画质细腻...
汽车系统识别到安卓,智能驾驶新... 你知道吗?最近汽车界可是掀起了一股新潮流呢!那就是汽车系统识别到安卓,这可不是简单的兼容,而是深度融...
工程业务系统安卓版,助力项目管... 你知道吗?最近我在手机上发现了一个超级实用的工程业务系统安卓版,简直让我爱不释手!这款应用不仅功能强...