摘要：如何設(shè)計(jì)高擴(kuò)展的在線網(wǎng)頁(yè)制作平臺(tái)本文主要介紹如何設(shè)計(jì)一個(gè)高擴(kuò)展的在線網(wǎng)頁(yè)制作平臺(tái)，會(huì)交代一些背景和最終的效果以及核心設(shè)計(jì)方案。市面上可使用的一些在線制作推廣平臺(tái)制作的頁(yè)面又不能很好地結(jié)合到自己的業(yè)務(wù)流程里面。

本文主要介紹如何設(shè)計(jì)一個(gè)高擴(kuò)展的在線網(wǎng)頁(yè)制作平臺(tái)，會(huì)交代一些背景和最終的效果以及核心設(shè)計(jì)方案。體驗(yàn)地址: https://godspen.ymm56.com

官網(wǎng)： https://godspen.ymm56.com/

開(kāi)源代碼： https://github.com/ymm-tech/g...

使用手冊(cè)： https://godspen.ymm56.com/doc...

在線體驗(yàn)： https://godspen.ymm56.com/adm...

私有部署： https://godspen.ymm56.com/doc...

運(yùn)營(yíng)活動(dòng)對(duì)一些簡(jiǎn)單的動(dòng)畫(huà)提供支持，方便做一些入場(chǎng)和出場(chǎng)的動(dòng)畫(huà)，提升活動(dòng)的交互感，我們使用了 animate.css 提供的一套css動(dòng)畫(huà)。下面提供簡(jiǎn)單的展示

合成組件就是選擇已有的節(jié)點(diǎn)保存為一個(gè)通用的組件，方便下次直接使用

使用組合組件

導(dǎo)出組合組件。

頁(yè)面模板的目的和組合組件類(lèi)似，都是提供已經(jīng)做好的內(nèi)容，運(yùn)營(yíng)快速選擇使用達(dá)到快速上線活動(dòng)的目的,下面是簡(jiǎn)單演示

2018年3月份開(kāi)始，隨著運(yùn)滿滿的快速發(fā)展，開(kāi)始在頻繁的迭代各種活動(dòng)，那時(shí)最快的方式就是拷貝老的活動(dòng)項(xiàng)目，然后按需求修改，接著上線，然而這種方式很快就遇到了瓶頸，迫使運(yùn)營(yíng)團(tuán)隊(duì)也會(huì)去尋找一些第三方平臺(tái)去滿足自己的運(yùn)營(yíng)要求，不過(guò)由于定制化弱和用戶信息沒(méi)打通導(dǎo)致沒(méi)辦法大量使用，還是只能等待前端資源排期，兩個(gè)比較突出的問(wèn)題。

產(chǎn)品每個(gè)活動(dòng)都需要前端人員介入，甚至替換一個(gè)簡(jiǎn)單的圖標(biāo)和簡(jiǎn)單的布局，都需要排期等待，吃掉了50%的前端資源。

市面上可使用的一些在線制作推廣平臺(tái)制作的頁(yè)面又不能很好地結(jié)合到自己的業(yè)務(wù)流程里面。

轉(zhuǎn)盤(pán)抽獎(jiǎng)，如果使用第三方平臺(tái)需要在活動(dòng)結(jié)束后把抽獎(jiǎng)名單導(dǎo)出，然后導(dǎo)入自己的平臺(tái)里面去做匹配，然后在篩選中獎(jiǎng)名單，很不方便。

拉新送紅包，使用第三方的平臺(tái)如果用戶提交了拉新的手機(jī)號(hào)。需要定期去同步數(shù)據(jù)然后送紅包，不能對(duì)接自己的平臺(tái)做到實(shí)時(shí)。

針對(duì)這些問(wèn)題團(tuán)隊(duì)迫切需要一個(gè)平臺(tái)來(lái)提供運(yùn)營(yíng)快速創(chuàng)建活動(dòng)，開(kāi)發(fā)也能在這平臺(tái)做一些功能擴(kuò)展。最好能滿足已下幾個(gè)要求：

