快速入门

更新时间 : 2021-07-29 15:54:27

该程序提供了一个简易的编辑器，在用户编辑上传好素材后，可以提交任务到 VECloud 提供的渲染服务， 等待渲染完成后，用户可以看到渲染的视频。

测试程序使用了 VECloud 的存储和测试渲染服务，VECloud 会定期清空测试数据和文件

使用步骤

• 进入 h5 文件夹，该项目是一个基于 React 的项目。
• 执行 yarn install 安装依赖包。
• 依赖包安装完成，执行 yarn start 运行项目。

编辑器基本步骤

1. 读取模板 config.json 文件，解析后获取 assets 数组
2. 遍历 assets 中有 ui 字段的元素
3. 根据 group 字段分组，每个 group 是一个编辑界面
4. 遍历 group 中的元素，根据元素类型，位置，缩放，移动 生成编辑界面
5. 按照给定的配置摆放图片素材，并截图
6. 按照给定的配置摆放文字，并截图
7. 获取编辑好的素材数据提交到服务器

开发文档

• 标准模板 ui2.0详解
• 模板素材替换规范

项目结构

  | - dist/                             --- 打包后的文件目录
| - node_modules/                       --- 项目依赖文件目录
| - public/                             --- 静态资源
| - src/                                --- 核心代码目录
      | - assets                             --- 图片资源
      | - components/                        --- 组件存放目录
          | - BotSar                           --- 编辑器底部导航栏
          | - EditMain                         --- 编辑器主文件
          | - FontColor                        --- 字体颜色组件
          | - pagehead                         --- 头部导航
      | - models                             --- models层 + controller层
      | - pages/                             --- 视图层
          | - .umi                            --- umi运行自动生成, 不可修改
          | - compile                         --- 编辑页面
          | - edit                            --- 模板详情
          | - list                            --- 首页
          | -videoPlay                        --- 渲染完成页面
      | - services                          --- 数据接口层
          | - materialList                    --- 首页接口
          | - templateList                    --- 编辑接口
      | - types
      | - utils/                            --- 工具类
          | - lib/                            --- 首页接口
              | - Affine.js                    --- 矩阵仿射变换支持
              | - Cropper.js                   --- 截图
              | - Exifimage.js                 --- 修复截图照片
              | - ParseConfig.js               --- 解析组装数据
              | - ReplaceableJson.js           --- 替换json
              | - Upload.js                    --- 上传组件
          | - commonReducers.js
          | - index.js
          | - request.js                     --- 网络请求 + 延迟处理 + 错误处理
          | - requestMiddleLayer.js
          | - router.js                      --- 路由列表
          | - Storage.js                     --- 封装localStorage
          | - userPrompt.js
      | - api.js                           --- 接口api层
      | - env.js                           --- 环境配置
      | - global.css                       --- 全局css样式
  | - .editorconfig
  | - .env                          --- 启动项目自定义端口配置文件
  | - .eslintrc                     --- 自定义eslint配置文件
  | - .gitignore
  | - .prettierignore
  | - .prettierrc
  | - .umirc.js                     --- umi项目配置文件
  | - package.json
  | - webpack.config.js

运行示例

使用浏览器(推荐Chrome)打开, 并调出开发工具模拟手机,按步骤操作,即可看到渲染结果