開發一個 Enhancer 前端組件

meislzhua 發布于2019-08-29 17:07 / 2420人閱讀

摘要：全局安裝組件開發工具初始化組件打開命令行終端運行下面的命令熟悉組件開發界面啟動組件開發后會在默認瀏覽器中打開頁面并顯示如下如果你的默認瀏覽器不是建議換成來查看。

1. 介紹

Enhancer組件由組件配置頁面(configurator) 和組件本身(widget) 兩部分組成。

組件配置頁面會將用戶的配置保存成一個 JSON。

組件在預覽頁面會包含在一個指定的窗口容器內，獲得配置的 JSON。

推薦先前往 Enhancer 教程, 將必修部分看一遍。

配置頁面(configurator)

下圖為 enhancer-timeline 組件的配置頁面

一般配置頁面分為 數據源配置 和 其他配置項, 上圖中左邊是數據源配置, 右邊是其他配置項。

配置頁面生成的 JSON 如下:

{
  "dataSourceId": 1,       // 數據源 id, 通過這個id能獲取到組件數據
  "direction": "vertical", // 展示方向
  "showCenter": true,      // 居中顯示
  "icon":"fas fa-tag",     // 節點圖標
  "iconSize": 16,          // 圖標大小
  "titleFontSize": 16,     // 標題字體大小
  "contentFontSize": 14,   // 內容字體大小
  "footerFontSize": 12     // 底部字體大小
}

組件預覽頁面(widget)

下圖為 enhancer-timeline 組件的預覽頁面:

2. 創建組件

這里我們準備開發一個列表組件, 組件名叫 widget-dev-demo. 以列表的形式渲染從數據源獲取到的數據, 該組件可以控制列表中的數據是否是單行渲染。下圖中左右兩部分分別是不同配置的展示

2.1 環境準備

請到 node.js 去下載安裝 node。

全局安裝組件開發工具 ewtool:

  npm install ewtool -g --registry=https://registry.npm.taobao.org

2.2 初始化組件

打開命令行終端, 運行下面的命令:

mkdir widget-dev-demo
cd widget-dev-demo
ewtool
npm install --registry=https://registry.npm.taobao.org
npm start

3. 熟悉組件開發界面

啟動 widget-dev-demo 組件開發后, 會在默認瀏覽器中打開頁面并顯示如下:

如果你的默認瀏覽器不是 Chrome, 建議換成 Chrome 來查看。

3.1 場景列表

自定義場景: 每個組件都會有很多的配置項, 為了展示不同配置的效果, 可以點擊下面的另存為按鈕, 把組件的配置另存為一個場景。

定向場景: 定向場景專門用于測試組件的不同API和狀態是否能正常運行, 組件開發完成時可以用這些場景來測試組件。

3.2 組件配置區

開發者需要將組件的不同配置項渲染在這塊區域。

3.3 操作按鈕

從左到右分別是:

預覽組件, 保存配置, 另存為(將組件配置另存為一個場景), 查看配置。

3.4 注意

如果在還沒有點擊保存配置按鈕之前就點擊了預覽組件按鈕, 會打開新頁面顯示如下:

會看到組件一直在加載中, 這是因為此時組件的配置還沒保存過, 需要先點保存配置按鈕。

4. 開發配置器

widget-dev-demo 組件配置器的具體代碼請參考 configurator, 下面介紹一下主要步驟:

4.1 在 contruct 函數里初始化 html 元素

const tplHTML = template({
  locale: locale()
});

$("body").html(tplHTML);

// 初始化數據源配置器
this.dataSourceConfig = Enhancer.DatasourceManager.createConfigurator("dataSourceDom", {
  supportedTypes: ["rdb", "http", "static", "jsonp"],
  dataSpecification: "dataSpecification", // 組件數據格式說明 
  onSave: (source) => {
    this.profile.dataSourceId = source.id;
  }
});

4.2 在 setProfile 函數里回填之前保存過的配置項

// 用保存過的數據源Id區加載數據源, 然后回填給數據源配置器
if (this.profile.dataSourceId) {
  Enhancer.DatasourceManager.getDatasource(this.profile.dataSourceId, (source) => {
    this.dataSourceConfig.setConfig(source);
  });
}

// 回填 單行顯示 配置項
if (this.profile.oneLine) {
  $("input[name=oneLine]").prop("checked", true);
}

4.3 在 getProfile 函數里檢查配置的合法性并返回新的配置數據

由于 widget-dev-demo 組件只有一個數據源配置項和一個單行顯示的配置項, 因此 getProfile 函數只會返回這兩個字段。

return {
  dataSourceId: this.profile.dataSourceId,
  oneLine: $("input[name=oneLine]").prop("checked")
};

開發完成后的效果

5. 開發組件

widget-dev-demo 組件的具體代碼請參考widget, 主要代碼如下:

// 獲取組件所在的 html 容器
const $container = this.getContainer();

// 通過配置器里保存的數據源Id加載數據
this.getSourceData(profile.dataSourceId, (data) => {
  // 將 數據源數據(data.rows) 和 配置數據(profile.oneLine) 塞給 tpl 模版進行渲染 
  $container.html(tpl({
    locale: locale(),
    data: data.rows,
    oneLine: profile.oneLine
  }));

  // 通知平臺 組件已經初始化完成
  this.trig("complete");
});

