Rust開發WebAssembly在Html和Vue中的應用小結(推薦)

2022-08-05 14:00:49

我最大的感受

開始我是抵觸它的，原因很簡單，它太難學了！！！好害怕語法上影響我會的其他語言。不知道各位小夥伴是否有這樣的感受。

它的優點也很直觀:

1、採用所有權機制，因此沒有垃圾回收器。

2、非空方案，保證其安全執行。

3、敢和C++對標效能的語言。

總的來說我用了2個月的時間研究它，能寫一些小東西，讓我感覺很舒服的是因它的機制生產的產物並沒有出現什麼奇奇怪怪的問題。

Rust在web上的應用

WebAssembly或wasm是用於瀏覽器內使用者端指令碼的低階、可移植的位元組碼格式，是一種執行在現代網路瀏覽器中的新型程式碼、並且提供新的效能特性和效果，對於瀏覽器下載和載入是有效的。

而且因為它是位元組碼的原因所以並不想js開源，從速度和安全性來講都是碾壓js的。當然它的存在就像rust官網說的一樣，它不是來替代js，而是強化js！

本文主題

在咱們的站中，相關完整的範例太少了！最主要是vue手腳架中的應用幾乎沒有！所以本文將帶領大家在普通html上和vue手腳架上都來執行wasm的流程！

應用工具：HBuilder、CLion

1、建立一個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

寫兩個函數

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();
}
//計算兩個數相加
#[wasm_bindgen]
pub fn add(a:i32, b:i32) -> i32{
    return a+b;
}

編譯wasm

build --target web

等待吧！這是一個漫長的時刻！

再次點選執行，生產成品。

內涵了wasm檔案與js膠水檔案【js與wasm資料互動作用】

2、在Html中的應用

將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>

執行wasm函數

3、vue3中的應用

將pkg扔進根目錄

執行wasm函數

<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執行

完美執行！

4、最近遇到的問題

目前用vue2的還是比較多的，我引入後一直無法正常執行。

比如報錯：當前未啟用對實驗語法“importMeta”的支援

比如報錯：

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:

到此這篇關於Rust開發WebAssembly在Html和Vue中的應用小結的文章就介紹到這了,更多相關Rust開發WebAssembly內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！