步驟一：添加組件

1. 創建Web應用。具體操作，請參見創建Web應用。

2. 在Web應用編輯器中，單擊最左側的組件圖標。

3. 在畫布左側組件列表上方，輸入開關，找到該組件，然后將組件拖拽到中間畫布。

   有關組件添加的更多信息，請參見添加組件。

   

步驟二：配置數據源

• 配置開關數據源

  1. 在Web應用編輯器右側樣式中，單擊開關數據后的配置數據源。

  2. 在數據源配置頁面，選擇數據源類型，完成配置。

     可選數據類型有設備、接口、靜態數據、應用推送。

     說明

     設備數據源支持返回的數據類型為布爾型（bool）和整數型（int）。接口數據源支持返回的數據類型為布爾型（bool）和數值型（單精度數字、雙精度數字和整數）。

     • 布爾型：true對應開（On），false對應關（Off）。

     • 整數型：將設備返回的整數型數據轉換為布爾型，需設置轉換為True和False的整數值。

     • 數值型：使用數據過濾腳本將接口返回的數值型數據轉換為布爾型。

  3. 單擊確定。

• 可選：配置彈窗數據源

  在Web編輯器右側樣式中，可選中啟用二次確認復選框，配置彈窗標題和彈窗文字。您也可通過配置數據源設備、接口、靜態數據、應用推送，通過返回的布爾值設置是（True）否（False）啟用二次確認。

  說明

  僅手動修改開關狀態，會觸發二次確認彈窗。

  數據配置	操作
  靜態數據	在彈窗標題和彈窗文字右側提交框中編輯內容。 彈窗標題和彈窗內容將靜態展示在對話框中。
  動態數據	單擊彈窗標題和彈窗內容提交框右側的配置數據源按鈕，選擇數據源類型，完成配置，單擊確定。 可選數據源類型有設備、接口、應用推送和頁面變量。 彈窗標題和彈窗內容將基于關聯的數據源實時更新。 說明 組件支持返回的數據類型為：單精度數字、雙精度數字、整數、字符串。 如果彈窗標題和彈窗文字既輸入了靜態數據，又配置了動態數據，則取動態數據。

步驟三：配置樣式

1. 在右側樣式中，完成組件展示的配置。

   配置項	說明
   樣式類型	設置組件的樣式類型。可選： 開關icon：默認值。即顯示效果為組件當前默認樣式。 圖片：自定義圖片對應開關狀態。
   ON/OFF狀態	為開關的ON和OFF狀態設置顯示顏色或圖片。
   開關響應模式	僅組件數據源為設備時，該配置生效。手動修改開關狀態，會下發指令給設備更新對應設備屬性值。 您可設置組件開關狀態的更新模式： 等待數據返回：等到設備更新并上報屬性值成功后，更新組件開關狀態。 操作即時響應：手動更新組件狀態后，立即更新組件開關狀態。 您需設置數據上報延時（ms），如果超出該時間范圍設備沒有上報更新的數據，組件開關狀態會恢復為修改前的狀態，開關狀態更新失敗。

2. 調整組件寬高和在頁面中的布局位置。具體操作，請參見樣式配置。

步驟四：配置交互動作

1. 在Web編輯器右側交互中，單擊新增交互，設置事件和動作。

   支持值改變事件。例如，組件值改變，執行動作調用設備服務，即指定某設備執行某項特定的任務。

   具體操作，請參見交互配置。

   說明

   若您選中啟用二次確認復選框，手動修改開關狀態時，需在彈窗中單擊確認，您配置的交互動作才會執行。

2. 單擊頁面右上方的預覽，預覽和調試組件展示的數據和樣式。