豐富的組件提供運(yùn)營(yíng)能自主創(chuàng)建頁(yè)面。

每個(gè)做好的頁(yè)面都可以設(shè)置為模板頁(yè)面，提供運(yùn)營(yíng)下次快速通過(guò)模板創(chuàng)建頁(yè)面簡(jiǎn)單修改然后發(fā)布。

提供常用動(dòng)畫(huà)然運(yùn)營(yíng)能創(chuàng)建炫酷效果的活動(dòng)。

提供每個(gè)活動(dòng)完整的數(shù)據(jù)分析方便運(yùn)營(yíng)查看效果，常規(guī)的pv，uv，以及自定義頁(yè)面的元素點(diǎn)擊打點(diǎn)和統(tǒng)計(jì)功能。

提供靈活的頁(yè)面管理，方便運(yùn)營(yíng)按組按項(xiàng)目維度給其他同事分配權(quán)限統(tǒng)一管理。

開(kāi)發(fā)人員可以為組件植入腳本靈活擴(kuò)展該活動(dòng)的功能，方便運(yùn)營(yíng)使用。

提供統(tǒng)一的組件開(kāi)發(fā)規(guī)范，方便開(kāi)發(fā)新的業(yè)務(wù)組件為運(yùn)營(yíng)提供更友好的使用方式。

針對(duì)這些要求我們做了碼良平臺(tái)，碼良是一個(gè)在線H5編輯器，用于快速制作H5頁(yè)面。用戶無(wú)需掌握復(fù)雜的編程技術(shù)，通過(guò)簡(jiǎn)單拖拽、少量配置即可制作精美的頁(yè)面，可用于營(yíng)銷(xiāo)場(chǎng)景下的頁(yè)面制作。同時(shí)，也為開(kāi)發(fā)者提供了完備的編程接入能力，通過(guò)腳本和組件的形式獲得強(qiáng)大的組件行為和交互控制能力。

下面會(huì)分享下我們的核心設(shè)計(jì)，這次主要重點(diǎn)說(shuō)明下面幾方面內(nèi)容

我們會(huì)介紹整體的架構(gòu)來(lái)了解一般的編輯產(chǎn)生頁(yè)面的基本思路，基于數(shù)據(jù)編程。

我們會(huì)介紹核心的組件如何設(shè)計(jì)，確?？梢宰杂蓴U(kuò)展組件能力

我們會(huì)介紹如何設(shè)計(jì)編輯器達(dá)到可自定義屬性的控制面板
備注（由于整體項(xiàng)目實(shí)現(xiàn)使用的VUE，所以后面有部分介紹具體技術(shù)實(shí)現(xiàn)的時(shí)候會(huì)以VUE的使用角度說(shuō)明。用其他框架的自行腦補(bǔ)）

整體架構(gòu)

整體架構(gòu)相對(duì)簡(jiǎn)單，核心就是定義一套標(biāo)準(zhǔn)的數(shù)據(jù)規(guī)范，提供一個(gè)編輯器去編輯這個(gè)數(shù)據(jù)，同時(shí)提供一個(gè)解析器去解析該數(shù)據(jù)，然后渲染出頁(yè)面，流程如下。

數(shù)據(jù)結(jié)構(gòu)

通過(guò)上面的圖看到每個(gè)頁(yè)面是由很多節(jié)點(diǎn)組成（node）,每個(gè)節(jié)點(diǎn)可以嵌套子節(jié)點(diǎn)。而每個(gè)節(jié)點(diǎn)包括的基本信息如下，備注文章后續(xù)提到的 nodeInfo 都是該節(jié)點(diǎn)對(duì)應(yīng)的如下數(shù)據(jù)

