步驟一：創(chuàng)建Web應用

在項目下創(chuàng)建待開發(fā)的Web應用。詳細說明，請參見創(chuàng)建Web應用。

步驟二：配置頁面

1. 設置分辨率和背景。

   本案例以自定義分辨率375（W）*667（H）和上傳背景圖片（您可自定義圖片）為例，如下圖所示。詳細說明，請參見頁面。

   
2. 添加文字組件，作為頁面標題。
   從左側組件列表中，拖拽一個文字組件到畫布上。

   設置文字內容（例如：小丸子的家）和樣式，如下圖所示。詳細說明，請參見文字。

   
3. 添加時鐘組件，展示頁面當前時間。

   拖拽一個時鐘組件到畫布上，設置時鐘組件的展示格式（例如：日期時間）和樣式，如下圖所示。詳細說明，請參見時鐘。

   

步驟三：配置開關控制組件

1. 設置一個燈開關的控制組件。
   
   1. 從左側組件列表中，拖拽一個矩形、一個開關和一個文字組件到畫布上，設置標題和樣式。
      • 矩形組件作為背景，設置填充顏色為#FFFFFF，詳細說明請參見矩形。
      • 文字組件作為開關標題（例如：設置文字內容為主臥燈），詳細說明請參見文字。
      • 開關組件作為燈開關狀態(tài)的顯示，分別為ON和OFF狀態(tài)上傳對應圖片（您可自定義）。詳細說明請參見開關。
   2. 配置開關組件數(shù)據(jù)源。
      參數(shù)配置說明如下，詳細配置指導，請參見開關。

      參數(shù)	說明
      選擇數(shù)據(jù)源	選中設備。
      產品	選擇該開關組件對應的設備所屬產品，本案例選擇：開關遙控器。
      設備	選擇該組件的數(shù)據(jù)源設備。本案例選擇指定設備：switch_control_device。
      數(shù)據(jù)項	作為組件數(shù)據(jù)源的數(shù)據(jù)項。默認為設備屬性。
      屬性	選擇該開關組件對應的屬性：主臥燈開關。

2. 可選：設置多個相同樣式的開關組件。
   
   1. 選中已配置好的主臥燈開關組件（矩形、文字、開關），單擊鼠標右鍵，選擇成組。
   2. 復制粘貼5個相同配置的組件組到頁面上，進行2行3列排列。
   3. 分別選中復制的組件組，單擊鼠標右鍵，選擇解散組。
   4. 分別選中文字組件，更改文字內容為次臥燈、客廳燈、主臥窗簾、次臥窗簾、客廳窗簾。
   5. 根據(jù)各組件對應的功能定義，分別選中開關組件，修改綁定的設備屬性為：次臥燈開關、客廳燈開關、主臥窗簾開關、次臥窗簾開關、客廳窗簾開關。
   6. 為窗簾開關組件替換對應狀態(tài)的圖片。
3. 單擊編輯器上方保存按鈕，保存設置。
4. 鼠標指針移動到編輯器左上角的圖標上，展開項目概覽框，單擊Web可視化開發(fā)。
5. 在新打開的項目詳情頁，單擊左側導航欄設備，找到switch_control_device，單擊操作欄查看，單擊物模型數(shù)據(jù)頁簽，查看調試虛擬設備上報的屬性值。
   
6. 回到Web應用編輯器，單擊右上方預覽按鈕，預覽應用，可看到應用中組件展示狀態(tài)與設備運行狀態(tài)數(shù)據(jù)一致。
   

   您可單擊關閉的次臥燈和次臥窗簾開關，控制對應開關開啟。在設備詳情的物模型數(shù)據(jù)頁簽，可查看到設備對應開關開啟。