我真的不知道如何缩短标题。首先是小程序开发，其次是基于WePY框架。因为它使用类似Vue的语法开发小程序，与原生小程序和基于Taro框架的小程序在语法上使用类似React的语法有很大不同，所以特别强调。

一、前言

随着公司小程序的需求越来越大，假期自己学习了原生小程序开发和小程序云开发。但是公司的小程序项目是基于WePY框架开发的，使用了类似Vue的语法，方便了那些习惯使用Vue框架进行前端开发的同学。因此，在WePY开发之前，我们应该先学习Vue。

但是类Vue毕竟是类Vue，和自己的Vue还是有很多区别的。在WePY1.x时代，你一眼就能看到原生小程序的影子。目前2.x时代已经对此进行了很多优化，本文基于WePY2.x的弹出组件，所以使用时一定要先关注版本。

二、代码

动画弹出组件

它包含三种实现方案：Vue、原生小程序和WePY框架。具体原因有三，且往下看。

三、实现历程

1. Vue实现

因为WePY框架下的小程序是一个类似Vue的语法，自然会想到用Vue来解决问题。

实现效果

实现原理

通过Vue的过渡标签CSS3动画属性

实现代码

Vue实现弹窗组装

这个案例被cdn和Vue引用，用来测试和实现动画弹出。因为只是实验，所以没有使用Vue支架。

实现逻辑

水平有限，在自己的知识领域解释一下。有关详细信息，请参见代码。

过渡组件用于监控其下DOM的插入和移除。过渡的特点是可以将进入/离开过渡添加到任何元素和组件中。具体来说，当通过v-if或v-show显示或隐藏DOM时，transition将在其显示和隐藏的过渡阶段动态添加进入或离开类。然后结合CSS3的过渡属性，针对不同的过渡阶段制作动画风格。事实上，这一点类似于“反应-过渡-组”，即“反应”的动画库。在之前的一篇文章中，我播放了react过渡动画，在此期间我使用了React库。

结果

在Vue项目下，成功实现了弹出窗口组件。移植到WePY的小程序项目，就有问题了。虽然WePY是一个类似Vue的语法，但它毕竟不是真正的Vue，所以它不识别过渡组件~Game Over。

2. 原生小程序实现

打开小程序的官方文档，找到动画的相关API。

实现效果

实现原理

小程序官方API WX。创建动画(对象对象)

实现代码

原生小程序实现弹出组件

实现逻辑

水平有限，在自己的知识领域解释一下。有关详细信息，请参见代码。

创建组件时，使用wx.createAnimation初始化动画实例。通过观察监控组件是否显示属性的变化。根据属性的变化值，调用动画实例的底层函数(CSS属性变化时调用动画实例的哪个方法)，传入底层的变化值。然后导出动画队列，并将其绑定到动画载体(标签)的动画。

结果

WePY工程不支持原生小程序语法，最明显的就是原生小程序通过setData手动去实现数据绑定，而WePY可以通过类Vue的v-bind进行绑定。并且两者组件之间本身就是有很多区别的。具体可以查看WePY文档

3. WePY小程序实现

虽然WePY不支持原生小程序的语法，但是其工程内是可以调用原生小程序的官方API的

实现效果

实现原理

小程序官方APIwx.createAnimation(Object object)

实现代码

WePY小程序实现弹窗组件

实现逻辑

水平有限，在自己的知识区内进行解释。具体可以看代码

通过类Vue语法v-bind去绑定动画载体的animation属性，在watch下去监听显示与隐藏属性的改变，然后动态去导出wx.createAnimation创建的动画实例的动画队列。此时不用进行setData，因为v-bind已经自动将新的动画队列绑定到动画载体上了。

结果

完美解决需求，最后的实现也确实很有意思，用的vue语法，去绑定原生小程序组件特有的animation属性。所以印证了勇于尝试，勇于探索是解决问题的唯一之道

四、额外补充

在三种方式封装组件的过程中，无论哪一种都是支持solt插槽组件。所以可以将弹窗内容作为插槽，以便使用者针对业务需求扩展出更加个性化的弹窗样式。

五、感触

前端虽杂，但还是很有趣的。加油吧！！！