小程序開發總結 - 模塊化開發流程規范

1. 小程序與H5的開發成本對比

小程序的開發和傳統的H5相比簡單許多,主要體現在:

1. 環境成本低:

H5 的開發涉及開發工具、前端框架、模塊管理工具、任務管理工具、UI庫、接口調用工具、各種瀏覽器運行環境等,盡管H5豐富的開發環境給了開發者更加靈活的配置方案,但增加了環境配置的成本,而開發微信小程序,由于微信團隊提供了開發者工具,并且規范了開發標準,前端常見的HTML、CSS變成了微信自定義的WXML、WXSS,WXML,官方文檔中都有明確的使用介紹,開發者無需關心各種環境的配置,專注于開發業務邏輯即可。

2. 擁有強大豐富的api,無視瀏覽器兼容性問題:

H5開發者深有體會,在編寫代碼時經常遇到兼容性問題,尤其是調用硬件部分,各個瀏覽器的支持程度差別很大。然而開發微信小程序,無需考慮兼容性問題,直接按照官方文檔提供的api進行調用即可。需要后端接口時調用request接口;需要上傳下載時調用上傳下載API;需要數據緩存時調用本地存儲API;需要支持地圖、羅盤、支付、掃碼等功能都有對應的api;UI庫直接使用官方的weui庫即可。

3. 布局適配更加容易

開發H5時,完成響應式前端的成本較高,然而小程序只需考慮移動端布局即可,而且官方首推使用flex布局,使得前端布局輕而易舉。此外,小程序提供了新的計算單位rpx,整個頁面寬度被固定為750rpx,開發者對于界面的布局真正做到了隨心所欲。

2. 模塊化優勢1 — 組件復用

和前端框架vue相似,新版本的小程序已經支持了模塊化開發,所謂的模塊化開發指的是將復雜的頁面拆分為各個組件單獨進行開發,模塊化的開發模式使得代碼邏輯清晰,代碼充分復用,減少了開發成本。

上圖是CFM賽事直播小程序的兩張截圖,左邊的是主頁,右邊的是視頻詳情頁,這兩個頁面的相似度極高,可以看到主頁整個頁面僅由4個組件組合而成,下面是主頁的全部wxml代碼:

<view ><video src="{{liveSrc}}"></video><cs-title title="賽程" icon-pic="1-1.png" tab-url="/pages/data_detail/data_detail"></cs-title><swiper autoplay="true" display-multiple-items="2"><swiper-item block wx:for="{{scheduleData}}" wx:key="index"><cs-schedule schedule-data="{{item}}" bind:component_order="order" bind:component_cancel="cancel"></cs-schedule></swiper-item></swiper><cs-title title="資訊" icon-pic="1-4.png" page-url="/pages/news/news"></cs-title><block wx:for="{{newsData}}" wx:key="index"><cs-news-item news-data="{{item}}" new-page="{{true}}"></cs-news-item></block></view>

上面的代碼如果簡化下,去掉屬性參數,即為:

<view><video></video><cs-title></cs-title><swiper><cs-schedule></cs-schedule></swiper><cs-title></cs-title><cs-news-item></cs-news-item></view>

而右邊的視頻詳情頁也可以通過堆砌組件完成頁面搭建

<view><video></video><cs-tip></cs-tip><cs-title></cs-title><cs-news-item></cs-news-item></view>

其中的組件單獨進行開發即可,一次開發,多次使用

3. 模塊化優勢2 — 代碼邏輯清晰、便于維護

模塊化的另一大優勢,代碼邏輯結構、便于維護,將大段的代碼分拆成多個組件,每個組件內只存放組件本身的代碼,使得整體代碼邏輯清晰,便于維護。

4. 模塊化開發規范 — 文件組織

如圖所示,所有的組件需要存放在components文件夾下,為了區分組件,可以使用文件夾進行組件分類:

1. common:存放的是項目中常用的組件,如用戶頭像組件、日歷組件、選項卡組件
2. form:顧名思義,存放的是form表單相關的通用組件,如圓形按鈕、table、tip組件
3. other:對于一些較為特殊的業務相關的組件,存放在對應的目錄下,比如在match賽事文件夾下存放了賽程表、積分榜等組件

對于三類組件的使用頻率和靈活性不盡相同:

1. common類組件和form表單類組件是項目中頻繁使用的組件,對于這類組件,開發者需要花費更多的精力打磨細節,設置更多參數,以適應不同的場景
2. 純粹的業務相關的組件由于功能特殊,往往不會復用,之所以分離作為組件,一般是因為業務邏輯復雜,單獨作為組件有利于簡化父頁面的代碼邏輯,這類組件只需要滿足需求即可。

5. 模塊化開發規范 — 命名規則

良好的命名是對組件最好的注釋,組件代碼中變量函數的命名不必多說,對于自定義組件名稱,統一以 cs 開頭,區別于系統組件;為了統一組件名與wxml中的組件引用名,所有組件全部用小寫字母命名,以下劃線_隔詞。

6. 模塊化開發規范 — 自定義組件的配置與使用

官方文檔見:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

此處簡單總結配置與使用方法

組件的配置 cs_xxx.json

{"component": true,"usingComponents": {"cs-tip": "path/to/the/custom/component"}}

頁面中引用組件的配置

{"usingComponents": {"cs-title": "/components/common/cs_title/cs_title"}}

組件的引用

<view><cs-title></cs-title></view>

7. 模塊化開發規范 — 減少組件耦合

模塊化開發為了更好的實現組件復用,應該盡量減少組件間的耦合,需要遵循以下原則:

1. 組件只負責前端樣式的渲染,只通過參數接收數據,不主動涉及原始數據的處理;
2. 適配器只負責數據的處理,輸入原始數據,輸出組件適用的數據;
3. page頁面中從服務端拉取數據,經過adapter處理,由組件負責渲染;
4. 組件中涉及修改服務端數據的事件,全部交由page頁面處理,觸發page中對應的事件

組件通信 - 頁面向組件傳參

頁面引用自定義組件,參數直接作為屬性傳遞,下面引用的是一個名為"cs-xiaoyao"的組件,注意參數命名方式

<cs-xiaoyao schedule-data="{{item}}" new-page="{{true}}"></cs-xiaoyao>

組件中獲取參數,并監控參數變化重新渲染

Component({    properties: {        scheduleData: { // 屬性名            type: Object,            observer: '_propertyChange' // 監控屬性變化,為字符串        }        newPage: Boolean    },    data:{        scheduleData:{},        newPage: true    },    ready() {        this.setData({            scheduleData: this.properties.scheduleData,            newPage: this.properties.newPage        });    },    methods: {        _propertyChange (newVal, oldVal) {            ...        }    }})

組件通信 - 組件調用父頁面方法

組件只負責數據的渲染顯示,組件中涉及修改服務端數據的事件,全部交由page頁面處理,觸發page中對應的事件

<button bindtap="formSubmit" formType="submit">提交</button>

組件中的事件處理

formSubmit(event) {// 事件選項    const eventOption = {    composed: true    }    var eventDetail = {        data: ...,    }    // 調用父頁面的cancel事件    this.triggerEvent('component_cancel', eventDetail, eventOption);}

父頁面調用組件,綁定事件

<cs-xiaoyao bind:component_cancel="cancel"></cs-xiaoyao>

父頁面中的對應事件處理

cancel(event) {    const data = eventDetail.detail.data;    ...}