小白萌新 JSAR 开发者工具之初体验——好用！

🕗 发布于 2024-10-12 03:42 ar vr

前言

在程序开发的世界里，对于新手开发者来说，拥有一把称手的工具是至关重要的，在代码的海洋中探索，每一位新手开发者都渴望拥有一盏明灯，照亮他们前行的道路。这不，JSAR开发者工具，以其简洁的界面、易用的功能和强大的支持，以其用户友好和功能全面的特点，受到了大部分开发者的青睐。SAR开发者工具不仅仅是一个工具，更是一个引导者，帮助开发者们理解编程的概念，掌握开发的技能，并逐步构建起属于自己的项目。那么本文就来分享我作为一名初学者，对JSAR开发者工具的初次体验，以及它是如何帮助我开发的。

初识 JSAR

1. 什么是 JSAR

先来了解一下JSAR，其实JSAR是可嵌入空间的 Web 运行时，它支持开发者使用类似于 Web 的技术来开发可嵌入空间的空间小程序。简单来说，它可以帮助开发者将 Web 技术嵌入到某个空间场景中独立运行。其中，可嵌入空间和Web 运行时详解如下：

可嵌入空间：是指在当前场景中通过定义长宽高划定一块子空间给一个单独的应用程序（即空间组件）使用，空间组件可以是一个 3D 物体，也可以是一个 2D 界面，当然也可以是带 GUI 的 3D 物体。
Web 运行时：代表 JSAR 可以运行基于 Web APIs 实现的 JavaScript / TypeScript 代码，同时也可以运行 WebAssembly。

2. JSAR 的核心功能

关于JSAR 的核心功能，分为以下几个方面：

空间运行安全
支持 Web-standard APIs
支持 TypeScript
支持 Babylon.js 进行场景开发
使用 Visual Studio Code 即可进行 3D 开发
可嵌入 Unity 场景中运行

3.JSAR 的目标

关于JSAR 的目标，主要体现在：

保证空间组件的隔离性，运行互不侵扰
面向 Web 开发者设计，降低开发者的学习成本
优化空间组件的离线体验和性能，去除用户对于 Web 技术的刻板印象

4.使用场景

关于JSAR 的使用场景，还是得根据开发者实际情况来定，具体可通过下面来区分：

（1）如果你是 YodaOS-Master 开发者，满足下面任意一条，就可以考虑使用 JSAR 来开发你的应用：

你希望做一些放在桌面的小摆件：宠物、地球仪、股票信息等；
你希望做一些 2D+3D 结合的场景，比如地图助手、商品展示等；
你拥有 Web 开发经验。

（2）如果是希望实现如下功能，那么你不应该选择 JSAR：

你希望开发独立的空间应用；
你希望开发一个大型游戏；
你希望给用户一个封闭的体验。

配置开发环境

关于配置开发环境的操作，主要是通过安装 JSAR DevTools for Visual Studio Code 配置 JSAR 空间组件的开发环境，拓展的安装方式有两种：

通过 VS Code 的拓展商店安装：RokidMCreativeLab.vscode-jsar-devtools ，具体安装链接：JSAR Devtools - Visual Studio Marketplace ，具体操作如下图所示：

通过 VS Code 的拓展安装包（.vsix）安装

1、安装 Visual Studio Code

如何已经安装了 Visual Studio Code，可以跳过这一步；如果未安装Visual Studio Code，可以前往 Visual Studio Code - Code Editing. Redefined 下载安装 Visual Studio Code，需要注意的是要确保你的 Visual Studio Code 版本大于等于 1.80.0，切记！

2、安装 Node.js

如何已经安装了 Node.js，可以跳过这一步；如果未安装Node.js，请前往 Node.js — Run JavaScript Everywhere 下载安装 Node.js，在安装成功后，通过以下命令查看 Node.js 和 npm 版本：

$ node -v $ npm -v

需要注意的是，请确保Node.js 版本大于等于 18.0.0，或选择最新的 LTS 版本，切记！

