自定義組件

版本范圍：付費版本 內測階段:目前已開放內測申請 ,掃碼進入交流群
使用群體：需要具備一定的開發(fā)基礎，面向開發(fā)者/ISV服務商/高級業(yè)務專家等

1. 功能簡介

1.1 自定義組件簡介

自定義組件功能為客戶提供創(chuàng)建組件的能力，提升組件與業(yè)務需求契合度的同時，減少組件開發(fā)及運維的成本并提高了組件的可復用性。

1.2 使用場景

當宜搭普通組件無法滿足您應用開發(fā)的業(yè)務需求時，您可以根據(jù)不同行業(yè)的業(yè)務習慣或需求來自行開發(fā)一款貼合業(yè)務場景的組件。且同一個組織中的自定義組件是可以進行共享的，這也就為后續(xù)您開發(fā)同類型應用復用相關組件提供了便利。

2. 操作指南

通過自定義組件實現(xiàn)計數(shù)器功能的小案例，體驗一下自定義組件開發(fā)調試以及安裝使用的具體操作。

2.1 案例場景

使用自定義組件功能，對宜搭現(xiàn)有的文本組件及按鈕組件，進行低代碼改造，實現(xiàn)計數(shù)器功能。適用于頁面瀏覽量的統(tǒng)計、點/踩、關注/被關注等社交功能的實現(xiàn)等。

2.2 實現(xiàn)效果

點擊左側「加1」按鈕時，數(shù)字加一，點擊中間「重置」按鈕時，數(shù)字歸零；點擊右側「減1」按鈕時，如果當前數(shù)字小于等于0，那么數(shù)字為0，否則為當前數(shù)字減1 的結果。

圖2.2-1 計數(shù)器效果演示

2.3 操作步驟

2.3.1 步驟一：創(chuàng)建自定義組件

通過對組件名稱、類型、標識等屬性的配置，低成本、自定義一款更貼合業(yè)務需求的組件。

操作步驟：

1. 宜搭應用 >> 應用設置 >> 組件管理 >> 組件中心（操作如圖2.3-1 所示）

圖2.3-1 進入組件中心

1. 新增組件 >> 填寫組件名稱、組件類型、組件標識等組件屬性 >> 確定（操作如圖2.3-2 所示）

圖2.3-2 創(chuàng)建自定義組件計數(shù)器

2.3.2 步驟二：開發(fā)調試自定義組件

對組件進行開發(fā)調試，以滿足不同的業(yè)務需求。本案例中實現(xiàn)組件的計數(shù)功能。

操作步驟：

1. 組件中心 >> 我的組件 >> 找到需要調試的組件 >> 開發(fā)（操作如圖2.3-3 所示）

圖2.3-3 自定義組件開發(fā)調試入口

1. 添加自定義組件所需的宜搭普通組件到畫布中，并進行基本屬性的配置。本案例所需組件為一個文本組件及三個按鈕組件。文本組件默認值設置為"當前計數(shù)結果為0"；按鈕組件標題分別設置為"點擊加1、點擊重置以及點擊減1"（操作如圖2.3-4 所示）

圖2.3-4 自定義組件樣式布局

1. 為按鈕組件進行動作設置，以實現(xiàn)計數(shù)效果。選中按鈕 >> 新建動作 >> onClick 點擊按鈕。（操作如圖2.3-5 所示）

圖2.3-5 設置按鈕動作

1. 在JS面板進行計數(shù)邏輯的編寫。（如圖2.3-6 所示）

圖2.3-6 「點擊加1」按鈕動作代碼

上圖所示代碼如下所示，使用過程中注意組件唯一標識的替換！

//「點擊加1」按鈕涉及邏輯代碼，使用過程中注意組件唯一標識的替換
//初始化變量count為0。
let count = 0;
export function onClick() {
  //點擊按鈕，count變量進行自增加1。
  count++;
  //將自增加1后的變量count結果賦值給文本組件，實現(xiàn)計數(shù)結果在頁面的顯示。
  // text_k8bnuo08 為文本組件唯一標識，代碼使用過程中，請?zhí)鎿Q為您創(chuàng)建的文本組件的唯一標識！
  this.$("text_k8bnuo08").set('content',"當前計數(shù)結果為" + count);
}

1. 重復步驟3及步驟4，為「點擊重置」及「點擊減1」按鈕進行動作設置。（操作如圖2.3-7 所示）

