標(biāo)題實(shí)在是不知道該怎么再進(jìn)行縮減了。首先說(shuō)明下是小程序開(kāi)發(fā)，其次是基于WePY框架下。因?yàn)槠涫褂妙怴ue語(yǔ)法進(jìn)行小程序開(kāi)發(fā)，與原生小程序開(kāi)發(fā)和基于Taro框架下使用類React語(yǔ)法的小程序開(kāi)發(fā)在語(yǔ)法上還是有很大區(qū)別的，所以特別強(qiáng)調(diào)一下。

一、前言

隨著公司小程序需求的日益上升，在假期自學(xué)了原生小程序開(kāi)發(fā)以及小程序云開(kāi)發(fā)。但是公司小程序工程又是基于WePY框架下進(jìn)行開(kāi)發(fā)的，其使用類Vue語(yǔ)法，方便那些習(xí)慣于用Vue框架進(jìn)行前端開(kāi)發(fā)的同學(xué)。所以進(jìn)行WePY開(kāi)發(fā)之前，還要先去學(xué)習(xí)Vue。

但是類Vue畢竟是類Vue，與本身的Vue還是有諸多不同的。在WePY1.x的時(shí)代，一眼就能看到原生小程序的影子。目前的2.x時(shí)代已經(jīng)對(duì)此優(yōu)化了很多，本篇文章就是基于WePY2.x下實(shí)現(xiàn)動(dòng)畫(huà)效果的彈窗組件的，所以使用的時(shí)候一定要先注意版本。

二、代碼

動(dòng)畫(huà)彈窗組件

里面包含了Vue、原生小程序、基于WePY框架三種實(shí)現(xiàn)方案。具體為什么會(huì)有3種，且往下看。

三、實(shí)現(xiàn)歷程

1. Vue實(shí)現(xiàn)

因?yàn)閃ePY框架下的小程序是類Vue語(yǔ)法，所以自然而然想到用Vue的方式去解決問(wèn)題。

實(shí)現(xiàn)效果

 

 

實(shí)現(xiàn)原理

通過(guò)Vue的transition標(biāo)簽+CSS3動(dòng)畫(huà)屬性

實(shí)現(xiàn)代碼

Vue實(shí)現(xiàn)彈窗組件

本案例通過(guò)cdn引用而Vue，去測(cè)試實(shí)現(xiàn)動(dòng)畫(huà)彈窗。因?yàn)橹皇菍?shí)驗(yàn)，所以并沒(méi)有使用Vue腳手架

實(shí)現(xiàn)邏輯

水平有限，在自己的知識(shí)區(qū)內(nèi)進(jìn)行解釋。具體可以看代碼

通過(guò)transition組件去監(jiān)聽(tīng)其下DOM的插入與移除。transition的特性就是可以給任何元素和組件添加enter/leave的過(guò)渡。詳細(xì)點(diǎn)說(shuō)就是當(dāng)DOM通過(guò)v-if或v-show顯示或隱藏時(shí)，transition會(huì)在其顯示與隱藏的過(guò)渡階段動(dòng)態(tài)添加enter或者leave類。然后結(jié)合CSS3的transition屬性，去針對(duì)不同的過(guò)渡階段做動(dòng)畫(huà)樣式。這點(diǎn)其實(shí)和React的一個(gè)動(dòng)畫(huà)庫(kù)react-transition-group有異曲同工之妙，之前的一篇文章有玩過(guò)React轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，期間就使用了React這個(gè)庫(kù)。

結(jié)果

在Vue工程下，成功實(shí)現(xiàn)了彈窗組件。將其移植到WePY的小程序工程中，出現(xiàn)了問(wèn)題。WePY雖然是類Vue語(yǔ)法，但畢竟不是真正的Vue，所以不識(shí)別transition組件~Game Over

2. 原生小程序?qū)崿F(xiàn)

打開(kāi)小程序官方文檔，發(fā)現(xiàn)有相關(guān)實(shí)現(xiàn)動(dòng)畫(huà)的API

實(shí)現(xiàn)效果

 

 

實(shí)現(xiàn)原理

小程序官方API wx.createAnimation(Object object)

實(shí)現(xiàn)代碼

原生小程序?qū)崿F(xiàn)彈窗組件

實(shí)現(xiàn)邏輯

水平有限，在自己的知識(shí)區(qū)內(nèi)進(jìn)行解釋。具體可以看代碼

創(chuàng)建組件時(shí)，使用wx.createAnimation初始化一個(gè)動(dòng)畫(huà)實(shí)例。通過(guò)observes監(jiān)聽(tīng)組件的是否顯示屬性的變化。根據(jù)屬性的改變值調(diào)用動(dòng)畫(huà)實(shí)例的bottom（改變哪個(gè)CSS屬性就調(diào)用動(dòng)畫(huà)實(shí)例的哪個(gè)方法）函數(shù)，并傳入bottom改變的值。然后導(dǎo)出動(dòng)畫(huà)隊(duì)列并其綁定給動(dòng)畫(huà)載體（標(biāo)簽）的animation屬性。

結(jié)果

WePY工程不支持原生小程序語(yǔ)法，最明顯的就是原生小程序通過(guò)setData手動(dòng)去實(shí)現(xiàn)數(shù)據(jù)綁定，而WePY可以通過(guò)類Vue的v-bind進(jìn)行綁定。并且兩者組件之間本身就是有很多區(qū)別的。具體可以查看WePY文檔

3. WePY小程序?qū)崿F(xiàn)

雖然WePY不支持原生小程序的語(yǔ)法，但是其工程內(nèi)是可以調(diào)用原生小程序的官方API的

實(shí)現(xiàn)效果

 

 

實(shí)現(xiàn)原理

小程序官方API wx.createAnimation(Object object)

實(shí)現(xiàn)代碼

WePY小程序?qū)崿F(xiàn)彈窗組件

實(shí)現(xiàn)邏輯

水平有限，在自己的知識(shí)區(qū)內(nèi)進(jìn)行解釋。具體可以看代碼

通過(guò)類Vue語(yǔ)法v-bind去綁定動(dòng)畫(huà)載體的animation屬性，在watch下去監(jiān)聽(tīng)顯示與隱藏屬性的改變，然后動(dòng)態(tài)去導(dǎo)出wx.createAnimation創(chuàng)建的動(dòng)畫(huà)實(shí)例的動(dòng)畫(huà)隊(duì)列。此時(shí)不用進(jìn)行setData，因?yàn)関-bind已經(jīng)自動(dòng)將新的動(dòng)畫(huà)隊(duì)列綁定到動(dòng)畫(huà)載體上了。

結(jié)果

完美解決需求，最后的實(shí)現(xiàn)也確實(shí)很有意思，用的vue語(yǔ)法，去綁定原生小程序組件特有的animation屬性。所以印證了勇于嘗試，勇于探索是解決問(wèn)題的唯一之道

四、額外補(bǔ)充

在三種方式封裝組件的過(guò)程中，無(wú)論哪一種都是支持solt插槽組件。所以可以將彈窗內(nèi)容作為插槽，以便使用者針對(duì)業(yè)務(wù)需求擴(kuò)展出更加個(gè)性化的彈窗樣式。

五、感觸

前端雖雜，但還是很有趣的。加油吧?。?！