6. 配置&預覽組 6.1 配置數據源

回到配置頁面。

由于是本地開發, 數據源類型請選擇靜態數據。

將下面的數據粘貼到數據源編輯器里。

{
  "rows": [{
    "content": "In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out. Viral mollit flexitarian locavore, beard readymade eiusmod anim."
  }, {
    "content": "Lorem Ipsum has been the industry"s standard dummy text eve. Lorem Ipsum has been the industry"s standard dummy text eve. Lorem Ipsum has been the industry"s standard dummy text eve. Lorem Ipsum has been the industry"s standard dummy text eve"
  }, {
    "content": "Lorem Ipsum has been the industry"s standard dummy text eve"
  }]
}

點擊保存數據源按鈕。

點擊保存按鈕。

6.2 預覽組件

到配置頁面, 點擊預覽按鈕后可以看到的效果如下:

以列表的形式渲染數據, 當寬度不夠時文字自動換行顯示。

到配置頁面, 將單行顯示復選框勾上, 然后點保存按鈕, 然后再點預覽按鈕可以看到的效果如下:

以列表的形式渲染數據, 當寬度不夠時超出部分會顯示成省略號。

7. 發布組件

組件發布可以通過下面兩種方式來發布, 任選其一即可

方式一: 命令發布

打開命令行終端, 切換到 widget-dev-demo 目錄下。

運行下面的命令:

ewtool login // 用在 enhancer 平臺上注冊的用戶名、密碼進行登錄, 如已登錄過請忽略
ewtool release

方式二: 網頁發布

打開命令行終端, 切換到 widget-dev-demo 目錄下。

運行下面的命令:

ewtool pack // 會將組件代碼打包到 widget-dev-demo/release 下

用瀏覽器打開 https://developer.enhancer.io/myWidgets, 點擊添加第一個組件, 在組件添加頁面填寫組件相關內容然后提交組件。

組件發布完成后可以在瀏覽器里打開我的組件, 然后繼續完善組件相關的信息

GPU云服務器云服務器前端組件開發前端組件前端組件維護通用前端組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114118.html

開發一個 Enhancer 前端組件

摘要：全局安裝組件開發工具初始化組件打開命令行終端運行下面的命令熟悉組件開發界面啟動組件開發后會在默認瀏覽器中打開頁面并顯示如下如果你的默認瀏覽器不是建議換成來查看。 1. 介紹 Enhancer組件由組件配置頁面(configurator) 和組件本身(widget) 兩部分組成。組件配置頁面會將用戶的配置保存成一個 JSON。組件在預覽頁面會包含在一個指定的窗口容器內，獲得配...

haoguo 2019-08-02 11:51 評論0 收藏0
開發一個 Enhancer 前端組件

摘要：全局安裝組件開發工具初始化組件打開命令行終端運行下面的命令熟悉組件開發界面啟動組件開發后會在默認瀏覽器中打開頁面并顯示如下如果你的默認瀏覽器不是建議換成來查看。 1. 介紹 Enhancer組件由組件配置頁面(configurator) 和組件本身(widget) 兩部分組成。組件配置頁面會將用戶的配置保存成一個 JSON。組件在預覽頁面會包含在一個指定的窗口容器內，獲得配...

wwq0327 2019-08-23 12:38 評論0 收藏0
Redux專題：中間件

摘要：好處就是不再需要能夠處理異步的中間件了。不過，它是一個研究中間件很好的范本。執行它，返回的是由第二層函數組成的中間件數組。也就是說呀同學們，除了最后一個中間件的是原始的之外，倒數往前的中間件傳入的都是上一個中間件的邏輯函數。本文是『horseshoe·Redux專題』系列文章之一，后續會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的個人博客獲得無與倫比的閱...

ybak 2019-08-23 12:09 評論0 收藏0
初識react高階組件

摘要：也明確了大數據時代，前端所應該具備的職業素養高階組件高階組件，高階組件就是一個組件包裹著另外一個組件中兩種的實現方法中兩種的實現方法返回的類繼承了。之所以被稱為是因為被繼承了，而不是繼承了。在這種方式中，它們的關系看上去被反轉了。前言最近一直再做數據可視化，業務的理解，數據的理解確實如數據可視化要求的一樣，有了更多的理解。但是技術上還停留在echart，Hchart, 畫圖上。正好...

IamDLY 2019-08-22 16:15 評論0 收藏0
如何用 Enhancer 快速開發移動應用

摘要：舊頁面如何運行到移動端首先確保選用組件都支持移動端。如何部署并訪問移動應用部署方式與應用部署方式完全一致。如何跟其他社交應用集成平臺最終發布得到的是一個，也即一個頁面使用了移動端的瀏覽器預覽。點擊觀看視頻演示如果您還未具備 Enhancer 開發經驗，建議您先學習完《快速上手》，在了解平臺基本操作之后，再來嘗試移動應用開發，這樣會事半功倍。如果您已具備 Enhancer 開發經驗...

liuhh 2019-08-16 16:01 評論0 收藏0