圖2.3-7 「點擊重置」、「點擊減1」按鈕代碼

上圖所示代碼如下所示，使用過程中注意組件唯一標識的替換！

//「點擊重置」按鈕涉及代碼
export function onClick2() {
  //點擊按鈕后，將計數(shù)結果重置為0；
  count = 0;
  //將重置后的變量count結果賦值給文本組件，實現(xiàn)計數(shù)結果在頁面的顯示。
  // text_k8bnuo08 為文本組件唯一標識，代碼使用過程中，請?zhí)鎿Q為您創(chuàng)建的文本組件的唯一標識！
  this.$("text_k8bnuo08").set('content', "當前計數(shù)結果為" + count);
}

//「點擊減1」按鈕涉及邏輯代碼，使用過程中注意組件唯一標識的替換
export function onClick3() {
  //進行判斷，當count結果小于等于0時，初始化count變量為0；否則，進行count變量減1計算。
  if (count <= 0) {
    count = 0;
    // text_k8bnuo08 為文本組件唯一標識，代碼使用過程中，請?zhí)鎿Q為您創(chuàng)建的文本組件的唯一標識！
    this.$("text_k8bnuo08").set('content', "當前計數(shù)結果為" + count);
  } else {
    //點擊按鈕實現(xiàn)變量count結果減1。
    count--;
    //將減1后的變量count結果賦值給文本組件，實現(xiàn)計數(shù)結果在頁面的顯示。
    // text_k8bnuo08 為文本組件唯一標識，代碼使用過程中，請?zhí)鎿Q為您創(chuàng)建的文本組件的唯一標識！
    this.$("text_k8bnuo08").set('content', "當前計數(shù)結果為" + count);
  }
}

1. 保存>>發(fā)布>>填寫組件發(fā)布的版本號及相關說明>>確定。（操作如圖2.3-8 所示）

圖2.3-8 組件發(fā)布信息填寫

1. 發(fā)布成功會看到提示。（操作如圖2.3-9 所示）

圖2.3-9 發(fā)布成功提醒

2.3.3 步驟三：安裝自定義組件

將開發(fā)調試完成的自定義組件，安裝到頁面內，即可在頁面設計的過程中進行使用。組件安裝需選擇頁面類型，選擇后才會在對應的頁面設計器中看到對應的自定義組件。

操作步驟：

1. 表單設計頁 >> 組件庫 >> 自定義組件 >> 安裝自定義組件。（操作如圖2.3-10 所示）

圖2.3-10 自定義組件安裝入口

1. 組件管理頁面 >> 組件列表 >> 選擇需要安裝的自定義組件 >> 安裝。（操作如圖2.3-11 所示）

圖2.3-11 選取需要安裝的組件

1. 選擇安裝版本及安裝范圍 >> 安裝。（操作如圖2.3-12 所示）

圖2.3-12 組件安裝

注意：

1. 為保證線上使用自定義組件的穩(wěn)定性，在組件版本選擇時，請務必安裝 1.x.x 發(fā)布后的正式版本。
2. 為保證自定義組件可以在頁面設計器中使用，在選擇安裝范圍時，只有選擇了對應的頁面類型后，才會在對應的頁面設計器中則會看到對應安裝的組件。

2.3.4 步驟四：使用自定義組件

通過上述步驟，自定義組件已經(jīng)被安裝至頁面組件庫的自定義組件類目中，通過下述步驟即可使用。

操作步驟：

1. 表單設計頁 >> 組件庫 >> 自定義組件 >> 選擇需要的組件 >> 拖拽至畫布即可。（操作如圖2.3-13 所示）

圖2.3-13 使用自定義組件

2.3.5 步驟五：查看/修改組件信息

在組件使用的過程中，如需對組件的縮略圖、組件的說明文檔地址、組件的描述信息進行修改，可以通過以下路徑進行操作。

操作步驟

1. 應用設置 >> 組件管理 >> 組件中心（操作如圖2.3-14 所示）

圖2.3-14 進入組件中心

1. 選擇需要查看/修改詳情的組件 >> 詳情（操作如圖2.3-15 所示）

圖2.3-15 查看組件詳情

說明：組件詳情頁面分為基本信息、發(fā)布信息及管理員三個模塊（如圖2.3-16 所示），其中:

1. 基本信息：點擊「編輯」可以對自定義組件的縮略圖、幫助文檔地址、組件描述進行修改，其余配置為組件創(chuàng)建之初進行配置且不可修改的。
2. 發(fā)布信息：可以查看自定義組件的迭代記錄，包括組件版本及對應的發(fā)布說明。

