自定義組件

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

1. 功能簡介

1.1 自定義組件簡介

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

1.2 使用場景

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

2. 操作指南

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

2.1 案例場景

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

2.2 實(shí)現(xiàn)效果

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

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

2.3 操作步驟

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

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

操作步驟：

1. 宜搭應(yīng)用 >> 應(yīng)用設(shè)置 >> 組件管理 >> 組件中心（操作如圖2.3-1 所示）

圖2.3-1 進(jìn)入組件中心

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

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

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

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

操作步驟：

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

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

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

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

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

圖2.3-5 設(shè)置按鈕動作

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

圖2.3-6 「點(diǎn)擊加1」按鈕動作代碼

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

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

1. 重復(fù)步驟3及步驟4，為「點(diǎn)擊重置」及「點(diǎn)擊減1」按鈕進(jìn)行動作設(shè)置。（操作如圖2.3-7 所示）

圖2.3-7 「點(diǎn)擊重置」、「點(diǎn)擊減1」按鈕代碼

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

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

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

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

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

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

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

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

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

操作步驟：

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

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

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

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

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

圖2.3-12 組件安裝

注意：

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

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

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

操作步驟：

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

圖2.3-13 使用自定義組件

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

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

操作步驟

1. 應(yīng)用設(shè)置 >> 組件管理 >> 組件中心（操作如圖2.3-14 所示）

圖2.3-14 進(jìn)入組件中心

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

圖2.3-15 查看組件詳情

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

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

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

圖2.3-16 組件詳情頁

3. 自定義組件屬性

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

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

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

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

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

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

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

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

特別注意：

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

4. 附錄

4.1 組件類型

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

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

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

4.2 組件安裝類型

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

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

安裝時(shí)選擇了對應(yīng)的頁面類型后，在對應(yīng)的頁面設(shè)計(jì)器中則會看到對應(yīng)安裝的組件。

4.3 組件版本說明

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

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