功能整理:
店鋪裝修移動化目前需求主要是以下幾個:
- 模擬手機端預覽裝修效果
- 拖拽裝修模塊進預覽處
- 對模塊進行布局順序修改(上移下移刪除等)
- 對模塊進行屬性修改
- 裝修備份功能(即讀取指定數據并在預覽處展示指定效果)
其中模塊屬性修改,相對比較復雜,主要包含幾個功能:
- 根據需求上傳指定格式的圖片
- 裁剪圖片(每個模塊都有指定的尺寸)
- 鏈接選擇小工具(彈窗形式,選擇已有的鏈接并填充到表單中)
- 服務選擇 (彈窗形式,選擇已有的服務,并填充到表單中)
- 案例選擇 (彈窗形式,選擇已有的案例,并填充到表單中)
前提:
參考淘寶的移動店鋪裝修功能,只支持Chrome和UC瀏覽器,所以經過產品同意,可以不考慮兼容性的問題,也意味著可以選擇更多。
開發(fā)周期:
約兩周
選型:
手機端預覽效果
因為這個項目功能比較獨立,所以遷入fis項目進行構建。同時考慮到涉及交互還比較多,所以參考使用框架來幫助我們更好的完成開發(fā)??紤]開發(fā)周期,經過初步篩選,決定入坑Vuejs。
我們這里使用這個框架主要是拿它來實現需求中手機端的預覽效果:把手機端預覽中的每個模塊都當成component進行組裝,通過改變數據來控制展示(拖拽功能即多塞了一條數據,改變屬性就相當于改變其中一個數據)。
備份
備份功能也可以使用預覽的相同機制實現。
表單功能
至于表單部分功能比較多,可能還是要使用現有的組件來完成部分功能(如選擇服務)。
擴展
以后擴展其他模塊的話,其實也就相當于多注冊幾個component,擴展起來比較隨意,也比較獨立。
其他問題
- Vuejs的文檔相對比較友好,容錯度也較高,入手使用并不會那么痛苦(就算日后有人接手也相對來說不會那么無從著手)。
- Vuejs本身組件并不豐富。Github上實用的組件也就是vue-crop(包裝的jCrop)和vue-validator。 但是經過測試其實也可以使用其他組件,如rake中正在使用的彈窗組件,如拖拽使用的Sortable插件。這些都可以在測試中正常使用。