引言
小程式開發無疑是目前前端領域炙手可熱的開發方式之一，熟知的有支付寶小程式，微信小程式等；各種圍繞著小程式的框架也開始在社群出現，如可以使用 Vue.js 開發小程式的 mpvue，遵循 React.js 語法規範的多端統一開發框架 Taro 等。這些框架的出現能有效的提升開發體驗，一次編寫，多端執行 ，開發者只需根據自己熟悉的語法，開發的小程式便可以執行在多個裝置上，聽起來很酷，確實也很酷。而 Iceworks 希望在這些很酷的基礎上，能讓前端開發更酷一點。
Iceworks 為什麼要支援小程式開發
對於有小程式業務需求的團隊而言，可能同時需要在多個小程式專案進行切換開發，在開發的過程中我們會發現有很多基礎瑣碎但又並不可少的一些工作：
- 工程管理：之前見過一些團隊是直接將舊的專案複製一份，刪掉業務程式碼，只留下基礎的專案結構和工程配置，然後在此基礎上進行開發，這顯然不是優雅的做法，太過於浪費時間，且沒有形成團隊的規範
- 頁面開發：這個過程可能是很多開發不願意去做的事情，目前社群的小程式框架都會配備一套基礎元件，這在一定程度上能減少 UI 開發的時間和效率提升，但還是少不了切頁面的過程
在飛冰中，我們基於不同的專案進行物料沉澱，可複用的程式碼塊，不同行業的場景模板，讓開發者直接在 Iceworks 上快速的從物料源中選擇模板建立小程式應用，並可以在此基礎上進行復用和修改，基於區塊視覺化的組裝一個頁面，從而提高開發效率，減少不必要的重複的工作，專注於業務開發。
當然，除了飛冰提供的行業模板和區塊，開發者也可以根據團隊的開發規範和實際情況形成最佳實踐，最後沉澱成區塊物料池和腳手架模板。
在 Iceworks 如何開發小程式
升級到 Iceworks 2.9.0 版本，在設定皮膚開啟 小程式物料源 選項，即可在模板介面和區塊皮膚看到對應的小程式相關物料，其中包括：
- 4 個模板
- 18 個區塊
初始化專案
在模板介面，可以看到 Iceworks 推薦的小程式物料源，這裡我們選擇第一個 Miniapp lite 模板進行專案初始化:
啟動服務
初始化完成後，在 Iceworks 專案介面，點選啟動除錯服務，在瀏覽器開啟對應的地址即可預覽：
新建頁面
接下來，使用 Iceworks 新建頁面的功能來新增一個小程式頁面，點選新建頁面，根據需求選擇對應的區塊，可以在皮膚右側看到效果圖，可以按需刪除或者新增，也可以點選預覽頁面功能看到實際的頁面效果，最後可以生成頁面，會下載對應的程式碼到初始化的專案腳手架中：
回到瀏覽器，在位址列輸入新建頁面的路由（例如: http://127.0.0.1:6002/#!/page2)，即可看到實際的效果圖。
專案基本結構
Iceworks 推薦的小程式物料源使用的是淘寶小程式輕框架語法，專案包含一個描述整體程式的入口和多個描述各自頁面的頁面級入口, 元件副檔名為 .html 的 Single File Component (單檔案元件) 描述一個自定義的輕框架元件
專案的主體部分由 manifest.json 和 app.js 組成，必須放在專案的根目錄，如下：
- manifest.json
- app.js
- .iceworks/ // 模板檔案(可自定義生成模板的格式)
- public/ // 靜態資源
- src/
- components/ // 元件目錄
- component1.html // 元件檔案
- component2.html
- pages/ // 頁面目錄
- page1/
- index.html // 頁面入口
- page2/
- index.html
- index/
- index.html
- manifest.json // 描述專案基本資訊，包括頁面、tabBar等
- app.js // 程式級應用入口
- package.json // 專案工程檔案
複製程式碼具體開發文件參考：products-admin
你的第一個輕框架應用
在 Icewworks 中選擇並建立應用後，跟著下文開始開發吧
developer.taobao.com/framework/l…
多端適配
目前生成的應用是以 H5 的方式預覽，同時支援 PWA 模式。 通過轉換工具可以將應用釋出到淘寶小程式，支付寶小程式，微信小程式等，實現多端統一，大大提高開發者的效率。
擴充套件資訊
- 淘寶開發者平臺
- 官方網站：飛冰-讓前端開發簡單而友好
- 下載 Iceworks：alibaba.github.io/ice/icework…
- Github：github.com/alibaba/ice
- 飛冰群二維碼：點選這裡檢視二維碼
- 聯絡 & 招聘 ice-admin[at]alibaba-inc.com