物聯網應用開發 (IoT Studio，原 Link Develop)，是阿里雲針對物聯網場景提供的生產力工具，可覆蓋各個物聯網行業核心應用場景，幫助您高效經濟地完成裝置、服務及應用開發。物聯網開發服務提供了移動視覺化開發、Web 視覺化開發、服務開發與裝置開發等一系列便捷的物聯網開發工具，解決物聯網開發領域開發鏈路長、技術棧複雜、協同成本高、方案移植困難的問題，重新定義物聯網應用開發。

視覺化搭建

因為 IoT 產品鏈路漫長，使用者很難同時兼備裝置端、服務端、應用端開發能力，在絕大多數場景下，通過拖拽、配置的方式，即可完成裝置資料監控相關的 Web 頁面、移動應用和 API 服務的開發，開發者只需關注核心業務，無需關注傳統開發中的種種繁瑣細節，大大降低物聯網開發的難度。

與裝置管理無縫整合

裝置相關的屬性狀態、事件、報警等資料均可從阿里雲物聯網平臺裝置接入和管理模組中直接獲取，無縫整合，大大降低了物聯網開發的體驗。

豐富的開發資源

無論是 Web 視覺化開發，還是服務開發工作臺，均提供了數量眾多的元件和豐富的 API，元件庫隨著產品的迭代升級也越來越豐富，大大提升開發效率。

無需部署

使用者無需額外購買伺服器等服務，產品開發完畢完全託管在雲端，開發完畢無需部署可以立即交付及使用。

一站式開發環境

物聯網開發服務提供了移動視覺化開發、Web 視覺化開發、服務開發與裝置開發等一系列便捷的物聯網開發工具，使用者可以在 IoT Studio 中體驗軟硬一條龍的開發過程。

家居控制面板

概述

在這個教程裡，我們將學習如何用Web視覺化開發搭建一個H5家居應用控制面板。在這個文件裡，我們將學習以下幾個點：

1. 畫布解析度自定義；
2. 開關元件的圖片樣式運用；
3. 元件的複製貼上功能；
4. 開關的資料來源配置；

最終效果預覽

Step1 新建應用，調整畫布解析度

在頁面設定中，點選頁面解析度下拉框，選擇自定義，在出來的選項中改畫布解析度為：375*667 （iPhone8尺寸）。

tips：

1. 滑鼠點選畫布任意非元件區域，右邊操控面板都會變成當前頁面的配置項。
2. 頁面解析度一旦調整，所有新建的頁面畫布都遵循該解析度。
3. H5解析度參考：iPhone8 375667； iPhone 8 Plus 736
   414；iPhone XS 812375；iPhone XR & iPhone XS Max 896414；Android 640*360；
4. Web視覺化編輯器暫時不支援自動儲存，切記隨時Ctrl+S儲存一下。

Step2 新增頁面背景

找到頁面設定項的背景圖片，選擇上傳圖片，在彈框中選擇背景圖片（需要自己上傳）。

tips：

1. 圖片解析度建議為畫布解析度的2倍，保證實際在手機上看的效果不會模糊。

Step3 佈局標題和時間

步驟3-1 標題

拖拽左側元件的文字到畫布，在右側操作欄中設定文字內容以及文字樣式。最終調整到合理的位置。

步驟3-2 時間

拖拽時鐘元件到畫布，將展示格式設為日期時間，調整背景顏色不透明度為0，調節文字字號和顏色，調整邊框寬度為0，最終拖拽元件到合適的位置。

時鐘調整背景透明：

時鐘調整文字及邊框透明：

Tips：**

1. 時鐘元件預設帶背景和邊框，如果想要去掉，可設定背景顏色不透明度為0，邊框粗細設定為0。
2. 在當前版本中，元件尺寸及位置的步長為5px，即尺寸需要為5的倍數，x及y軸位置也需要是5的倍數，如果你設定的值不滿足5的倍數，則系統會自動調節到5的倍數，請悉知。

Step4 增加燈泡開關

目前支援裝置開關控制的元件為：開關。我們將利用開關元件的圖片樣式功能製作符合預期的圓角開關按鈕。

步驟4-1

拖拽開關元件到畫布上，將樣式型別選擇為圖片，上傳對應狀態的圖片。

步驟4-2

拖拽文字元件到開關圖片上作為標題。

步驟4-3

將滑鼠拖拽選中標題和開關圖片，右鍵，選擇成組，然後通過快捷鍵Ctrl + C，Ctrl + V可複製多個相同的元件。

步驟4-4

右鍵選擇“解散組”，然後選中標題，可更改標題名稱。

tips：

1. 開關元件支援預設樣式和圖片兩種配置，選擇圖片可隨心所欲配置想要的開關樣式。
2. 開關元件預設為關閉狀態，所以在編輯器裡只能看到off狀態的圖，可以點選預覽，在預覽狀態下點選開關元件，檢視on狀態是否符合預期。
3. 該案例中，標題部分單獨出來加是考慮到靈活性，可通過更改標題來表達不同的房間控制。
4. 充分利用元件成組和複製功能，記住快捷鍵 Ctrl+C , Ctrl+V。
5. 成組狀態下，是不能編輯組內內容的，所以要先解散組，再編輯。

Step5 配置開關資料來源

1. 點選已經配好的開關圖片，選擇右側導航欄的資料面板，點選資料來源配置。
2. 在資料來源配置處選擇已經建好的家居燈產品及裝置（需要自己提前建立好含有布林屬性的燈產品及裝置）。
3. 選擇屬性 - 主燈開關。
4. 點選右下角“確定”完成配置。

tips：

1. 裝置選擇可為“空”，即當前不配置任何具體裝置，此時會出現mock 資料的輸入框選項，可通過mock 資料方式來模擬裝置執行。

1. 當選擇裝置後，如果沒有真實裝置，則需要通過“線上模擬”讓裝置上線。你可以通過“線上模擬”推送裝置屬性或事件訊息，在編輯器中可直接看到裝置狀態引起的變化。

關於所有資料來源的詳細配置文件可點選此處檢視。

Step6 增加窗簾開關

同Step4-5 製作即可，最終效果：

站長統計