基于WePY2.x框架下的小程序开发实现动画效果的弹窗组件
这个项目很适合新手入门WePY框架和小程序开发，包含组件封装，自定义导航，微信登录，网络请求、各种业务逻辑处理等。觉得有用的帮忙给个star~
标题实在是不知道该怎么再进行缩减了。首先说明下是小程序开发，其次是基于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实现效果
- 实现原理
通过Vue的transition标签+CSS3动画属性
- 实现代码
本案例通过cdn引用而Vue，去测试实现动画弹窗。因为只是实验，所以并没有使用Vue脚手架
- 实现逻辑
水平有限，在自己的知识区内进行解释。具体可以看代码
通过transition组件去监听其下DOM的插入与移除。transition的特性就是可以给任何元素和组件添加enter/leave的过渡。详细点说就是当DOM通过v-if或v-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的
-
实现效果
WePY实现效果
- 实现原理
小程序官方API wx.createAnimation(Object object)
- 实现代码
- 实现逻辑
水平有限，在自己的知识区内进行解释。具体可以看代码
通过类Vue语法v-bind去绑定动画载体的animation属性，在watch下去监听显示与隐藏属性的改变，然后动态去导出wx.createAnimation创建的动画实例的动画队列。此时不用进行setData，因为v-bind已经自动将新的动画队列绑定到动画载体上了。
- 结果
完美解决需求，最后的实现也确实很有意思，用的vue语法，去绑定原生小程序组件特有的animation属性。所以印证了勇于尝试，勇于探索是解决问题的唯一之道
四、额外补充
在三种方式封装组件中，无论哪一种都是支持solt插槽组件。所以可以将弹窗内容作为插槽，以便使用者针对业务需求扩展出更加个性化的弹窗样式。
五、感触
前端虽杂，但还是很有趣的。加油吧！！！