{
  "id": "truck/button1l",
  "type": "truck/button",
  "label": "按鈕1l",
  "version": "0.1.4",
  "visible": true,
  "style": {
      "position": "absolute",
      "width": "100px",
      "height": "40px"
  },
  "animate": [],
  "props": {
      "text": "輸入文字",
      "type": "danger",
      "click": []
  },
  "path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/button/0.1.4/index.js",
  "script": "",
  "events": []
}

每個(gè)組件比較核心的元素由如下幾部分組成

id 元素的唯一編號(hào)。方便代碼獲取和操作

type 組件的類(lèi)型。會(huì)根據(jù)不同的類(lèi)型加載不同的腳本資源，然后運(yùn)行加載完的腳本會(huì)創(chuàng)建一個(gè)VUE Component，然后會(huì)把這個(gè)Component 掛載到VUE全局，由于每個(gè)組件節(jié)點(diǎn)都是一個(gè) 動(dòng)態(tài)的 Component 組件。這時(shí)候只需要修改動(dòng)態(tài)組件的 :is 數(shù)據(jù)進(jìn)行內(nèi)容替換就好了。

label 組件別名。方便運(yùn)營(yíng)理解使用

version 組件版本。 每個(gè)組件都是有自己的版本的。

style 組件樣式

props 組件參數(shù)。每個(gè)組件都是有一些初始化參數(shù)的，這些參數(shù)都是營(yíng)銷(xiāo)人員在編輯器里面填寫(xiě)的。這些參數(shù)就存放在這里面，在擴(kuò)展編輯器屬性能力里面會(huì)詳細(xì)說(shuō)明

script 擴(kuò)展腳本。每個(gè)組件可以插入一些腳本代碼擴(kuò)展組件的功能。這些腳本創(chuàng)建的對(duì)象會(huì) mixin 到該組件對(duì)象里面，在組件設(shè)計(jì)里面會(huì)詳細(xì)介紹

event 組件綁定事件。 每個(gè)組件可以綁定常見(jiàn)dom事件。

child 孩子節(jié)點(diǎn)。

path 腳本路徑。 通過(guò)該路徑加載腳本創(chuàng)建組件對(duì)象。

上圖的頁(yè)面包括一個(gè)圖片，圖片下面兩個(gè)文字，圖片兄弟節(jié)點(diǎn)有個(gè)按鈕元素。對(duì)應(yīng)頁(yè)面的詳細(xì)數(shù)據(jù)結(jié)構(gòu)如下，可以感受下完整結(jié)構(gòu)。

{
  "id": "node",
  "type": "node",
  "visible": true,
  "style": {
  },
  "props": {},
  "child": [
      {
          "id": "truck/image15j",
          "type": "truck/image",
          "label": "圖片15j",
          "version": "0.1.4",
          "visible": true,
          "style": {
              "position": "absolute",
              "width": "320px"
          },
          "animate": [],
          "props": {
              "url": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1533366999689.png",
              "click": []
          },
          "path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/image/0.1.4/index.js",
          "script": "",
          "events": [],
          "child": [
              {
                  "id": "truck/text3l",
                  "type": "truck/text",
                  "label": "文本3l",
                  "version": "0.1.4",
                  "visible": true,
                  "style": {
                      "position": "absolute"
                  },
                  "animate": [],
                  "props": {
                      "text": "文字內(nèi)容1",
                      "click": []
                  },
                  "path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/text/0.1.4/index.js",
                  "script": "",
                  "events": []
              },
              {
                  "id": "truck/text3l5g",
                  "type": "truck/text",
                  "label": "文本3l",
                  "version": "0.1.4",
                  "visible": true,
                  "style": {
                      "position": "absolute",
                      "width": "114px"
                  },
                  "animate": [],
                  "props": {
                      "text": "文字內(nèi)容2",
                      "click": []
                  },
                  "path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/text/0.1.4/index.js",
                  "script": "",
                  "events": []
              }
          ]
      },
      {
          "id": "truck/button1l",
          "type": "truck/button",
          "label": "按鈕1l",
          "version": "0.1.4",
          "visible": true,
          "style": {
          },
          "animate": [],
          "props": {
              "text": "輸入文字",
              "type": "danger",
              "click": []
          },
          "path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/button/0.1.4/index.js",
          "script": "",
          "events": []
      }
  ],
  "script": [],
  "animate": [],
  "version": "0.1.0",
  "events": []
}

