這個(gè)項(xiàng)目很適合新手入門WePY框架和小程序開發(fā)，包含組件封裝，自定義導(dǎo)航，微信登錄，網(wǎng)絡(luò)請(qǐng)求、各種業(yè)務(wù)邏輯處理等。覺得有用的幫忙給個(gè)star~
標(biāo)題實(shí)在是不知道該怎么再進(jìn)行縮減了。首先說(shuō)明下是小程序開發(fā)，其次是基于WePY框架下。因?yàn)槠涫褂妙?strong>Vue語(yǔ)法進(jìn)行小程序開發(fā)，與原生小程序開發(fā)和基于Taro框架下使用類React語(yǔ)法的小程序開發(fā)在語(yǔ)法上還是有很大區(qū)別的，所以特別強(qiáng)調(diào)一下。
一、前言
隨著公司小程序需求的日益上升，在假期自學(xué)了原生小程序開發(fā)以及小程序云開發(fā)。但是公司小程序工程又是基于WePY框架下進(jìn)行開發(fā)的，其使用類Vue語(yǔ)法，方便那些習(xí)慣于用Vue框架進(jìn)行前端開發(fā)的同學(xué)。所以進(jìn)行WePY開發(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)畫效果的彈窗組件的，所以使用的時(shí)候一定要先注意版本。
二、代碼
里面包含了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)效果
Vue實(shí)現(xiàn)效果 - 實(shí)現(xiàn)原理
通過(guò)Vue的transition標(biāo)簽+CSS3動(dòng)畫屬性
- 實(shí)現(xiàn)代碼
本案例通過(guò)cdn引用而Vue，去測(cè)試實(shí)現(xiàn)動(dòng)畫彈窗。因?yàn)橹皇菍?shí)驗(yàn)，所以并沒(méi)有使用Vue腳手架
- 實(shí)現(xiàn)邏輯
水平有限，在自己的知識(shí)區(qū)內(nèi)進(jìn)行解釋。具體可以看代碼
通過(guò)transition組件去監(jiān)聽其下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)畫樣式。這點(diǎn)其實(shí)和React的一個(gè)動(dòng)畫庫(kù)react-transition-group有異曲同工之妙，之前的一篇文章有玩過(guò)React轉(zhuǎn)場(chǎng)動(dòng)畫，期間就使用了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)
打開小程序官方文檔，發(fā)現(xiàn)有相關(guān)實(shí)現(xiàn)動(dòng)畫的API
-
實(shí)現(xiàn)效果
原生小程序?qū)崿F(xiàn)效果 - 實(shí)現(xiàn)原理
小程序官方API wx.createAnimation(Object object)
- 實(shí)現(xiàn)代碼
- 實(shí)現(xiàn)邏輯
水平有限，在自己的知識(shí)區(qū)內(nèi)進(jìn)行解釋。具體可以看代碼
創(chuàng)建組件時(shí)，使用wx.createAnimation初始化一個(gè)動(dòng)畫實(shí)例。通過(guò)observes監(jiān)聽組件的是否顯示屬性的變化。根據(jù)屬性的改變值調(diào)用動(dòng)畫實(shí)例的bottom（改變哪個(gè)CSS屬性就調(diào)用動(dòng)畫實(shí)例的哪個(gè)方法）函數(shù)，并傳入bottom改變的值。然后導(dǎo)出動(dòng)畫隊(duì)列并其綁定給動(dòng)畫載體（標(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)效果
WePY實(shí)現(xiàn)效果 - 實(shí)現(xiàn)原理
小程序官方API wx.createAnimation(Object object)
- 實(shí)現(xiàn)代碼
- 實(shí)現(xiàn)邏輯
水平有限，在自己的知識(shí)區(qū)內(nèi)進(jìn)行解釋。具體可以看代碼
通過(guò)類Vue語(yǔ)法v-bind去綁定動(dòng)畫載體的animation屬性，在watch下去監(jiān)聽顯示與隱藏屬性的改變，然后動(dòng)態(tài)去導(dǎo)出wx.createAnimation創(chuàng)建的動(dòng)畫實(shí)例的動(dòng)畫隊(duì)列。此時(shí)不用進(jìn)行setData，因?yàn)?strong>v-bind已經(jīng)自動(dòng)將新的動(dòng)畫隊(duì)列綁定到動(dòng)畫載體上了。
- 結(jié)果
完美解決需求，最后的實(shí)現(xiàn)也確實(shí)很有意思，用的vue語(yǔ)法，去綁定原生小程序組件特有的animation屬性。所以印證了勇于嘗試，勇于探索是解決問(wèn)題的唯一之道
四、額外補(bǔ)充
在三種方式封裝組件中，無(wú)論哪一種都是支持solt插槽組件。所以可以將彈窗內(nèi)容作為插槽，以便使用者針對(duì)業(yè)務(wù)需求擴(kuò)展出更加個(gè)性化的彈窗樣式。
五、感觸
前端雖雜，但還是很有趣的。加油吧！??！
