APP項目前臺開發流程和協作

  • 時間:2018-10-10 23:30 作者:BM小偉 來源:BM小偉 閱讀:68
  • 掃一掃,手機訪問
摘要:整體把握,從設計稿入手——技術選型并行開發,從實現靜態頁面開始前臺自動化前臺js邏輯前后臺集成小問題集合總結1.整體把握,從設計稿入手 —— 技術選型新項目到手,算是運氣好,設計稿都已經一律完成了,40多個頁面。不用擔心邊做邊改的情況。能夠提前確定重用性和少量規范。 項目主要要求: 1. 兼容PC、
  • 整體把握,從設計稿入手——技術選型
  • 并行開發,從實現靜態頁面開始
  • 前臺自動化
  • 前臺js邏輯
  • 前后臺集成
  • 小問題集合
  • 總結

1.整體把握,從設計稿入手 —— 技術選型

新項目到手,算是運氣好,設計稿都已經一律完成了,40多個頁面。不用擔心邊做邊改的情況。能夠提前確定重用性和少量規范。

項目主要要求:

1. 兼容PC、微信、手機端,兼容現代瀏覽器,IE9+等

1. 嵌入到安卓、ios用戶端和微信,要求頁面獨立

1. 使用node.js作為中間件

我負責前臺頁面和邏輯,node是另一個同事負責,前臺架構由前臺組長負責。

前臺框架選型是開發前很重要的準備:

1. UI框架: 考慮過uikit、amazeUI、bootstrap,最終選擇bootstrap+自己設置樣式,主要起因公司其余項目也用的bootstrap。對我來說這三個框架我之前都沒用過,作為一個一年經驗的前臺很可笑吧,其實我覺得也沒啥,馬上學便是。

1. js庫: 考慮過jquery和zepto,最終選擇jquery

1. 前臺工具: gulp,browserify,bower,less

1. node用的express,node那個同事熟習

1. 前臺模板用的swig

1. greensock動畫庫

2.并行開發,從實現靜態頁面開始

經過一個星期的前期準備和調研,前臺基本的架子搭起來了,gulp、bower、 規范。js這一塊自動化還未準備就緒,node后端的架子也在搭建。各方進度都有不一致的地方,考慮到并行開發,我建議我先做靜態頁面,node后端繼續搞自己的,組長繼續研究架子。

這樣也好,專心寫頁面,能更專注的考慮html、css方面的東西。做完40個頁面總共花了8的工作時間(未加班),我覺得還是比較快了。

css方面從bower里引入了bootstrap的部分less源碼,再覆蓋少量源碼需要修改的樣式,而后更多的是自己定義的樣式。這個過程中已經考慮了很多重用、結構、命名問題,所以前期4天的時間我的進度都很慢,由于邊寫就邊優化了,磨刀不誤砍柴工,后4天就差不多完成了30個頁面。以下是文件結構,按照bootstrap規范:

APP項目前臺開發流程和協作


3.前臺自動化

靜態頁面寫完了,恰好組長架子、工作流這一塊也搭好了,后端也做了少量功能等待集成。

組織js用到了browserify,前后臺的js邏輯都能用到require了。

項目比較緊,組長這一個架子都還沒徹底搞懂,還是挺復雜的,之后松點了將會好好看看。

自動化帶來了更高效率的開發,監聽、打包、壓縮、iconFont、require等前期做好了配置,后面幾乎就不需要改動了,對于前臺來說,這些都是必不可少的技術要求。

APP項目前臺開發流程和協作

4.前臺JS邏輯

JS這一塊,為每個頁面配置了viewName,寫在了base.html里,所有頁面將繼承base,這一塊當然就是開始說的swig模板,相應文件夾的里所有html文件的js將會引入page->{% viewName %}->index.js。

browserify把少量依賴js掛到了全局,比方:jquery,jq-validate,jq-form,greensock。

特定的頁面配置了pageConfig,用來獲取少量數據。

觸發事件都用事件代理商控制,組件間通信譽trigger觸發器。

view里:html寫好dom節點和動態參數,自動化工具會自動拼接節點生成swig前臺模板,在其余js里面即可以require了。傳入相應參數,即可以輸出到頁面了,如圖自己設置popup組件和list組件很方便就能調用。

APP項目前臺開發流程和協作

5.前后臺集成

如同沒啥好說的,后臺準備好接口,前臺調用就行了,某些問題上需要多點溝通,保證需求了解一致。

6.小問題集合

  1. gulp iconFont某些字體圖標殘缺,暫時icomoon手動升級
  2. 手機端 active 失效: -webkit-tap-highlight-color: transparent;
  3. html5 video audio很多事件現代瀏覽器支持不好,特別是手機端的瀏覽器,可以用這個地址做測試http://www.w3.org/2010/05/video/mediaevents.html

7.總結

  1. 整體把控、注重命名和重用,出現覺得不正當的和需要重用的就應該優化。
  2. 假如有條件先實現靜態頁面,再最后來寫js邏輯,這樣開發應該會更快。
  3. 由于多少自己也做過設計,也知道有時候作為前臺感覺設計師不放過每一個細節讓人覺得有點累,但是我們應該尊重設計師,不要有任何抱怨由于這是他們的責任,當然我說這一點并不是我之前抱怨他們了,而是每當很忙很累的時候,看著設計師提上來的UI問題時候,我這樣激勵過自己,覺得這一點還是挺好,讓我更積極,希望大家能多換位思考。
  4. 前后臺做好各自的單元測試,盡量保證自己代碼問題會是最少的,這樣集成成本就變得低了。
  5. 用到第三方框架和庫且不熟習的情況下,遇到需求問題,應該首先從三方文檔里找處理需求的辦法,實在引入的三方庫沒有處理方案,再考慮自己處理。
  6. 前期商定好各種規范.
  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-16 16:48)
【系統環境|服務器應用】2020新網站如何讓百度快速收錄網站首頁最新方法,親測有用!免費(2019-12-16 16:46)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
手機二維碼手機訪問領取大禮包
返回頂部
澳洲幸运10精准人工计划