用户
 找回密码
 立即注册

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 来自: 掘金