3、安装 JSAR DevTools

（1）通过商店安装

可以点击 JSAR DevTools 具体链接： JSAR Devtools - Visual Studio Marketplace安装, 或通过在 VSCode 拓展市场搜索 “JSAR DevTools”。

（2）通过 .vsix 安装

首先需要下载最新的 .vsix 安装包，下载地址：vscode-jsar-devtools-latest.vsix 具体链接：https://jsar.netlify.app/installer/vscode-jsar-devtools-latest.vsix ；
然后，打开 Visual Studio Code；
按下 Ctrl + Shift + P，输入 "Extensions: Install from VSIX..." ；
选择刚刚下载的 .vsix 安装包；
点击确定即可。

项目创建及运行

关于新建项目，其实JSAR 可以通过多种方式初始化项目，具体如下所示：

通过 Npm 命令本地创建
通过 GitHub Template 创建为 GitHub 项目

1、通过 Npm 创建

开发者可以通过 Npm 创建，但需要先安装 Node.js，安装完成后，打开终端，执行如下命令：

1$ npm init @yodaos-jsar/widget

该命令会按照下面的步骤初始化项目：

下载最新的模版项目 M-CreativeLab/template-for-jsar-widget 具体链接：https://github.com/M-CreativeLab/template-for-jsar-widget
根据输入更新 package.json 中的项目名称运行成功后，会获得一个 package.json，可以按照如下编写：

{
  "name": "jsar-gallery-rokid-jungle",
  "displayName": "Rokid Jungle",
  "version": "1.0.0",
  "description": "The mstudio gallery for JSAR",
  "main": "main.xsml",
  "files": [
    "icon.png",
    "main.xsml",
    "lib/*.ts",
    "model/foobar.glb"
  ],
  "icon3d": {
    "base": "./model/foobar.glb"
  },
  "author": "your name and email",
  "license": "MIT",
  "devDependencies": {
    "@yodaos-jsar/types": "^1.4.0"
  }
}

在初始化成功后，为了让项目正常运行，还需要安装依赖，执行如下命令：

$ npm install

它用于安装空间小程序的类型定义文件，这样可以在开发过程中获得类型检查和自动补全的功能。

2、通过 GitHub Template 创建

如果想要通过本地创建项目，请忽略这一小节。直接打开 M-CreativeLab/template-for-jsar-widget 具体链接：https://github.com/M-CreativeLab/template-for-jsar-widget后，点击 Use this template 按钮，创建一个新的 GitHub 项目，具体如下所示：

然后点击Create repository from template 按钮，将开始创建一个新的 GitHub 项目，或者也可以直接点击这里，具体链接：https://github.com/new?template_name=template-for-jsar-widget&template_owner=M-CreativeLab，如下所示：

然后按照上图所提示的，填写相关信息即可，这样创建好的项目就是一个 JSAR 空间小程序项目，它同样包含模版项目中的文件，以下是一些通过 GitHub Template 创建的项目：

需要注意的是，如果通过 GitHub 项目创建的 JSAR 空间小程序，推荐大家给项目添加 "jsar-widget" 的主题（Topic），这样可以方便 JSAR 开发团队以及社区在 GitHub #jsar-widget 上发现我们的项目，具体链接：https://github.com/topics/jsar-widget。

3、运行

上面已经创建了一个项目，但是还没有运行起来，接下来就来看下如何运行项目，JSAR 提供了三种方式运行项目，具体如下所示：

VSCode 拓展
Web 浏览器
Rokid AR Studio

大家可以根据自身喜好来选择对应的运行方式。

（1）VSCode 拓展

首先，需要打开任何 *.xsml 文件；
并选中打开的 Tab 页，在右上角可以找到打开场景视图的按钮；
点击按钮，就可以打开场景视图；

在打开场景视图后，有两个功能按钮：

重置位置，将场景视图的位置重置到原点
刷新，重新加载场景视图

