Iceworks 支持小程序開發

來自專欄飛冰（ICE）12 人贊了文章

引言

小程序開發無疑是目前前端領域炙手可熱的開發方式之一，熟知的有支付寶小程序，微信小程序等；各種圍繞著小程序的框架也開始在社區出現，如可以使用 Vue.js 開發小程序的 mpvue，遵循 React.js 語法規範的多端統一開發框架 Taro 等。這些框架的出現能有效的提升開發體驗，一次編寫，多端運行，開發者只需根據自己熟悉的語法，開發的小程序便可以運行在多個設備上，聽起來很酷，確實也很酷。而 Iceworks 希望在這些很酷的基礎上，能讓前端開發更酷一點。

Iceworks 為什麼要支持小程序開發

對於有小程序業務需求的團隊而言，可能同時需要在多個小程序項目進行切換開發，在開發的過程中我們會發現有很多基礎瑣碎但又並不可少的一些工作：

• 工程管理：之前見過一些團隊是直接將舊的項目複製一份，刪掉業務代碼，只留下基礎的項目結構和工程配置，然後在此基礎上進行開發，這顯然不是優雅的做法，太過於浪費時間，且沒有形成團隊的規範
• 頁面開發：這個過程可能是很多開發不願意去做的事情，目前社區的小程序框架都會配備一套基礎組件，這在一定程度上能減少 UI 開發的時間和效率提升，但還是少不了切頁面的過程

在飛冰中，我們基於不同的項目進行物料沉澱，可復用的代碼塊，不同行業的場景模板，讓開發者直接在 Iceworks 上快速的從物料源中選擇模板創建小程序應用，並可以在此基礎上進行復用和修改，基於區塊可視化的組裝一個頁面，從而提高開發效率，減少不必要的重複的工作，專註於業務開發。

當然，除了飛冰提供的行業模板和區塊，開發者也可以根據團隊的開發規範和實際情況形成最佳實踐，最後沉澱成區塊物料池和腳手架模板。

在 Iceworks 如何開發小程序

升級到 Iceworks 2.9.0 版本，在設置面板開啟 小程序物料源 選項，即可在模板界面和區塊面板看到對應的小程序相關物料，其中包括：

• 4 個模板
• miniapp-lite
• products-admin
• posts-admin
• operating-dashboard

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 中選擇並創建應用後，跟著下文開始開發吧

https://developer.taobao.com/framework/light-framework/first-app.html

多端適配

目前生成的應用是以 H5 的方式預覽，同時支持 PWA 模式。 通過轉換工具可以將應用發布到淘寶小程序，支付寶小程序，微信小程序等，實現多端統一，大大提高開發者的效率。

擴展信息