一句話小結(jié)：頁(yè)面是由很多節(jié)點(diǎn)遞歸生成，每個(gè)節(jié)點(diǎn)包含布局，事件，腳本，參數(shù)，版本等信息，然后編輯器編輯這些信息，解析器解析這些信息。

一個(gè)頁(yè)面都是由一個(gè)個(gè)遞歸嵌套的組件組成，組件是整個(gè)項(xiàng)目的最核心的一部分，為了讓組件具有擴(kuò)展能力，我們對(duì)組件的功能使用了 mixin 方式，通過(guò)基礎(chǔ)組件邏輯+自定義腳本的形式來(lái)生成組件。下面介紹下整體組件結(jié)構(gòu)和初始化流程，方便理解我們是如何實(shí)現(xiàn)的。

上圖左部分可以看到整個(gè)頁(yè)面都是由一個(gè)一個(gè)node節(jié)點(diǎn)組成，他們是一個(gè)樹(shù)狀結(jié)構(gòu)，每個(gè)node節(jié)點(diǎn)下面包含著一個(gè)組件對(duì)象做功能展示，下面是node節(jié)點(diǎn)的dom結(jié)構(gòu)，可以看到每個(gè)節(jié)點(diǎn)都是遞歸節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)內(nèi)部都包含一個(gè)動(dòng)態(tài)組件，每個(gè)動(dòng)態(tài)組件的通過(guò)nodeinfo.id為key的組件進(jìn)行渲染。

上圖右部分可以看到渲染流程。為了達(dá)到組件的高擴(kuò)展性，每個(gè)組件的功能包含兩個(gè)主要部分

組件代碼 ,每個(gè)組件都是有特定參數(shù)和特定功能的腳本實(shí)現(xiàn)，比如 圖片，富文本，分享，九宮格等組件，組件代碼通過(guò)對(duì)于的type 和 path 參數(shù)去加載對(duì)于的腳本獲取對(duì)象。

組件通過(guò)編輯器添加的腳本 , 編輯器可以為每個(gè)組件動(dòng)態(tài)添加腳本來(lái)增強(qiáng)對(duì)組件的操作能力。如下操作,可以看到一個(gè)組件可以添加多個(gè)腳本。每個(gè)腳本其實(shí)就是一個(gè)的vue組件，終這里面的代碼會(huì)創(chuàng)建對(duì)象 mixin 到最終的vue組件里面，所以你可以為組件擴(kuò)展各種功能進(jìn)行支持你的特殊業(yè)務(wù)。

一個(gè)節(jié)點(diǎn)的邏輯功能=組件邏輯+腳本1+腳本2+腳本3...
每個(gè)組件在根據(jù)自己的類(lèi)型加載對(duì)應(yīng)js腳本后，會(huì)對(duì)該組件 nodeInfo.script 里面的 邏輯進(jìn)行mixin. 然后創(chuàng)建一個(gè)最終的組件注冊(cè)到Vue.component 里面方便后續(xù)使用,核心代碼如下

// 通過(guò)加載到的組件腳本獲得的全局對(duì)象創(chuàng)建vue對(duì)象 window["image_1.0.3"] load組件腳本運(yùn)行后會(huì)生成的對(duì)象
var component = Vue.extend( window["image_1.0.3"]) 
// 遍歷所有加入的腳本混合組件對(duì)象中
nodeInfo.script.forEach((value)=>{
    component =component.extent(value)
})
// 以節(jié)點(diǎn)id為key，注冊(cè)最終組件對(duì)象
Vue.component(nodeInfo.id,component)
// 修改該節(jié)點(diǎn)的動(dòng)態(tài)組件 :is 參數(shù)為 該節(jié)點(diǎn)id
// done

