Rust開發(fā)WebAssembly在Html和Vue中的應(yīng)用小結(jié)(推薦)
最初是由Mozilla研究院的Graydon Hoare設(shè)計(jì)創(chuàng)造,然后在Dave Herman, Brendan Eich以及很多其他人的貢獻(xiàn)下逐步完善的。Rust的設(shè)計(jì)者們通過在研發(fā)Servo網(wǎng)站瀏覽器布局引擎過程中積累的經(jīng)驗(yàn)優(yōu)化了Rust語(yǔ)言和Rust編譯器。
我最大的感受
開始我是抵觸它的,原因很簡(jiǎn)單,它太難學(xué)了!??!好害怕語(yǔ)法上影響我會(huì)的其他語(yǔ)言。不知道各位小伙伴是否有這樣的感受。
它的優(yōu)點(diǎn)也很直觀:
1、采用所有權(quán)機(jī)制,因此沒有垃圾回收器。
2、非空方案,保證其安全運(yùn)行。
3、敢和C++對(duì)標(biāo)性能的語(yǔ)言。
總的來說我用了2個(gè)月的時(shí)間研究它,能寫一些小東西,讓我感覺很舒服的是因它的機(jī)制生產(chǎn)的產(chǎn)物并沒有出現(xiàn)什么奇奇怪怪的問題。
Rust在web上的應(yīng)用
WebAssembly或wasm是用于瀏覽器內(nèi)客戶端腳本的低級(jí)、可移植的字節(jié)碼格式,是一種運(yùn)行在現(xiàn)代網(wǎng)絡(luò)瀏覽器中的新型代碼、并且提供新的性能特性和效果,對(duì)于瀏覽器下載和加載是有效的。
而且因?yàn)樗亲止?jié)碼的原因所以并不想js開源,從速度和安全性來講都是碾壓js的。當(dāng)然它的存在就像rust官網(wǎng)說的一樣,它不是來替代js,而是強(qiáng)化js!
本文主題
在咱們的站中,相關(guān)完整的示例太少了!最主要是vue手腳架中的應(yīng)用幾乎沒有!所以本文將帶領(lǐng)大家在普通html上和vue手腳架上都來運(yùn)行wasm的流程!
應(yīng)用工具:HBuilder、CLion
1、創(chuàng)建一個(gè)wasm

配置Cargo

[package] name = "mylib" version = "0.1.0" edition = "2021" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2.78" base64 = "0.12.1" [package.metadata.wasm-pack.profile.release] wasm-opt = false
寫兩個(gè)函數(shù)

use wasm_bindgen::prelude::*;
use base64::*;
//解析base64
#[wasm_bindgen]
pub fn my_str(s:String) -> String{
let s = base64::decode(s).unwrap();
return String::from_utf8(s.clone()).unwrap();
}
//計(jì)算兩個(gè)數(shù)相加
#[wasm_bindgen]
pub fn add(a:i32, b:i32) -> i32{
return a+b;
}編譯wasm



build --target web



等待吧!這是一個(gè)漫長(zhǎng)的時(shí)刻!

再次點(diǎn)擊運(yùn)行,生產(chǎn)成品。


內(nèi)涵了wasm文件與js膠水文件【js與wasm數(shù)據(jù)交互作用】
2、在Html中的應(yīng)用


將pkg直接放入根目錄


<script type="module">
import init, {add, my_str} from "./pkg/mylib.js";
init().then(() => {
console.log(add(1,2))
console.log(my_str("5LiA56CB6LaF5Lq6"))
});
</script>執(zhí)行wasm函數(shù)

3、vue3中的應(yīng)用


將pkg扔進(jìn)根目錄

執(zhí)行wasm函數(shù)

<script setup>
import { ref, onMounted } from 'vue'
import init, {add, my_str} from "../../pkg/mylib.js";
defineProps({
msg: String
})
onMounted(async () => {
await init()
console.log(add(1,2))
console.log(my_str("5LiA56CB6LaF5Lq6"))
})
const count = ref(0)
</script>npm run dev運(yùn)行


完美執(zhí)行!
4、最近遇到的問題
目前用vue2的還是比較多的,我引入后一直無法正常運(yùn)行。
比如報(bào)錯(cuò):當(dāng)前未啟用對(duì)實(shí)驗(yàn)語(yǔ)法“importMeta”的支持
比如報(bào)錯(cuò):
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
到此這篇關(guān)于Rust開發(fā)WebAssembly在Html和Vue中的應(yīng)用小結(jié)的文章就介紹到這了,更多相關(guān)Rust開發(fā)WebAssembly內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Rust中FFI編程知識(shí)點(diǎn)整理總結(jié)(推薦)
這篇文章主要介紹了Rust中FFI編程知識(shí)點(diǎn)整理總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
在Rust中要用Struct和Enum組織數(shù)據(jù)的原因解析
在Rust中,Struct和Enum是組織數(shù)據(jù)的核心工具,Struct用于將相關(guān)字段封裝為單一實(shí)體,便于管理和擴(kuò)展,Enum用于明確定義所有可能的狀態(tài),本文將通過具體示例,深入探討為什么在Rust中必須使用struct和enum來管理數(shù)據(jù),感興趣的朋友一起學(xué)習(xí)吧2025-02-02
Rust語(yǔ)言之結(jié)構(gòu)體和枚舉的用途與高級(jí)功能詳解
Rust 是一門注重安全性和性能的現(xiàn)代編程語(yǔ)言,其中結(jié)構(gòu)體和枚舉是其強(qiáng)大的數(shù)據(jù)類型之一,了解結(jié)構(gòu)體和枚舉的概念及其高級(jí)功能,將使你能夠更加靈活和高效地處理數(shù)據(jù),本文將深入探討 Rust 中的結(jié)構(gòu)體和枚舉,并介紹它們的用途和高級(jí)功能2023-10-10
使用cargo install安裝Rust二進(jìn)制工具過程
cargoinstall是一個(gè)用于安裝包含可執(zhí)行目標(biāo)的Rust包的命令行工具,類似于系統(tǒng)軟件包管理器,但它為Rust開發(fā)者提供了一種簡(jiǎn)潔的方式來安裝和管理命令行工具,安裝后,二進(jìn)制文件會(huì)存儲(chǔ)在$HOME/.cargo/bin目錄中,需要將該目錄添加到$PATH環(huán)境變量中才能在命令行中直接運(yùn)行2025-02-02
如何使用bindgen將C語(yǔ)言頭文件轉(zhuǎn)換為Rust接口代碼
這篇文章主要介紹了使用bindgen將C語(yǔ)言頭文件轉(zhuǎn)換為Rust接口代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
使用Rust語(yǔ)言編寫一個(gè)ChatGPT桌面應(yīng)用示例詳解
這篇文章主要介紹了如何用Rust編寫一個(gè)ChatGPT桌面應(yīng)用,文中有詳細(xì)的流程介紹,對(duì)大家的學(xué)習(xí)或工作有意一定的幫助,需要的朋友可以參考下2023-05-05

