天天看點

打造小程式元件化開發架構

打造小程式元件化開發架構

一個是使用<code>wepy new demo</code>指令生成的标準demo

一個是基于wepy開發的手機充值的完整demo

一個是基于wepy開發的開源的仿微信的聊天界面(源代碼下載下傳)

以上三個demo均在安卓機和IOS機上運作過通。

1 . 變量與方法使用盡量使用駝峰式命名,避免使用<code>$</code>開頭。

以<code>$</code>開頭的方法或者屬性為架構内建方法或者屬性,可以被使用,使用前請參考API文檔。

2 .入口,頁面,元件的命名字尾為<code>.wpy</code>。外鍊的檔案可以是其它字尾。

請參考wpy檔案說明

3 .使用ES6文法開發。

架構在ES6下開發,是以也需要使用ES6開發小程式,ES6中有大量的文法糖可以讓我們的代碼更加簡潔高效。

4 .使用Promise

架構預設對小程式提供的API全都進行了 Promise 處理,甚至可以直接使用async/await等新特性進行開發。

以下安裝都通過npm安裝

注:在騰訊開發網,因為npm需要使用代理才可以,沒使用npm代理的同學建議使用騰訊内部工具tnmp代替npm安裝,tnpm的安裝與使用請參考 alsotan g的文章。

1 .安裝 wepy 指令行工具

2 .在開發目錄生成開發DEMO

3 .開發實時編譯

項目目錄結構

1 .使用微信開發者工具建立項目,本地開發選擇dist目錄。

2 .微信開發者工具 —&gt; 項目 —&gt; 關閉ES6轉ES5。

3 .本地項目根目錄運作wepy build --watch,開啟實時編譯。

在原有的小程式的開發模式下進行再次封裝,更貼近于現有MVVM架構開發模式。架構在開發過程中參考了一些現在架構的一些特性,并且融入其中,以下是使用wepy前後的代碼對比圖。

官方DEMO代碼:

基于wepy的實作:

參見章節:元件

示例代碼:

在編譯過程當中,會遞歸周遊代碼中的require然後将對應依賴檔案從node_modules當中拷貝出來,并且修改require為相對路徑,進而實作對外部NPM包的支援。如下圖:

打造小程式元件化開發架構

官方目錄結構要求app必須有三個檔案app.json,app.js,app.wxss,頁面有4個檔案 index.json,index.js,index.wxml,index.wxss。而且檔案必須同名。

是以使用wepy開發前後開發目錄對比如下:

官方DEMO:

使用wepy架構後目錄結構:

預設使用babel編譯,支援ES6/7的一些新特性。

使用者可以通過修改wepy.config.js配置檔案,配置自己熟悉的babel環境進行開發。預設開啟使用了一些新的特性如promise,async/await等等。

對現在API進行promise處理,同時修複一些現有API的缺陷,比如:wx.request并發問題等。

原有代碼:

基于wepy實作代碼:

在同時并發10個request請求測試時:

不使用wepy:

打造小程式元件化開發架構
打造小程式元件化開發架構

使用wepy後:

打造小程式元件化開發架構

執行wepy new demo後,會生成類似配置檔案。

wpyExt:預設值為’.wpy’,IDE預設情況下不會對此檔案類型高亮,此時可以修改所有檔案為.vue字尾(因為與vue高亮規則一樣),然後将此選項修改為.vue,就能解決部分IDE代碼高亮問題。

sass:sass編譯配置,參見這裡

less:less編譯配置,參見這裡

babel:babel編譯配置,參見這裡

plugins: plugins為1.1.6版本之後功能,目前支援js壓縮與圖檔壓縮,持續開發……

wpy檔案的編譯過程過下:

打造小程式元件化開發架構

一個<code>.wpy</code>檔案分為三個部分:

樣式<code>&lt;style&gt;&lt;/style&gt;</code>對應原有wxss

模闆<code>&lt;template&gt;&lt;/template&gt;</code>對應原有wxml

代碼<code>&lt;script&gt;&lt;/script&gt;</code>對應原有js

其中入口檔案app.wpy不需要template,是以編譯時會被忽略。這三個标簽都支援type和src屬性,type決定了其代碼編譯過程,src決定是否外聯代碼,存在src屬性且有效時,忽略内聯代碼,示例如下:

标簽對應 type 值如下表所示:

入口app.wpy繼承自wepy.app,包含一個config屬性和其全局屬性、方法、事件。其中config屬性對應原有的app.json,編譯時會根據config生成app.json檔案,如果需要修改config中的内容,請使用系統提供API。

頁面入口繼承自wepy.page,主要屬性說明如下:

打造小程式元件化開發架構

頁面入口繼承自wepy.component,屬性與頁面屬性一樣,除了不需要config以及頁面特有的一些小程式事件等等。

在小程式中,可以利用 JS子產品化 和wxml模闆 ,對業務子產品進行劃分,實作如下效果:

打造小程式元件化開發架構

但實際上不同的子產品代碼與事件互動都是在同一個頁面空間處理的,比如說 moduleA 和 moduleB 中同時存在一個 add 響應事件時,就需要在 html 和 js 中分别定義為 moduleA_add,moduleB_add。業務子產品複雜之後就不利于開發和維護。

在wepy中,利用元件化的特性可以解決此類問題,如下圖:

打造小程式元件化開發架構