一句話小結(jié)：通過(guò)不斷的mixin新的自定義腳本進(jìn)來(lái)擴(kuò)展組件能力

屬性編輯主要目的是開(kāi)發(fā)組件的人會(huì)暴露一些可配置的參數(shù)給運(yùn)營(yíng)人員在編輯器里面填寫(xiě)和修改。
比如選擇一個(gè)組件后再右側(cè)屬性面板可以對(duì)這個(gè)組件進(jìn)行一些屬性設(shè)置.

![](https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/ymm-maliang/access/ymm_1539684410392.png)

為了便于維護(hù)和擴(kuò)展，我們覺(jué)得一個(gè)組件的可配置數(shù)據(jù)包括簡(jiǎn)單數(shù)據(jù)，復(fù)雜邏輯數(shù)據(jù)，對(duì)應(yīng)可編輯屬性的部分也分為兩部分

編輯器提供基礎(chǔ)屬性編輯

編輯器能提供擴(kuò)展編輯編輯能力，主要針對(duì)運(yùn)營(yíng)方便操作，特征性的開(kāi)發(fā)組件屬性的編輯功能，提供對(duì)運(yùn)營(yíng)友好的操作體驗(yàn)

下面針對(duì)這兩塊比較核心的內(nèi)容說(shuō)明下我們?nèi)绾巫龅摹?/p> 編輯器基礎(chǔ)屬性編輯能力

對(duì)于一個(gè)組件的開(kāi)發(fā)者來(lái)說(shuō)，一是定義該組件那些參數(shù)需要暴露到編輯器讓運(yùn)營(yíng)操作，二是定義該屬性對(duì)應(yīng)的值通過(guò)什么控件操作。
上文在整體架構(gòu)數(shù)據(jù)結(jié)構(gòu)中提到了每個(gè)node節(jié)點(diǎn)都有一個(gè) props 屬性，該屬性就是存放著該組件可配置的參數(shù)所配置的最終值，在初始化組件的時(shí)候會(huì)把這個(gè) props的數(shù)據(jù)傳入組件進(jìn)行初始化。而定義一個(gè)組件能接受那些參數(shù)則是在每個(gè)Vue組件的props 屬性上定義， 而編輯器的作用就是通過(guò)編輯器去獲取到每個(gè)對(duì)象定義的props，然后根據(jù)每個(gè)參數(shù)的類(lèi)型提供不同的編輯控件，比如 boolean 我們會(huì)提供 切換按鈕，image 我們會(huì)提供選擇圖片控件等等。擴(kuò)展腳本同樣可以擴(kuò)展組件的可編輯屬性，下面是一個(gè)擴(kuò)展腳本的例子。主要說(shuō)明支持的那些類(lèi)型，可定義的格式。整體流程如下。

下面我們先看一下每個(gè)組件可定義的props 例子。

/**
 * 
 * @param type: 字段類(lèi)型，支持原生類(lèi)型以及【碼良輸入類(lèi)型】
 * 
 * 碼良輸入類(lèi)型: 
 * input    單行輸入框
 * text     多行輸入框
 * enum     列表單選    需提供選項(xiàng)字段defaultList， 支持?jǐn)?shù)組、map結(jié)構(gòu)
 * image    圖片選擇
 * audio    音頻選擇
 * video    視頻選擇
 * richtext 富文本 
 * number   數(shù)字
 * function 方法設(shè)置
 * data     json數(shù)據(jù)
 * date     時(shí)間選擇
 * checkbox 多選框      同enum 不提供defaultList字段時(shí)，輸入值為布爾類(lèi)型
 * radio    單選框      同enum
 * 
*/