可以在需要时，点击这两个按钮。另外，当我们通过编辑器修改了项目文件时，场景视图会自动刷新。开发者也可以通过拓展进行真机调试来运行项目，具体链接：YodaOS JSAR: The embeddable AR runtime for JavaScript Developers

（2）Web 浏览器

其实JSAR 提供了一个在浏览器中即可打开的场景视图，来运行你的项目，使用：

YodaOS JSAR: The embeddable AR runtime for JavaScript Developers{你的XSML地址}

比如：

通过 GitHub Raw YodaOS JSAR: The embeddable AR runtime for JavaScript Developers
通过 jsDelivr YodaOS JSAR: The embeddable AR runtime for JavaScript Developers

而且JSAR Playground 也支持运行你本地的项目，但是需要在本地启动一个 http 服务，比如：

$ npm install serve -g

安装serve 后，进入你的项目目录，运行：

$ serve -p 8080 --cors

需要注意的是，请务必添加 --cors 参数，否则会存在跨域访问问题，这是因为 localhost 域名和 jsar.netlify.app 域名不同。

然后验证你的服务是否正常运行，通过浏览器访问 http://localhost:8080/main.xsml，显示如下：

<xsml version="1.0"> <head> <title>Poker</title> <script src="./lib/main.ts"></script> </head> <space> </space> </xsml>

具体的路径需根据项目结构而定，如果URL 如上一样正常返回了 XSML 内容，那么就可以将 url 参数改为本地 HTTP 服务的 XSML 地址，比如：

YodaOS JSAR: The embeddable AR runtime for JavaScript Developers

（3）Rokid AR Studio

需要借助Rokid的相关工具，这里不在赘述，详情参见链接：Rokid 开发者论坛

4、打包（Package）

在空间组件运行并调试通过之后，可以将其打包成一个独立的文件，以便后续发布和真机调试。需要注意的是，当前打包的空间小程序需小于10MB，打包时若拓展发现空间小程序超过，会提示打包失败，开发者可以通过 gltf-transform 工具进行模型压缩，具体链接：https://gltf-transform.dev/，或者通过其他方式优化你的包内容大小，具体如下所示：

如上图所示，在项目的空白处右键，选择 "JSAR: Package" 即可打包项目，然后就能在当前目录下看到一个 {name}-{version}.idp 的文件，其中，name 和 version 分别是配置在 package.json 中的名称和版本号。

（1）什么是 .idp？

其实.idp 是 JSAR 的打包文件格式，它是一个压缩包，包含了空间组件的所有资源文件，包括模型、脚本、配置文件等。.idp 文件代表：Interactive Digital Product，即交互式数字产品，它表示一个在虚拟空间（元宇宙）中的一个跨场景的数字产品，用户可以与之交互。

初体验感受

作为萌新小白选手，通过本次对JSAR的安装及使用，个人觉得是非常棒的体验，首先是安装步骤非常简单，几乎是傻瓜式安装，无需过多烧脑配置。其次就是关于通过JSAR创建项目，也是非常方便快捷，而且JSAR也提供了多种选择，适合不同人的不同喜好，非常有人性化。还有就是JSAR的打包也是非常简单好用，经过本文的体验学习，收获颇多，再来最后简单总结一下。

1、功能体验

代码编辑：JSAR 的代码编辑器非常强大，它支持语法高亮、代码补全、自动缩进等功能，让编码过程更加流畅。
调试功能：JSAR 的调试功能是我最喜欢的部分。它提供了断点、步进、查看变量等调试工具，让查找和修复 bug 变得简单。
打包与部署：对于前端项目，JSAR 支持一键打包和部署，极大地简化了发布流程。

2、实践案例

