Rust开发WebAssembly在Html和Vue中的应用小结(推荐)

目录
  • 我最大的感受
  • Rust在web上的应用
  • 本文主题
  • 应用工具:HBuilder、CLion
    • 1、创建一个wasm
    • 2、在Html中的应用
    • 4、最近遇到的问题

最初是由Mozilla研究院的Graydon Hoare设计创造,然后在Dave Herman, Brendan Eich以及很多其他人的贡献下逐步完善的。Rust的设计者们通过在研发Servo网站浏览器布局引擎过程中积累的经验优化了Rust语言和Rust编译器。

我最大的感受

开始我是抵触它的,原因很简单,它太难学了!!!好害怕语法上影响我会的其他语言。不知道各位小伙伴是否有这样的感受。

它的优点也很直观:

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 如何使用VSCode配置Rust开发环境(Rust新手教程)

    VSCode配置Rust开发环境 在商店中输入rls,选择rust,点击Quick start中的下载链接.这个Rust插件你也要记得下. 跳转后来到下载界面,点击下载. 运行下载好的exe文件,命令行输入1按下回车即可. 安装完毕后在命令行输入rustc --version,如果能输出版本号则表示安装成功. 选择一个文件夹来存放我们的hello world程序(好吧,简直是一句废话...) 记得把Formatter设成rust的. 在资源管理器那一栏,右键创建文件Cargo.toml.我们简单

  • Rust开发WebAssembly在Html和Vue中的应用小结(推荐)

    目录 我最大的感受 Rust在web上的应用 本文主题 应用工具:HBuilder.CLion 1.创建一个wasm 2.在Html中的应用 4.最近遇到的问题 最初是由Mozilla研究院的Graydon Hoare设计创造,然后在Dave Herman, Brendan Eich以及很多其他人的贡献下逐步完善的.Rust的设计者们通过在研发Servo网站浏览器布局引擎过程中积累的经验优化了Rust语言和Rust编译器. 我最大的感受 开始我是抵触它的,原因很简单,它太难学了!!!好害怕语法上

  • checkbox在vue中的用法小结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考 在这之前,先看看原生checkbox搭配jquery取值的用法 <input type="checkbox" name="hobby" v

  • 详解ESLint在Vue中的使用小结

    ESLint是一个QA工具,用来避免低级错误和统一代码的风格 ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格: 2.审查代码是否存在语法错误: 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用 在初始化项目时选择是否使用 ESLint管理代码(选择Y则默认开启) Use ESLint to lint your code? (Y/n) 默认使用的是此标准https://github.com/standard/standard/blob/m

  • 在vue中使用console.log无效的解决

    webpack开发环境下,在vue中使用console.log无效,一直以为webpack出了问题. 使用window.console.log()就能够顺利在浏览器控制台输出了. 以及 在axios请求的回调中依旧无法输出使用window.console.log()/console.log(),先留坑吧. 补充知识:vue中 :style 与 :class 三元运算符使用 style三元表达式 <p :style="{'color': (checkIndex3==m.txt ? '#3d8

  • vue中插件和组件的区别点及用法总结

    本教程操作环境:windows7系统.vue2.9.6版,DELL G3电脑. 一.组件是什么 回顾以前对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历.时间.范围等组件作具体的实现 调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错

  • Vue中父子组件通讯之todolist组件功能开发

    一.todolist功能开发 <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <li v-for="(item, index ) of list

  • vue中控制mock在开发环境使用,在生产环境禁用方式

    目录 vue控制mock在开发环境使用,在生产环境禁用 说下原因 解决方案 vue中使用mock(常用方式) 前期准备 安装axios和mock.js插件 在main.js中引入 编写mock.js 调用 成功 vue控制mock在开发环境使用,在生产环境禁用 说下原因 mock拦截所有的axios请求,根据请求,做出相应的响应.平时前后端分离开发,我们使用mock获得相应的数据,但当和后端联调的时候,不禁用mock,就无法获得后端数据. 解决方案 第一步.我们设置mock在开发developm

  • vue中watch的实际开发学习笔记

    目录 前言 一.watch是什么 二.watch不同的实际使用场景开发案例 1.场景1:加载完成后登录监听 2.场景2:前面不同的选择框,影响下面的不同的选择框的选项内容 3.场景3:深度监听 4.场景4:赋值使用 5.场景5:改变标记的true和false 6.场景6:页面的跳转 补充:watch简写形式 总结 前言 本文主要是积累一下在使用前端的watch开发过程中遇到的问题点和经验. 一.watch是什么 根据本人的理解,它就是一个监听器,就是说监听的某个数据发生了变化,那么它就会执行相对

  • vue中使用unity3D如何实现webGL将要呈现的效果

    目录 1. 什么是webGL 1.1 兼容性 2. 什么是unity3D 2.1 unity3D 的发展史 2.2 从 JavaScript 调用 Unity 脚本函数 2.3 WebGL 性能注意事项 3. 如何在vue中使用unity3D和webGL 3.1 新建一个挂载unity3d加载器的vue组件 3.2 使用新建的vue-unity-webgl组件 4. 演示效果 1. 什么是webGL WebGL(Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高

  • vue中component组件的props使用详解

    本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的

随机推荐