return {
  props: {
    // 原生類(lèi)型
    foo: {
      type: String
    },
    // 圖片輸入
    fooImage: {
      type: String,
      editer: {
        type: "image"
      }
    },
    // 日期
    fooDate: {
      editer: {
        type: "date"
      }
    },
    // checkbox 多選
    fooCheckbox: {
      type: Array, // 此項(xiàng)必須為Array
      default: () => { // 且需提供初始值
        return [] // ["day", "hour", "min", "sec"]
      },
      editer: {
        label: "顯示精度",
        type: "checkbox",
        defaultList: [ // array 形式的選項(xiàng)
          "day",
          "hour",
          "min",
          "sec",
        ]
      }
    },
    // checkbox 布爾
    fooCheckboxBool: {
      type: Boolean, // 此項(xiàng)必須為Boolean
      editer: {
        type: "checkbox"
      }
    },
    // enum 含選項(xiàng)
    fooEnum: {
      default: "value1",
      type: String,
      editer: {
        label: "我是字段名", // 將字段名顯示為可讀性更強(qiáng)的文本，不提供此項(xiàng)時(shí)，顯示字段名
        desc: "我是幫助文本", // 為字段提供提示信息，幫助理解字段的意義
        type: "enum",
        defaultList: { // map結(jié)構(gòu)的選項(xiàng) key為值，value為顯示文本
          "value1": "條件1",
          "value2": "條件2",
          "value3": "條件3",
        }
      }
    },
    // 條件屬性
    ifFoo1: {
      type: [Number],
      default: 0,
      editer: {
        work: function () {
          return this.fooEnum == "value1" // 只有當(dāng) `fooEnum` 字段取值為 "value1" 時(shí)才顯示此項(xiàng)
        },
        label: "條件屬性1",
        type: "number",
      }
    },
    ifFoo2: {
      type: [Date, String],
      default: null,
      editer: {
        work: function () {
          return this.fooEnum == "value2" // 只有當(dāng) `fooEnum` 字段取值為 "value2" 時(shí)才顯示此項(xiàng)
        },
        label: "條件屬性2",
        type: "date",
      }
    },
  },
  mounted: function () {
    console.log("hello " + this.foo)
    console.log("hello " + this.fooImage)
    // ...
  }
}

上面腳本擴(kuò)展的組件對(duì)應(yīng)的增加的可配置的屬性如下圖。

這里面的的主要設(shè)計(jì)在于每個(gè)props屬性里面添加了一個(gè) editer字段進(jìn)行該字段在編輯器環(huán)境下提供什么組件對(duì)該屬性進(jìn)行編輯。editer的字段主要包括如下。

{
        
    label: "我是字段名", // 將字段名顯示為可讀性更強(qiáng)的文本，不提供此項(xiàng)時(shí)，顯示字段名
    desc: "我是幫助文本", // 為字段提供提示信息，幫助理解字段的意義
    type: "enum",
    ignore: true,       // 不在編輯器顯示
    work:function(){
        // 如果滿足什么條件才會(huì)顯示
    },
    defaultList: { // map結(jié)構(gòu)的選項(xiàng) key為值，value為顯示文本
     "value1": "條件1",
     "value2": "條件2",
     "value3": "條件3",
   }
 }

label 在編輯器顯示的名稱

desc 該字段在編輯器詳細(xì)描述

type 編輯該屬性的組件類(lèi)型

ignore 負(fù)略在編輯器顯示，一般在該屬性提供了高級(jí)編輯模式需要隱藏掉默認(rèn)的模式。

work 一個(gè)方法，該方法返回true 會(huì)在編輯器顯示該屬性，一遍用于聯(lián)動(dòng)隱藏和顯示一些編輯屬性

defaultList 一些默認(rèn)數(shù)據(jù)，一般提供單選，下拉等默認(rèn)可選擇的值。

