Iceworks 支持小程序開發

時間 2019-12-06

標籤 iceworks 支持程序開發简体版

原文原文鏈接

引言

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

Iceworks 爲何要支持小程序開發

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

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

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

固然，除了飛冰提供的行業模板和區塊，開發者也能夠根據團隊的開發規範和實際狀況造成最佳實踐，最後沉澱成區塊物料池和腳手架模板。github

在 Iceworks 如何開發小程序

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

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