当前位置: 首页 > news >正文

【Rust WebAssembly 入门实操遇到的问题】

Rust WebAssembly 入门实操遇到的问题

  • 什么是WebAssembly
  • 跟着教程走
  • wasm-pack build error
  • 总结


什么是WebAssembly

WebAssembly(简称Wasm)是一种基于堆栈的虚拟机的二进制指令
格式。Wasm 被设计为编程语言的可移植编译目标,支持在 Web 上部
署客户端和服务器应用程序。

简而言之,WebAssembly(wasm)是一种可以执行在堆栈虚拟机的二进制可执行指令集(所以在你编译后将看到后缀为wasm的二进制文件,这种文件可以运行在Wasm Runtime 上),一般的,市面上常见的浏览器均支持wasm Runtime。由此也可以看出,只要有Runtime在,wasm可以运行在任何结构的硬件上,这也为wasm在更多领域中发挥作用提供了可能。


跟着教程走

wasm tutorial 提供了完整的,从安装Rust环境到编译pkg,再到运行服务调用wasm的整个教程,初学者可以跟着教程走一遍有一个大概的感受。在学习教程的过程中会遇到一些问题,以下是我遇到的问题,作为个人整理和分享。

wasm-pack build error

在这里插入图片描述
根据教程上的步骤,执行

wasm-pack build

会自动生成pkg文件夹以及相关的文件,不过在这里我遇到了下面的问题:
在这里插入图片描述
报错显示我无法使用stable版本的rust使用示例工程中的attribute,难道我需要使用nightly版本吗?但是官方文档并没有要求这样做,回顾以下我们跟着文档都做过什么,发现cargo.toml中官方给到的wasm-bindgen 版本和我们真正使用到的版本不同,
官方是0.2.84,而我们使用的是0.2.97(当前最新),或许问题出在这里:

[dependencies]
wasm-bindgen = ">=0.2.87 , < 0.2.88"

如果我们像唯一确定一个版本使用,可以如上述写法,而默认的:

[dependencies]
wasm-bindgen = "0.2.84"

cargo的默认行为会拉取最大子集中最新的版本,因为wasm-bindgen目前还是0.xx.xx版本,非稳定版本,所以为了避免发生不必要的问题,尽量控制版本统一,好,控制完版本后重新运行:

wasm-pack build

发生了新的问题:

[INFO]: ⬇️  Installing wasm-bindgen... 

我们的编译进程停止在这了,看到提示是正在安装wasm-bindgen,wasm-pack并没有正确获知我们已经安装了wasm-bindgen,同样的问题别人已经遇到过了,我们需要安装wasm-bindgen-cli :

cargo install wasm-bindgen-cli --version 0.2.87

需要保证的是,wasm-bindgen-cli与wasm-bindgen版本要一致,好的,我们继续编译,发现不会再停在安装wasm-bindgen上,而是又出现了新的问题:
在这里插入图片描述
生成的文件夹中没有package.json文件,没有这个文件,再后续的启动环节中,无法找到对应的wasm包,通过问题排查,发现需要手动在cargo.toml中添加:

[package.metadata.wasm-pack.profile.release]
wasm-opt = false

至此,问题就全部解决了,跟着教程启动服务后,访问服务器便可以看到alert弹窗了。


总结

官方文档通常是我们接触技术最直接最安全的文档,但是或许因为迭代之类的问题官方文档会忽略一些细节问题,这就需要开发者收集整理继而解决自己的问题。

相关文章:

【Rust WebAssembly 入门实操遇到的问题】

Rust WebAssembly 入门实操遇到的问题 什么是WebAssembly跟着教程走wasm-pack build error总结 什么是WebAssembly WebAssembly&#xff08;简称Wasm&#xff09;是一种基于堆栈的虚拟机的二进制指令 格式。Wasm 被设计为编程语言的可移植编译目标&#xff0c;支持在 Web 上部…...

掌握CMake中的变量:设置、使用及实际应用示例详解

掌握CMake中的变量&#xff1a;设置、使用及实际应用示例详解 在CMake中&#xff0c;变量的设置和使用是管理构建配置的核心部分&#xff0c;它使得项目配置更加灵活和动态。变量在CMake中用于保存各种数据&#xff0c;如路径、选项值或文件列表&#xff0c;可以在整个CMake配…...

React基础知识三 router路由全指南

现在最新版本是Router6和Router5有比较大的变化&#xff0c;Router5和Router4变化不大&#xff0c;本文以Router6的写法为主&#xff0c;也会对比和Router5的不同。比较全面。 安装路由 npm i react-router-dom基本使用 有两种Router&#xff0c;BrowserRouter和HashRouter&…...

[VUE]框架网页开发02-如何打包Vue.js框架网页并在服务器中通过Tomcat启动

在现代Web开发中&#xff0c;Vue.js已经成为前端开发的热门选择之一。然而&#xff0c;将Vue.js项目打包并部署到生产环境可能会让一些开发者感到困惑。本文将详细介绍如何将Vue.js项目打包&#xff0c;并通过Tomcat服务器启动运行。 1. 准备工作 确保你的项目能够正常运行,项…...

k8s Quality of Service

文章目录 QoS 分类规则QoS 类别影响创建 QoS 分类的案例1. Guaranteed QoS 示例示例 YAML 文件&#xff1a; 2. Burstable QoS 示例示例 YAML 文件&#xff1a; 3. BestEffort QoS 示例示例 YAML 文件&#xff1a; 4. 混合 QoS 示例&#xff08;多个容器&#xff09;示例 YAML …...

顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测(Maltab)

顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测&#xff08;Maltab&#xff09; 目录 顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测&#xff08;Maltab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实…...