ComA 和 ComB中間的資料與事件互相隔離,可以分别擁有自己的add事件。

當頁面或者元件需要引入子元件時,需要在頁面或者script中的components給元件配置設定唯一id,并且在template中添加<code>&lt;component&gt;</code>标簽,如index.wpy

Index頁面引入A,B,C三個元件,同時元件A和B又有自己的子元件D,E,F,G,H。

wepy.component基類提供三個方法$broadcast,$emit,$invoke,是以任一頁面或任一元件都可以調用上述三種方法實作通信與互動,如:

元件的事件監聽需要寫在events屬性下,如:

1 . $broadcast

$broadcast事件是由父元件發起,所有子元件都會收到此廣播事件,除非事件被手動取消。事件廣播的順序為廣度優先搜尋順序,如果Page_Index發起一個$broadcast事件,那麼接收到事件的先後順序為:A, B, C, D, E, F, G, H。如下圖:

打造小程式元件化開發架構

2 .$emit

$emit與$broadcast正好相反,事件發起元件的父元件會依次接收到$emit事件,如上圖,如果E發起一個$emit事件,那麼接收到事件的先後順序為:A, Page_Index。如下圖:

打造小程式元件化開發架構

3 .$invoke

$invoke是一個元件對另一個元件的直接調用,通過傳入的元件路徑找到相應元件,然後再調用其方法。

如果想在Page_Index中調用元件A的某個方法:

如果想在元件A中調用元件G的某個方法:

混合可以将組之間的可複用部分抽離,進而在元件中使用混合時,可以将混合的資料,事件以及方法注入到元件之中。混合分分為兩種:

預設式混合

相容式混合

對于元件data資料,components元件,events事件以及其它自定義方法采用預設式混合,即如果元件未聲明該資料,元件,事件,自定義方法等,那麼将混合對象中的選項将注入元件這中。對于元件已聲明的選項将不受影響。

對于元件methods響應事件,以及小程式頁面事件将采用相容式混合,即先響應元件本身響應事件,然後再響應混合對象中響應事件。

小程式通過Page提供的setData方法去綁定資料,如:

因為小程式架構本身原因,頁面渲染層和JS邏輯層分開的,setData操作實際就是JS邏輯層與頁面渲染層之間的通信,那麼如果在同一次運作周期内多次執行setData操作時,那麼通信的次數是一次還是多次呢?經過跟小程式團隊确認後得知多次setData會執行多次通信。

wepy使用髒資料檢查對setData進行封裝,在函數運作周期結束時執行髒資料檢查,一來可以不用關心頁面多次setData是否會有性能上的問題,二來可以更加簡潔去修改資料實作綁定,不用重複去寫setData方法。代碼如下:

但需注意,在函數運作周期之外的函數裡去修改資料需要手動調用$apply方法。如:

在執行髒資料檢查是,會通過this.$$phase辨別目前檢查狀态,并且會保證在并發的流程當中,隻會有一個髒資料檢查流程在運作,以下是執行髒資料檢查的流程圖:

打造小程式元件化開發架構

點這裡檢視官方文檔

保留setData方法,但不建議使用setData執行綁定,修複傳入undefined的bug,并且修改入參支援:

this.setData(target, value)

this.setData(object)

打造小程式元件化開發架構
打造小程式元件化開發架構
打造小程式元件化開發架構
打造小程式元件化開發架構
打造小程式元件化開發架構

新增對第三方Compiler的支援

新增pug編譯器

重新整理代碼結構,使用lerna維護不同的NPM包

重新處理Plugins,同樣交由第三方包處理

添加了編譯時檢測依賴的Compiler或者Plugins是否缺失的邏輯,如果缺失會自行安裝

添加了cli工具版本檢測的功能

新增了wepy upgrade指令更新wepyjs版本

新增對第三方元件的支援

新增第三方元件[wepy-com-toast]

模闆中添加toast元件測試

修複了script使用src外鍊報錯的BUG

修複了LESS編譯會調用到SASS的BUG

優化了事件傳參數,支援直接傳參

加入了Travis-CI以及Coveralls

修複其它細節BUG問題

script/template/style的屬性同時支援type和lang

添加mixins支援

修複了元件ID大寫導緻無法識别的問題

添加了對小程式頁面所有響應事件的支援

修改wepy.config.js支援plugins

添加UglifyJsPlugin,在編譯時對生成的所有JS檔案進行壓縮

添加ImageMinPlugin(不推薦使用,處理大圖檔時還有問題)

添加wepy build --no-cache參數,編譯時會重新編譯所有依賴檔案

wepy new demo時,由在目前目錄下生成項目改為建立demo目錄,然後再生成項目

更新生成demo支援最新功能

添加了小程式其它頁面事件的支援

修改預設配置檔案.wepyrc為wepy.config.js,友善以後功能擴充。(相容老配置檔案

修複SASS編譯異常導緻watch結束的BUG

修複子元件修改時不會觸發父元件更新的BUG

修複$invoke('../')的BUG

修複頁面onLoad事件中傳參的BUG

添加了對sass/scss的編譯支援

.wepyrc中加入對less/sass的配置支援

.wepyrc中添加wpyExt選項

更新生成模闆

最後,感謝@brianliu, @xmagicwu 以及組内小夥伴們在開發過程中提供的幫助。

上一篇: OSPF LSA 類型