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