前些日子，在架構師帶領下，我和另一個前端從零開始開發微信小程序。這是一個比較完整的項目開發，基於此項目，從以下幾個點，我對小程序的架構進行一些分析和介紹。
由於本人能力有限，可能會有缺漏和錯誤，歡迎指出。
目錄
- 項目介紹
- 項目結構
- 組件化開發
- HTTP請求封裝
- 文檔書寫
- 總結
內容
1. 項目介紹
此是一個輕量的小程序，全部由原生小程序頁面組成。我們將之划分為7個模塊，用戶、地址、優惠券、團購商城、訂單、紅包、退款。
項目初始是只有產品原型，服務端開發、UI設計、前端開發是同步進行的。一開始，我們是按照原型進行架構和頁面開發，UI設計圖和服務端接口后面陸陸續續提供出來的時候，我們再進行修改，這邊會有一個很重要的，就是mock數據，這個會在后面講到。
2. 項目結構
項目結構主要分為公用組件、圖片資源、頁面、數據格式處理、工具類。
├─ components（公用組件） ├─ images（圖片資源） ├─ libs（庫） │ ├─ mock.js（mock數據） │ ├─ sdk.js（接口封裝） ├─ pages（頁面） │ ├─ account（用戶相關） │ ├─ address（地址相關） │ ├─ coupon（優惠券相關） │ ├─ group（團購商城相關） │ ├─ order（訂單相關） │ ├─ redPackage（紅包相關） │ └─ refund（退款相關） ├─ service（數據格式處理） └─ utils（工具類） ├─ public.js └─ request.js
3. 組件化開發
大家都知道，組件化開發有很多好處。
- 組件復用，代碼量少，提高編譯速度。
- 組件的邏輯獨立，修改不會影響其它文件。
- 文件結構清楚，方便其他人員的使用。
不過，如果組件設計不合理，業務拆分不對，也會造成重復代碼、組件通信混亂和多工作量等問題。這個就需要項目開發者統籌全局，進行分析判斷。 所以，我們研究了原型圖，分析其中的功能模塊和業務模塊，我們將相同或可復用的模塊提取出來，放到全局組件庫下。同時，我們將單個模塊也進行了組件化拆分，放在各自的模塊組件庫下。
在模塊中，我們在頁面中也抽了一些邏輯相對獨立的代碼出來，寫成組件，有些是可以復用，有些單純就是為了頁面可讀性高些。復用舉例：在訂單詳情和訂單列表中，有關訂單的狀態及功能按鈕是一致的，我們就將這一塊抽了出來，寫成behaviors。可讀性舉例：確認訂單頁中，選擇紅包的彈窗，就單獨寫成組件，只要將紅包選擇的最終結果傳給父組件就行，兩者的邊界很清晰。
4. HTTP請求封裝
微信小程序進行網絡通信，要先設置域名，不然會提示不合法。設置域名的信息可以在開發者工具-詳情-域名信息中看到。
使用wx.request可以發起一個http請求
wx.request({
url: 'test.php', // 開發者服務器接口地址 data: { // 請求的參數 x: '', y: '' }, method: 'GET', // HTTP 請求方法, 默認GET header: { // 設置請求的 header 'content-type': 'application/json', // 默認值 'cookie': 'token=' + token }, dataType: 'json', // 返回的數據格式, 默認json responseType: 'text', // 響應的數據類型, 默認text success (res) { // 接口調用成功的回調函數 console.log(res.data) }, fail () { // 接口調用失敗的回調函數 }, complete () { // 接口調用結束的回調函數（調用成功、失敗都會執行） } }) 在平時項目使用中，我們往往會對HTTP請求做一層封裝。
從圖中可以看到，在自定義的SDK中封裝HTTPS請求的數據或MOCK的數據。在各個七個模塊的services中分派，然后再在頁面pages或者組件components中調用。
- request模塊封裝，方便網絡請求。
- 定義了一個名為SDK的類，集成所有接口獲取的方法。
- 在app.js中，通過new命令生成對象實例，將初始化后的sdk賦值globalData.API_SDK，方便項目中中調用。
- Services中獲取globalData.API_SDK對象實例中的接口方法，並導出。
- 在頁面中引用Services中的方法，並調用方法。
5. 文檔書寫
軟件開發文檔是軟件開發使用和維護過程中的必備資料。它能提高軟件開發的效率，保證軟件的質量，而且在軟件的使用過程中有指導，幫助，解惑的作用，尤其在維護工作中，文檔是不可或缺的資料。
在項目中，我們維護了兩份文檔，分別為API文檔和組件README文檔。 在API文檔中，將每次SDK修改的內容都寫在文檔中，標注版本、時間、說明。並說明SDK接口的使用方式、傳參說明、API響應說明等。在README文檔中，則寫明目錄結構說明和全局組件說明。這樣，開發者就可以通過文檔來比較方便的了解此項目的情況。
6. 總結
在寫這個項目前，前端約定了小程序開發規范。明確了頁面、命名、樣式、行為等規范。因此，在開發過程中，我們格外注意開發的風格，做到統一。
在原型出來以后，我們根據原型圖進行了模塊和功能的划分，明確了每個人所做的開發內容，制定了前端開發排期。
在開發過程中，因為UI圖還沒出來，我們根據原型圖先進行了開發，后來在修改樣式的時候，感覺還是挺麻煩的。不過，雖然存在樣式返工問題，但是加快了后續的開發速度。
因為我們封裝了全部的接口到SDK中，對Java程序員返回的數據格式進行了一層處理，所以我們在開發對接的時候很方便，速度很多。同時，在調試對接的時候，UI圖中對於細節的處理不同，也在同時修改一些缺乏的字段或者服務端沒有提供或者一開始SDK沒有包入，在API文檔說明都有做修改內容說明，多人協作時，文檔真的很重要。
這個項目前期很慢，后期很快。快到項目上線日期了，其實我們有些接口還沒調完（測試已經在陸陸續續測試我們已經寫好的模塊了），不過有了前面的打底，速度進行的很快，如約上了。
這是我寫的第二個小程序的項目，是完整的整一個項目。前一個小程序項目只寫了一個小模塊，因此感覺成長還是挺大的。比較其他以往的開發項目，類似vue、react、支付寶小程序，感覺開發框架都是大同小異的，基本理念和流程都大致相似，只是開發語言或方法的實現有所差異。
----------------------------------------
小程序系列：
基礎使用： component使用 、 wxs使用 、 節點操作 、 頁面跳轉 、 緩存
----------------------------------------