3.2.6插件开发使用

插件开发使用

本小节将为您介绍在YonStudio或VSCode中以插件的形式构建VPA卡片。

  • 第一小节将为您介绍项目的构建、目录结构、以及如何输出一个打包好的zip卡片。
  • 第二小节将为您介绍如何在开发工具中开发调试 VPA 卡片。

1、hello world（基础了解）

1.1 项目构建

1、新建一个空文件夹，通过YonStudio打开（关掉欢迎使用页面）

2、左下角 --> 设置 --> 命令面板 --> VPA --> VPA:初始化开发环境 --> Yes

初始换VPA开发环境如下图所示 vsce-初始化环境

1.2 项目配置项

1、vpa.config.json 为项目的配置文件

2、src/目录下为待开发卡片的目录

3、可视化的 vpa.config.json 界面的 卡片开发清单：

  • 点击 运行 可以预览调试（需要登录才可以预览，参见第二小节：卡片开发）
  • 点击 源码开发 可以进入到 src/ 目录下进行开发
  • 点击 编译打包 可以将卡片打包为zip包，输出在 dist/ 目录下

项目目录结构及入口配置如下图所示： 项目目录结构及入口配置

1.3 输出zip包

点击vpa.config.json可视化界面对应卡片的 编译打包，即可将卡片打包为zip包，输出在 dist/ 目录下（参考上图：项目目录结构及入口配置）。

zip放到友空间后台资源管理平台即可使用。

2、卡片开发（进阶开发）

2.1 环境准备

1、保持手机和电脑在同一局域网下（推荐电脑开热点，手机连接）

2、若处于同一局域网下，点击可视化视图的 vpa.config.json 中的 新增会话 会出现 扫码登录 的二维码，用友空间扫码接收即可。

当然也可以手动输入

3、工具成功接收后，在 VPA 会话设置 中可以看到当前的 host 和 token

下图为环境准备的示意图： 环境准备

2.2 卡片开发

环境准备好之后点击对应卡片的 运行 按钮，即可生成对应的卡片预览，如下图所示： 卡片开发

2.3 项目打包

代码编辑完成后，点击 编译打包 按钮，即可将卡片打包为zip包，输出在 dist/ 目录下。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24