1. 管理員（擁有對自定義組件進行開發(fā)調試權限，默認為組件創(chuàng)建者）：可以對管理員進行添加或刪除操作，用于權限的管理。

圖2.3-16 組件詳情頁

3. 自定義組件屬性

自定義組件在支持對宜搭現(xiàn)有組件進行改造的同時，也支持對生成的自定義組件進行屬性( propTypes )的自定義操作。使自定義組件更加貼合開發(fā)者的日常工作場景、符合開發(fā)者日常工作習慣的同時，使自定義組件擁有更高的靈活性及可定制性。

3.1 自定義組件屬性配置入口

路徑：低代碼組件設計器 >> 選中畫布中「低代碼業(yè)務組件」>> 右側屬性（路徑如圖3.1-1 所示）

圖3.1-1 自定義組件屬性配置入口

3.2 自定義組件屬性配置說明

自定義組件屬性分為雙端搭建、屬性定義（ propTypes）、生命周期及唯一標識四個模塊。其中，

• 雙端搭建：雙端搭建為配置開關，開啟即可進行PC端及移動端同時進行自定義組件的開發(fā)調試工作，以滿足雙端適配的業(yè)務需求。
• 屬性定義（ propTypes ）：可對自定義組件的標題、名稱、類型（即數(shù)據(jù)格式）、默認值等基本屬性進行自定義，也可對組件是否隱藏（組件隱藏與否的狀態(tài)）、當變化時（組件顯示值的不同）進行事件綁定，以滿足多種多樣的業(yè)務需求。詳細介紹請參見，https://www.yuque.com/yida/support/zyrrlb。

• 生命周期：自定義組件的生命周期分為組件渲染完成（componentDidMount）、組件更新完成（componentDidUpdate）、組件捕捉錯誤（componentDidCatch）、組件銷毀前（componentWillUnmount）四個階段，在不同的生命周期中進行不同的邏輯編寫，以滿足復雜的業(yè)務需求。
• 唯一標識：同宜搭普通組件一樣，自定義組件也擁有唯一標識屬性，作為組件的唯一識別碼，由系統(tǒng)自動生成，一般不需要更改。用于宜搭后臺存儲數(shù)據(jù)，代碼綁定等。

特別注意：

• 組件的唯一標識（ fiedId ）是宜搭指向該組件的唯一標識碼，更改標識可能會影響到該組件上所使用的公式、數(shù)據(jù)存儲（數(shù)據(jù)也可能會出現(xiàn)丟失），JS函數(shù)側的指向等。我們強烈不建議你去修改組件的唯一標識屬性！
• 如果你堅持要修改該標識（目前只能通過 schema 導入的方式，如果你選擇使用此方法來修改組件唯一標識，那么表示你已經(jīng)明確這么做的后果以及表明自己會獨自承擔這個后果，宜搭有權不對該后果負任何責任，感謝你的理解和支持。

4. 附錄

4.1 組件類型

宜搭自定義組件類型分 「普通組件」和「表單組件」兩種，核心區(qū)別是：

1. 普通組件一般用來做展示型的功能，沒有數(shù)據(jù)存儲的能力。類似現(xiàn)有的「圖文展示」「分組」組件。
2. 表單組件可以用來做數(shù)據(jù)提交，表單組件在開發(fā)上相對普通組件會更復雜些，需要額外定義元數(shù)據(jù)的配置。

1. 表單組件暫未開放，敬請期待。

4.2 組件安裝類型

宜搭的頁面類型有 普通表單頁面、流程表單頁面、報表頁面、DataV大屏、自定義頁面、外部鏈接。

宜搭的自定義組件目前支持其中的普通表單頁面、流程表單頁面、自定義頁面這三種。

安裝時選擇了對應的頁面類型后，在對應的頁面設計器中則會看到對應安裝的組件。

4.3 組件版本說明

宜搭的自定義組件版本在語義化版本的基礎上做了額外的約定需要特別注意。

1. 0.1.0 默認為開發(fā)版本，開發(fā)版可和組件設計器保持實時同步，用來調試組件。
2. 1.x.x 為發(fā)布后的正式版本，會固定當前版本的功能，保證線上使用該組件的穩(wěn)定性。所以線上的正式應用請務必安裝 1.x.x 發(fā)布后的正式版本。