什么语言适合做 Serverless 开发?

随着云计算的普及&#xff0c;**无服务器架构&#xff08;Serverless Architecture&#xff09;**成为一种流行的开发模式&#xff0c;它使得开发者无需管理服务器基础设施&#xff0c;专注于编写应用逻辑。无服务器架构通常按需提供计算资源&#xff0c;能够灵活地扩展&#x…...

使用OpenCV和卡尔曼滤波器进行实时活体检测

引言 在现代计算机视觉应用中&#xff0c;实时检测和跟踪物体是一项重要的任务。本文将详细介绍如何使用OpenCV库和卡尔曼滤波器来实现一个实时的活体检测系统。该系统能够通过摄像头捕捉视频流&#xff0c;并使用YOLOv3模型来检测目标对象&#xff08;例如人&#xff09;&…...

【25春招前端八股文】——JS数据类型检测方式

检测数据类型 # typeof 总结&#xff1a;数组、对象、null都会被判断为object&#xff0c;其他判断都正确的类型。 可以检测基本数据类型null会检测为Object&#xff0c;因为null也是一个空的引用对象复杂数据类型只能检测function和Object 情况说明&#xff1a; 数组&#x…...

Kafka的学习路径规划

目录标题 1. 记&#xff08;记忆力&#xff09;Kafka核心概念Kafka关键配置 2. 懂&#xff08;理解力&#xff09;Kafka工作原理Kafka核心功能Kafka架构设计 3. 网&#xff08;知识网络&#xff09;技术栈整合用例和场景 4. 拓&#xff08;全面拓展&#xff09;学习材料多样化内…...

linux模拟试题

Linux 基础阶段考试笔试模拟试卷 审核人:王旺旺 一.填空题(每题 1 分,共 30 分) 1.验证 httpd 服务是否启动的命令是_______ 答:systemctl status httpd 或 netstat -anptl 或 ss -anpt 2.将目录 xxhf 下所有文件的所属组改为 user1 的命令是_______ 答:chown -R ,user1 …...

Qt-界面优化QSS

QSS介绍 先说下CSS&#xff1a; 在⽹⻚前端开发领域中, CSS 是⼀个⾄关重要的部分. 描述了⼀个⽹⻚的 "样式". 从⽽起到对⽹⻚美化的作⽤。 Qt 仿照 CSS 的模式, 引⼊了 QSS, 来对 Qt 中的控件做出样式上的设定 。 CSS的功能很强大&#xff0c;QSS要逊色一些&#…...

QT实战-qt各种菜单样式实现

本文主要介绍了qt普通菜单样式、带选中样式、带子菜单样式、超过一屏幕菜单样式、自定义带有滚动条的菜单样式&#xff0c; 先上图如下&#xff1a; 1.普通菜单样式 代码&#xff1a; m_pmenu new QMenu(this);m_pmenu->setObjectName("quoteListMenu"); qss文…...

深度学习基础03_BP算法(下)过拟合和欠拟合

目录 一、BP算法(下) 0、反向传播代码回顾 写法一&#xff1a; 写法二(更常用)&#xff1a; 1、BP中的梯度下降 1.数学描述 2.传统下降方式 3.优化梯度下降方式 指数加权平均 Momentum AdaGrad RMSProp Adam(常用) 总结 二、过拟合和欠拟合 1、概念 1.过拟合 …...

web vue 滑动选择 n宫格选中 九宫格选中

页面动态布局经常性要交给客户来操作&#xff0c;他们按时他们的习惯在同一个屏幕内显示若干个子视图&#xff0c;尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。 来看看如下的用户体验&#xff1a; 设计为最多支持5行6列页面展示后&#xff0c;右侧的布局则动…...

Spring Boot整合EasyExcel

Spring Boot整合EasyExcel主要涉及到以下几个步骤&#xff1a; 1.添加EasyExcel依赖到Spring Boot项目的pom.xml文件中。 2.创建数据模型类&#xff0c;用于映射Excel文件中的数据。 3.编写读取和写入Excel的服务。 以下是一个简单的例子&#xff1a; 1.添加EasyExcel依赖 …...

微软表示不会使用你的 Word、Excel 数据进行 AI 训练

​微软否认使用 Microsoft 365 应用程序&#xff08;包括 Word、Excel 和 PowerPoint&#xff09;收集数据来训练公司人工智能 (AI) 模型的说法。 此前&#xff0c;Tumblr 的一篇博文声称&#xff0c;雷德蒙德使用“互联体验”功能抓取客户的 Word 和 Excel 数据&#xff0c;用…...

JavaScript(一)

1.JavaScript 基本使用 2.JavaScript简单事件 3.JavaScript修改样式 4.JavaScript数据类型 JavaScript和Java有什么关系 知识点一 JavaScript基本使用 JS写在哪 还有一种写在中间的&#xff0c;也就是<head>里面 JS一些注意事项 JS修改元素内容 #JS获取对象<…...

Day 32 动态规划part01

今天正式开始动态规划! 理论基础 无论大家之前对动态规划学到什么程度,一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目,看我讲的理论基础,会有感觉 是不是简单题想复杂了? 其实并没有,我讲的理论基础内容,在动规章节所有题目都有运用,所以很重要!…...

winform跨线程更新界面

前言&#xff1a; 大家好&#xff0c;我是上位机马工&#xff0c;硕士毕业4年年入40万&#xff0c;目前在一家自动化公司担任软件经理&#xff0c;从事C#上位机软件开发8年以上&#xff01;我们在开发C#程序的时候&#xff0c;有时候需要在非Ui主线程更新界面&#xff0c;为了…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...