一句話小結(jié)：編輯器通過(guò)獲取每個(gè)組件的props，遍歷每一個(gè)屬性，按類(lèi)型提供不同的操作控件，編輯生成最終的數(shù)據(jù)放到 nodeInfo.props上。

很多時(shí)候一個(gè)組件可配置的屬性按我們的規(guī)劃來(lái)說(shuō)就下面幾種類(lèi)型。

/**
 * 
 * @param type: 字段類(lèi)型，支持原生類(lèi)型以及【碼良輸入類(lèi)型】
 * 
 * 碼良輸入類(lèi)型: 
 * input    單行輸入框
 * text     多行輸入框
 * enum     列表單選    需提供選項(xiàng)字段defaultList， 支持?jǐn)?shù)組、map結(jié)構(gòu)
 * image    圖片選擇
 * audio    音頻選擇
 * video    視頻選擇
 * richtext 富文本 
 * number   數(shù)字
 * function 方法設(shè)置
 * data     json數(shù)據(jù)
 * date     時(shí)間選擇
 * checkbox 多選框      同enum 不提供defaultList字段時(shí)，輸入值為布爾類(lèi)型
 * radio    單選框      同enum
 * 
*/

如果按每個(gè)類(lèi)型提供一個(gè)基本的編輯組件就能完成90%的需求，不過(guò)在隨著組件的復(fù)雜度增加，每個(gè)組件可配置的屬性變得千奇百怪，各種需求都可能。比如一個(gè)簡(jiǎn)單的多選，原來(lái)的可選項(xiàng)只能寫(xiě)死，現(xiàn)在需要自己請(qǐng)求接口獲取。但這些邏輯我們不能做到統(tǒng)一的編輯器里面，也不能做到組件里面，所以只能在做組件的時(shí)候提供一種機(jī)制讓開(kāi)發(fā)組件的同學(xué)開(kāi)發(fā)組件的同時(shí)，還能對(duì)這個(gè)組件開(kāi)發(fā)一個(gè)自定義的編輯器，并能整合到我們的屬性編輯面板中。
整體架構(gòu)如下，最終效果可以參考上圖的自定義面板部分

一個(gè)組件打包完一般會(huì)有兩個(gè)必要的腳本，一個(gè)是組件對(duì)應(yīng)的js。一個(gè)是該組件對(duì)應(yīng)編輯器的腳本js。
整個(gè)平臺(tái)對(duì)編輯器的功能擴(kuò)展都是相通的，通過(guò)加載腳本，創(chuàng)建對(duì)象，注冊(cè)到Vue，然后通過(guò)動(dòng)態(tài)組件渲染。對(duì)編輯器屬性的擴(kuò)展也是一樣。加載對(duì)應(yīng)組件的編輯器腳本，然后按相同的方法進(jìn)行植入。這里就不在細(xì)講。這里簡(jiǎn)單分享下我們對(duì)一個(gè)組件的開(kāi)發(fā)最終的結(jié)果。如下圖

組件開(kāi)發(fā)過(guò)程中的界面

組件發(fā)布后在碼良編輯器里面的樣子

為了提供一套對(duì)運(yùn)營(yíng)友好，并且高擴(kuò)展的h5活動(dòng)制作平臺(tái)我們做了這個(gè)碼良平臺(tái)?，F(xiàn)在碼良的平臺(tái)現(xiàn)在支撐著運(yùn)滿滿每天新增5-10個(gè)的新活動(dòng)頁(yè)面的需求，已有活動(dòng)模板的活動(dòng)95% 可以營(yíng)銷(xiāo)人員通過(guò)模板創(chuàng)建，做些樣式或圖片的修改，然后發(fā)布到線上，整個(gè)過(guò)程就幾分鐘。活動(dòng)的模板和組件模板也在不斷沉淀，相信沉淀一段時(shí)間后隨著模板越來(lái)越全，對(duì)營(yíng)銷(xiāo)活動(dòng)的快速制作和可選擇性都會(huì)更強(qiáng)。