3.5.2代码实战1：Hello World

Hello World

在这个教程中，我们将引导开发者完成一个简单的组件开发。

建议没有了解 VPA运行流程 和 本地开发配置 的伙伴回头看一下！！

1. 开发前准备

开发环境

在开发组件之前，我们确保已经正确的检出了仓库，并且已经正确的设置好了开发环境。

资源 ID

术语：资源ID（vpaUIResourceID）

所有的自定义组件的加载都是围绕着资源 ID 进行的，所以在开发组件之前，我们需要先获取一个资源 ID。

获取资源 ID 的方式有两种：

  • 通过 VPA 意图管理和移动资源平台 创建真实的去配置意图，关联资源 ID。（适合有账号的情况下使用）
  • 通过本地 定制响应数据 (本地开发配置)，假设一个资源 ID。（适合没有账号的情况下使用）

2. 进入开发阶段

在本地关联资源 ID 和源码

当我们拿到资源 ID 以后，就可以针对这个资源 ID 进行开发了。但是在开发之前，我们需要先关联资源 ID 和源码的位置。 这样一来，VPA 在得到资源 ID 以后，就能够正确的从开发环境中加载我们的组件源码了。

关联资源 ID 和源码的方式参考 本地开发拦截。

初始化组件

首先在 /src/@remote 目录下新建文件夹，命名为 Hello ，文件夹下新建 index.tsx 文件。

也可以在 /src/@remote 目录下直接新建 Hello.tsx 文件。（其实两种方式都是一样的，如果有一些附件或者是 css 等资源，建议使用文件夹的方式，来统一收纳资源）

export default function Hello () {
  return (
    <div>Hello world</div>
  )
}

以及可以参考开发规范相关的内容，来完善组件的开发。

这里作为 Hello World 教程，我们就不再过多的介绍开发规范的内容了。直接进入下一步。

开发和测试阶段

可以在浏览器中打开 VPA 的页面，然后在输入框中输入我们的意图，然后点击回车，就可以看到我们的组件已经被加载出来了。然后根据我们的开发需求，和数据模型进行开发和测试。

3. 打包发布

当我们完成了组件的开发以后，就需要对组件进行打包构建了。

打包组件，生成 zip 包

打包方式有两种：任选其一。

  • 配置要打包的环境变量BUILD_CARD，使用 npm run buildCard 命令进行打包。
  • 使用 npm run buildCard [卡片路径] 命令进行打包。

打包完成以后，会在 /${process.env.OUTPUT_DIST} 目录下生成一个 vc_Hello.20230623.xxx.zip 的压缩包，这个压缩包就是我们的组件包。

上传组件包

进入【移动资源管理后台】，然后找到相应的组件，进行编辑，然后上传组件包。

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