天工平台

# 如何快速生成一个规则项目

WARNING

只有管理员及超级管理员可以创建规则项目，普通用户可以协同规则项目

在说明如何使用规则项目之前，首先我们先了解两个概念，规则项目 和 规则组件。

规则项目： 一个业务方只可以修改的数据的项目，H5 页面由编辑平台拼接或者是一个外部链接

规则组件： 开发人员提供给业务方修改的 JSON 数据

# 第一步：开发一个规则组件

# 规则组件说明

TIP

  1. 规则组件提供一个 beforePublish 的生命周期，可以在规则发布前修改 data 中的数据。
  2. 规则项目中的业务类型是指数据还还需要其他的后端接入进行二次处理，如果只是简单静态资源数据的存取，选择无。如果需要接入其他的后端接口，请联系开发人员: 高舸。
  3. 规则组件中的config 和 data 是一对一的关系，config 中的控件类型，请参考 控件说明文档。

简单 demo :


export default {
    type: 'GaoKaoProject',
    name: '高考品牌',
    category: 'rule',
    async beforePublish(ctx) {
    },
    // 对应 config 中的配置
    data: {
        property: 'green'
    },

    config: {
      property: {
        text: '属性2',
        type: 'Select',
        value: 'red',
        options: [
          {
            text: '红色',
            value: 'red'
          },
          {
            text: '绿色',
            value: 'green'
          },
          {
            text: '蓝色',
            value: 'blue'
          }
        ]
      }
    }
  };

在UI组件中获取规则相关的数据，如下 willmount 所示:

  willMount: async function (ctx) {
    const { page } = ctx;
    let ruleData = page && page.variableStore && page.variableStore.get('config');
    if(ruleData) {
      Object.keys(ruleData).forEach(prop => {
        if(this.data[prop]) {
          this.data[prop] = ruleData[prop]
        }
      });
    }
  },

规则组件的一个完整的 Demo:Git 地址 (opens new window)

# 第二步：开发一个规则项目

# 一、使用外部链接的规则项目

# 注意事项

如果这个外部链接是由开发人员使用代码开发的外部链接，需要在本地使用天工平台提供的 GetConfig 接口来获取相关的配置，API 请参考wiki (opens new window)。

部分代码:


@api/index 文件：
// 获取url参数的值
function getUrlParmas (url) {
  const vars = {}
  url.replace(/[?&]+([^=&]+)=([^&#]*)/gi, function (m, key, value) {
    vars[key] = value
  })
  return vars
}

//  获取课程配置
export function getProjectConfig (ruleId, env) {
  const params = getUrlParmas(location.href)
  return axios({
    url: 'https://booster.xueersi.com/h5EditStation/ConfigCollection/GetConfig',
    method: 'post',
    withCredentials: true,
    data: qs.stringify({
      ruleId: params.ruleId || ruleId,
      type: params.type || env
    })
  })
}

vue 文件：
import { getProjectConfig } from '@api/index'

async created () {
    const ruleId = this.$route.query.ruleId
    const env = this.$route.query.type ? 'gray' : 'prod'
    const res = await getProjectConfig(ruleId, env)
    if (res.data.code == 0) {
        this.initData(res.data.data.config)
    } else {
        console.log('error:', res.data.msg)
    }
}

# 二、使用平台拼接页面的规则项目

TIP

拼接 H5 页面需要使用数组循环渲染时，请参考 数据源功能。

# 其他

规则项目整体流程图如下：

xes-save

←