开发要点

一些概念

原则

  1. 原则上，我们应该将一个活动的所有可配置的信息，都存储在配置表中，避免部分配置数据存储到数据库导致活动配置信息分散。
  2. 原则上，我们不应该特殊化处理任何模板，我们只提供通用的组件、模块，来达到能够支持这个模板可配置。
  3. 原则上，我们应该将所有工作台的常量配置写在/src/config/index.js中，但不应该将一些动态数据写到里面去。
  4. 原则上，配置表的设计要支持可拓展，这也是为什么你会看见很多配置项都是对象，而不是直接一个数字或者字符串。

工作台的工作原理

简单来说就是json编辑器。

核心数据就是一份配置表，核心工作流程就是编辑、保存这份配置表。其他接口、功能只是辅助我们去做一些限制、提示，或是用于展示而已。

保存更新的机制

  1. 一般情况下，每个组件都有change方法，每当组件的值被修改以后，就会发送保存该配置的请求。
  2. 当组件被包裹在一个可选模块中时，组件的值被修改以后不会触发保存机制，只有点击可选模块的启用/保存按钮时才会触发保存机制，并且保存的是整个模块的数据。

概览

核心文件介绍

整个工作台的入口文件：/src/main.js。

工作台的环境配置文件：/config/index.js。（接口域名、抽取的中文等等）

工作台的API接口文件：/config/api/*.js。

配置表相关

入口文件：/js/config/index.js。

组装器：/js/config/initializer.js。

组件默认配置：/js/config/default-elements/*.js。

容器默认配置：/js/config/default-containers/*.js。

预设模块默认配置：/js/config/preset-modules/*.js。

配置表校验方法：/js/config/validators/config.js。

组件校验方法：/js/config/validators/elements/*.js。

模块校验方法：/js/config/validators/modules/*.js。

初始化

创建工作台后，在正式可交互前，会进入生命周期的不同阶段，关于各个声明周期中做了哪些工作，可以参考这个文档。

如果要快速理解工作台是如何初始化的话，大致是以下流程：

  1. 初始化Store，也就是vuex，会去获取配置表、校验配置表、组装配置表。
  2. 根据组装好的配置表，初始化Router。
  3. 根据组装好的配置表，初始化Viewmodel。

Store

主要分为以下几个模块:

  • activity 活动相关数据（例：奖品配置）
  • app 应用相关数据（例：屏幕尺寸，环境变量）
  • user 用户相关数据（例：账户信息，积分配置）

Router

使用的是hash模式，然后route的path是页面的ID，例如基本设置页的ID为base，那么地址就是 /#bas，以此类推。

Plugin

  • event-bus，已注入到Vue原型中，通过this.$bus可以访问到，主要用于事件通知。
  • hw-icon，全局Vue组件，主要用于展示自定义icon（有可能是SVG，有可能是png之类的）
  • hw-qrcode，已弃用，皆因目前二维码都是服务端返回的。

如何开发

添加一个组件需要做什么？

  1. 在/src/js/config/default-elements/目录下，添加组件的默认配置。（文件名称必须和组件的type完全一致。）
  2. 在/src/components/elements/目录下，添加组件。
  3. 在/src/js/view-model/element.js中注册组件。
  4. 在/src/js/config/validators/elements/目录下，添加组件的校验方法。（非必须，文件名称必须和组件的type完全一致。）

添加一个预设模块需要做什么？

  1. 在/src/js/config/preset-modules/目录下，添加预设模块的默认配置。（文件名称必须与活动的配置表中的模块ID完全一致。）
  2. 在/src/js/config/validators/modules/目录下，添加预设模块的校验方法。（非必须，文件名称必须和组件的type完全一致。）

添加一个模态框需要做什么？

  1. 在/src/components/modals/目录下，添加模态框。
  2. 在/src/js/view-model/modals.js中注册模态框。

添加一个数据接口需要做什么？

  1. 在/src/config/*.js中，添加接口描述。（url、type、错误提示信息等等）
  2. 在/src/js/store/actions/*.js中，添加一个action。

如何在内网进行开发调试？

  1. 现在内网创建好一个活动，得到一个活动ID。
  2. 下载、安装好依赖后，执行npm run dev。
  3. 默认会打开localhost:8080，此时需要添加一个?game_id=xxx，xxx为刚刚得到的活动ID。
  4. 开发、调试。
  5. 想换一个活动的话，就把game_id换成想要测试的活动就可以了。

如何部署？

  1. 当前项目中，执行npm run build。
  2. 当前项目中，复制/dist/static目录到/24haowan_front_webCustom/24haowan/workspace/目录下，全覆盖。
  3. 当前项目中，复制/dist/index.html文件中的内容，到/24haowan_front_webCustom/24haowan/protected/views/webCustom/workbench2.php中，全覆盖。
  4. 提交代码。
  5. 通过test.24haowan.com/sync-code/进行部署更新。

当前的工作台的工作流程

相关的git仓库

results matching ""

    No results matching ""