项目创建：我首先使用 JSAR 创建了一个简单项目，新建项目向导非常直观，引导我完成了项目结构的搭建；
编码实践：在编码过程中，我体验到了 JSAR 带来的便利，编辑器的智能提示和代码补全功能都大大提高了我的开发效率。
调试体验：在调试环节，我设置了几个断点来测试一段逻辑代码。JSAR 的调试器非常直观，让我能够清晰地看到代码执行过程中变量的变化情况。
打包部署：最后我尝试了 JSAR 的打包部署功能，整个过程一键完成，无需复杂的命令行操作，非常适合新手。

结束语

通过本文的分享，随着体验的深入，我觉得JSAR开发者工具非常好用，它不仅让我在开发使用的时候变得更加轻松，还让我在使用的时候体验非常丝滑好用。个人觉得JSAR工具的易用性和强大功能，无疑是开发者的一大福音，也期待着继续利用这个强大的工具，探索开发过程中的更多可能，并在未来的开发道路上不断进步。未来，期待JSAR 能够不断更新迭代，增加更多实用功能，帮助更多像我一样的新手开发者快速成长。最后，我也鼓励每一位开发者，多使用有像JSAR这样的工具，会助你在编程的道路上越走越远！

原文地址：https://blog.csdn.net/CC1991_/article/details/142860530

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：一文熟悉mysql的访问方法
下一篇：ESP32—c3实现网页显示ADC电压并实时更新

聚观早报 | 苹果重磅更新；OpenAI推出ChatGPT Canvas
聚观早报每日整理最值得关注的行业重点事件，帮助大家及时了解最新行业动态，每日读报，就读聚观365资讯简报。整理丨Cutie10月1日消息苹果重磅更新OpenAI推出ChatGPT CanvasMeta
阅读更多2024-10-12
大健康零售电商的智囊团：知识中台的应用与影响
探讨知识中台在大健康零售电商中的应用及其优势。
阅读更多2024-10-12
前端优化之路：git commit 校验拦截
xxx 为自定义的脚本名，会使node打开并执行指定目录下的js脚本文件，所以node后跟着的是自定义的脚本存放地址。在项目package.json中，与scripts同级层配置钩子，npm run
阅读更多2024-10-12
软件设计师---计算机组成原理
控制部分的功能是判断CPU要访问的信息是否在Cache存储器中，若在即为命中，若不在则没有命中。计算机在执行程序过程中，当遇到急需处理的事件时，暂停当前正在运行的程序，转去执行有关服务程序，处理完成后
阅读更多2024-10-12
安装雷池社区版，保护网站安全
安装雷池前请确保你的系统环境符合以下要求 - 操作系统：Linux - CPU 指令架构：x86_64 - CPU 指令架构：支持 ssse3 指令集
阅读更多2024-10-12
rpc中常用的数据格式：Protobuf 图文详解
protobuf也叫protocol buffer，是google 的一种数据交换的格式，它跨语言、跨平台。可以实现多种语言文件的数据传输实现（java、c#、c++、go 和 python 等），如
阅读更多2024-10-12
面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？
项目的目录结构很重要，因为目录结构能体现很多东西，怎么规划目录结构可能每个人有自己的理解，但是按照一定的规范去进行目录的设计，能让项目整个架构看起来更为简洁，更加易用。这样做的好处在于，无论你的模块文
阅读更多2024-10-12
【harmonyOS开发笔记3】ArkTS中数组的使用
数组：是一个容器，可以存储多个数据定义数组的格式：示例：通过索引从数组中取值，格式：注意数组存的数据类型，必须与数据声明的数据类型一致
阅读更多2024-10-12
LSTM-Transformer时间序列预测（单输入单预测）——基于Pytorch框架
在我们的模型中，我们使用了Transformer编码器来提取输入序列中的特征。Transformer的核心优势在于其自注意力机制，能够捕捉序列中不同位置之间的依赖关系。在我们的模型中，LSTM解码器负
阅读更多2024-10-12
Android常用界面控件——ProgressBar
android:id: 设置ProgressBar的唯一标识符。和: 设置ProgressBar的宽度和高度。style="?: 设置ProgressBar的样式为水平进度条。: 设置Pro
阅读更多2024-10-12