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/10/21