基于WePY2.x框架下的小程序開發(fā)實現(xiàn)動畫效果的彈窗組件
標題實在是不知道該怎么再進行縮減了。首先說明下是小程序開發(fā)，其次是基于WePY框架下。因為其使用類Vue語法進行小程序開發(fā)，與原生小程序開發(fā)和基于Taro框架下使用類React語法的小程序開發(fā)在語法上還是有很大區(qū)別的，所以特別強調(diào)一下。
一、前言
隨著公司小程序需求的日益上升，在假期自學了原生小程序開發(fā)以及小程序云開發(fā)。但是公司小程序工程又是基于WePY框架下進行開發(fā)的，其使用類Vue語法，方便那些習慣于用Vue框架進行前端開發(fā)的同學。所以進行WePY開發(fā)之前，還要先去學習Vue。
但是類Vue畢竟是類Vue，與本身的Vue還是有諸多不同的。在WePY1.x的時代，一眼就能看到原生小程序的影子。目前的2.x時代已經(jīng)對此優(yōu)化了很多，本篇文章就是基于WePY2.x下實現(xiàn)動畫效果的彈窗組件的，所以使用的時候一定要先注意版本。
二、代碼
里面包含了Vue、原生小程序、基于WePY框架三種實現(xiàn)方案。具體為什么會有3種，且往下看。
三、實現(xiàn)歷程
1. Vue實現(xiàn)
因為WePY框架下的小程序是類Vue語法，所以自然而然想到用Vue的方式去解決問題。
實現(xiàn)效果
實現(xiàn)原理
通過Vue的transition標簽+CSS3動畫屬性
實現(xiàn)代碼
本案例通過cdn引用而Vue，去測試實現(xiàn)動畫彈窗。因為只是實驗，所以并沒有使用Vue腳手架
實現(xiàn)邏輯
水平有限，在自己的知識區(qū)內(nèi)進行解釋。具體可以看代碼
通過transition組件去監(jiān)聽其下DOM的插入與移除。transition的特性就是可以給任何元素和組件添加enter/leave的過渡。詳細點說就是當DOM通過v-if或v-show顯示或隱藏時，transition會在其顯示與隱藏的過渡階段動態(tài)添加enter或者leave類。然后結(jié)合CSS3的transition屬性，去針對不同的過渡階段做動畫樣式。這點其實和React的一個動畫庫react-transition-group有異曲同工之妙，之前的一篇文章有玩過React轉(zhuǎn)場動畫，期間就使用了React這個庫。
結(jié)果
在Vue工程下，成功實現(xiàn)了彈窗組件。將其移植到WePY的小程序工程中，出現(xiàn)了問題。WePY雖然是類Vue語法，但畢竟不是真正的Vue，所以不識別transition組件~Game Over
2. 原生小程序?qū)崿F(xiàn)
打開小程序官方文檔，發(fā)現(xiàn)有相關(guān)實現(xiàn)動畫的API
實現(xiàn)效果
實現(xiàn)原理
小程序官方API wx.createAnimation(Object object)
實現(xiàn)代碼
實現(xiàn)邏輯
水平有限，在自己的知識區(qū)內(nèi)進行解釋。具體可以看代碼
創(chuàng)建組件時，使用wx.createAnimation初始化一個動畫實例。通過observes監(jiān)聽組件的是否顯示屬性的變化。根據(jù)屬性的改變值調(diào)用動畫實例的bottom（改變哪個CSS屬性就調(diào)用動畫實例的哪個方法）函數(shù)，并傳入bottom改變的值。然后導出動畫隊列并其綁定給動畫載體（標簽）的animation屬性。
結(jié)果
WePY工程不支持原生小程序語法，最明顯的就是原生小程序通過setData手動去實現(xiàn)數(shù)據(jù)綁定，而WePY可以通過類Vue的v-bind進行綁定。并且兩者組件之間本身就是有很多區(qū)別的。具體可以查看WePY文檔
3. WePY小程序?qū)崿F(xiàn)
雖然WePY不支持原生小程序的語法，但是其工程內(nèi)是可以調(diào)用原生小程序的官方API的
實現(xiàn)效果
實現(xiàn)原理
小程序官方API wx.createAnimation(Object object)
實現(xiàn)代碼
實現(xiàn)邏輯
水平有限，在自己的知識區(qū)內(nèi)進行解釋。具體可以看代碼
通過類Vue語法v-bind去綁定動畫載體的animation屬性，在watch下去監(jiān)聽顯示與隱藏屬性的改變，然后動態(tài)去導出wx.createAnimation創(chuàng)建的動畫實例的動畫隊列。此時不用進行setData，因為v-bind已經(jīng)自動將新的動畫隊列綁定到動畫載體上了。
結(jié)果
完美解決需求，最后的實現(xiàn)也確實很有意思，用的vue語法，去綁定原生小程序組件特有的animation屬性。所以印證了勇于嘗試，勇于探索是解決問題的唯一之道
四、額外補充
在三種方式封裝組件的過程中，無論哪一種都是支持solt插槽組件。所以可以將彈窗內(nèi)容作為插槽，以便使用者針對業(yè)務(wù)需求擴展出更加個性化的彈窗樣式。
五、感觸
前端雖雜，但還是很有趣的。加油吧！！！
