前端源码扩展

UDC自定义页面，是通过手写代码的方式，实现用户的自定义开发页面的需求。自定义核心是在页面形态较复杂的情况下，通过手写代码的方式进行开发实现。

  少于1分钟  

⚠️ 注：平台提供了多层次扩展能力，组件的扩展、Iframe的嵌套等，若存在无法实现的场景和交互时，优先考虑通过扩展局部的方式实现。 这种模式下，页面的其他控件依旧可以享受平台后续迭代带来的便利。 若一旦使用了自定义页面，则后续的页面的维护只能通过代码的方式进行维护。 故，慎用！！！

1. 开发前序准备

  1. 使用 React.js 进行基本开发
  2. 对应环境的Git仓库,账号,密码（需要授权申请，找对应的负责人沟通申请）
  3. 基本的前端开发环境(Node,VSCode……..)

2. 开发流程

自定义页面的开发流程核心分为是五个步骤

image.png

2.1. 生成代码工程

在 低代码设计器中创建页面

  1. 首先进入 UDC 页面设计器. 在设计器中创建实体,以及自定义页面。
  2. 保存页面后，点击页面右上角 “测试” 即可进行应用发布。
  3. 发布成功后 生成好的 React 源码 就会上传到 GIT 仓库。

img

image1.png

2.2. Git拉取源码

从 GIT 仓库 获取生成好的应用源代码

获取应用的源代码前，我们需要拿到应用的唯一标识“应用ID(appId)”或 “应用名称(appName)”，可通过下面图示获取

接下来我们进入 GIT 仓库， 通过 “应用名称(appName)” 找到对应的前端代码仓库，将代码克隆到本

⚠️Git的账号密码，需要单独的授权开通，故若没有账号密码，可找对应的技术负责人沟通

华为云仓库地址 : https://code.seeyoncloud.com/

运维负责人: 周龙波

2.3. 本地代码调试

2.3.1. 确定页面标识/页面URI

首先我们找到在设计器中定义的页面的 URL ， 在设计器-菜单-“查看页面属性” 中 找到页面标识 页面URI

2.3.2. 确定代码目录

进入 应用源代码目录后， 就可以看到 pc/mobile 两个终端的 代码。

比如我们进入 PC 目录中 ，根据页面标识 找到 customPage.tsx 文件， 此文件就是 支持 开发者实现自定义代码的文件。

小贴士: 自定义页面/栏目 只能在 pages/xxx 目录下 加 自定义代码，避免与自动生成的代码产生冲突, 导致自定义代码被冲掉

2.3.3. 安装依赖

  1. 如果 调试 PC 端代码 则进入 pc 目录执行 yarn install 以便安装前端 NPM 包
  2. 如果 调试 Mobile 端代码 则进入 mobile 目录执行 yarn install 以便安装前端 NPM 包

2.3.4. 调整 webpack 代理

修改 webpack-params.js 的 LOCAL_RUNTIME_ENV 变量

LOCAL_RUNTIME_ENV 变量的值参考 webpack-proxy.js 中的 键

2.3.5. 本地启动

  1. 如果 调试 PC 端代码 则进入 pc 目录执行 yarn start
  2. 如果 调试 Mobile 端代码 则进入 mobile 目录执行 yarn start

启动成功后进入浏览器输入地址就可以访问了

下面是一个示例:

  1. 本地登录: http://localhost:3000/login
  2. 登录成功后,访问具体的页面：http://localhost:3000/main/portal/hh3881652103519948446/zidingyiyemian
  • main/portal: 固定的主应用地址
  • hh3881652103519948446: 当前应用的英文名称
  • zidingyiyemian: 当前应用下某个具体页面的 URL

2.3.6. 前后端接口交互

  1. 后端提供 restFull API
  2. 前端通过 fetch 等工具 调用 restFull API

2.4. Git推送页面代码

自己添加的自定义代码 调试完成后， 重新 push 到 远程 GIT 仓库

使用正常的 GIT 提交 推送流程, 将代码推送到远程仓库中

2.5. 打包构建

回到设计态重新 点击 “发布/构建/测试” 按钮

最后修改 August 26, 2024: docs: 前端源码扩展 内容修订 (1807716)