Σύνδεση Rust WASM με HTML
Αυτή τη φορά θα ολοκληρώσετε το εργαλείο στο περιηγητή χρησιμοποιώντας HTML + JS που καλεί τις συναρτήσεις WASM.
Βήμα 1: Δημιουργήστε το Παράθυρο HTML
<!DOCTYPE html><html><body>
<input type="number" id="a" >
<input type="number" id="b" >
<button onclick="calculate()">Υπολογισμός</button>
<p>Αποτέλεσμα: <span id="result"></span>
<script src="wasm_exec.js"></script>
<script>
fetch('main.wasm').then(response =>
response.arrayBuffer().then(bytes =>
WebAssembly.instantiate(bytes, { env: {} }).then(results => {
window.add = results.instance.exports.add;
})
)
);
function calculate() {
let a = parseInt(document.getElementById('a').value);
let b = parseInt(document.getElementById('b').value);
document.getElementById('result').textContent = add(a, b);
}
</script>
</body></html>
Βήμα 2: Δοκιμαστικό Πειραματικό
npm install -g wabt
wasm-objdump -x main.wasm
Πειραματικό Θεματικό
#[wasm_bindgen]
pub fn multiply(a: u32, b: u32) -> u32 {
a * b
}
#[wasm_bindgen]
pub fn get_result() -> u32 {
multiply(10, 12)
}
Διαμορφώστε την ανάπτυξη και δοκιμαστικές λειτουργίες με το wasm_bindgen
Δοκιμαστικό Παράθυρο
Αποτέλεσμα εμφανίζεται εδώ...