用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

基于WePY2.x框架下的小程序開發實現動畫效果的彈窗組件

Rolan 2020-3-17 00:51

標題實在是不知道該怎么再進行縮減了。首先說明下是小程序開發,其次是基于WePY框架下。因為其使用類Vue語法進行小程序開發,與原生小程序開發和基于Taro框架下使用類React語法的小程序開發在語法上還是有很大區別的 ...

標題實在是不知道該怎么再進行縮減了。首先說明下是小程序開發,其次是基于WePY框架下。因為其使用類Vue語法進行小程序開發,與原生小程序開發和基于Taro框架下使用類React語法的小程序開發在語法上還是有很大區別的,所以特別強調一下。

一、前言

隨著公司小程序需求的日益上升,在假期自學了原生小程序開發以及小程序云開發。但是公司小程序工程又是基于WePY框架下進行開發的,其使用類Vue語法,方便那些習慣于用Vue框架進行前端開發的同學。所以進行WePY開發之前,還要先去學習Vue

但是類Vue畢竟是類Vue,與本身的Vue還是有諸多不同的。在WePY1.x的時代,一眼就能看到原生小程序的影子。目前的2.x時代已經對此優化了很多,本篇文章就是基于WePY2.x下實現動畫效果的彈窗組件的,所以使用的時候一定要先注意版本。

二、代碼

動畫彈窗組件

里面包含了Vue原生小程序基于WePY框架三種實現方案。具體為什么會有3種,且往下看。

三、實現歷程

1. Vue實現

因為WePY框架下的小程序是類Vue語法,所以自然而然想到用Vue的方式去解決問題。

實現效果

實現原理

通過Vue的transition標簽+CSS3動畫屬性

實現代碼

Vue實現彈窗組件

本案例通過cdn引用而Vue,去測試實現動畫彈窗。因為只是實驗,所以并沒有使用Vue腳手架

實現邏輯

水平有限,在自己的知識區內進行解釋。具體可以看代碼

通過transition組件去監聽其下DOM的插入與移除。transition的特性就是可以給任何元素和組件添加enter/leave的過渡。詳細點說就是當DOM通過v-ifv-show顯示或隱藏時,transition會在其顯示與隱藏的過渡階段動態添加enter或者leave類。然后結合CSS3的transition屬性,去針對不同的過渡階段做動畫樣式。這點其實和React的一個動畫庫react-transition-group有異曲同工之妙,之前的一篇文章有玩過React轉場動畫,期間就使用了React這個庫。

結果

在Vue工程下,成功實現了彈窗組件。將其移植到WePY的小程序工程中,出現了問題。WePY雖然是類Vue語法,但畢竟不是真正的Vue,所以不識別transition組件~Game Over

2. 原生小程序實現

打開小程序官方文檔,發現有相關實現動畫的API

實現效果

實現原理

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

實現代碼

原生小程序實現彈窗組件

實現邏輯

水平有限,在自己的知識區內進行解釋。具體可以看代碼

創建組件時,使用wx.createAnimation初始化一個動畫實例。通過observes監聽組件的是否顯示屬性的變化。根據屬性的改變值調用動畫實例的bottom(改變哪個CSS屬性就調用動畫實例的哪個方法)函數,并傳入bottom改變的值。然后導出動畫隊列并其綁定給動畫載體(標簽)的animation屬性。

結果

WePY工程不支持原生小程序語法,最明顯的就是原生小程序通過setData手動去實現數據綁定,而WePY可以通過類Vue的v-bind進行綁定。并且兩者組件之間本身就是有很多區別的。具體可以查看WePY文檔

3. WePY小程序實現

雖然WePY不支持原生小程序的語法,但是其工程內是可以調用原生小程序的官方API的

實現效果

實現原理

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

實現代碼

WePY小程序實現彈窗組件

實現邏輯

水平有限,在自己的知識區內進行解釋。具體可以看代碼

通過類Vue語法v-bind去綁定動畫載體的animation屬性,在watch下去監聽顯示與隱藏屬性的改變,然后動態去導出wx.createAnimation創建的動畫實例的動畫隊列。此時不用進行setData,因為v-bind已經自動將新的動畫隊列綁定到動畫載體上了。

結果

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

四、額外補充

在三種方式封裝組件的過程中,無論哪一種都是支持solt插槽組件。所以可以將彈窗內容作為插槽,以便使用者針對業務需求擴展出更加個性化的彈窗樣式。

五、感觸

前端雖雜,但還是很有趣的。加油吧!!!

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: CoderXLL 來自: 掘金
河北20选5大星走势图 江西多乐彩有遗漏 股红在线 杨方配资开户 股票涨跌幅和收益 广西快三遗漏 福彩群英会技巧大全 大乐透玩法介绍 山东11选5走势图 芮勇美欣达 世界主要的股票指数 安徽快三在线计划网站 重庆幸运农场快乐十分 时时彩平台哪个信誉 新疆11选5推荐号码推荐 场外配资表现形式 上海快3最新开奖走势图 时时彩软件公式修改