我真的不知道如何进一步缩小标题。 第一个解释是小程序的开发，第二个是基于WePY框架。 因为它使用类似Vue的语法进行小程序开发，所以原生小程序开发和基于Taro框架使用类语法的小程序开发在语法上还是有很大区别的，所以特别强调一下。

一、简介

随着公司对小程序的需求增加，我利用假期自学了原生小程序开发和小程序云开发。 不过公司的小程序项目是基于WePY框架开发的，使用了类似Vue的语法，方便那些习惯使用Vue框架进行前端开发的同学。 因此，在开发WePY之前，必须先学习Vue。

但Vue-like毕竟是Vue-like，和Vue本身还是有很多区别的。 在.x时代，一眼就能看到原生小程序的影子。 现在的2.x时代对此做了很多优化。 本文是基于.x下实现动画效果的弹窗组件，所以使用时一定要注意版本。

2. 代码

动画弹出组件

包含Vue、原生小程序、WePY框架三种实现方案。 具体为什么有3种，我们看下面。

三、实现流程 1、Vue实现

因为WePY框架下的小程序具有类似Vue的语法，所以很自然地想到使用Vue来解决问题。

达到效果

实现原理

通过Vue标签+CSS3动画属性

实现代码

Vue实现弹窗组件

本例中通过cdn引用Vue来测试动画弹窗。因为只是实验，所以没有使用Vue脚手架。

实施逻辑

水平有限，请在自己的知识范围内解释，具体请看代码

使用该组件来监听其下DOM的插入和移除。 特殊功能是您可以添加/过渡到任何元素和组件。 详细来说，当通过 v-if 或 v-show 显示或隐藏 DOM 时，在显示和隐藏的过渡阶段会动态添加一个或多个类。 然后结合CSS3的属性来创建不同过渡阶段的动画样式。 这其实和动画库类似——我在上一篇文章中玩过过渡动画，那段时间就用过这个库。

结果

在Vue项目下，成功实现了弹出组件。 当移植到WePY的小程序项目时，出现了问题。 虽然 WePY 具有类似 Vue 的语法，但它毕竟不是真正的 Vue，因此它不识别组件 ~ Game Over

2、原生小程序的实现

打开小程序官方文档，发现有一个与实现动画相关的API。

达到效果

实现原理

小程序官方.( )

实现代码

原生小程序实现弹出组件

实施逻辑

水平有限，请在自己的知识范围内进行讲解。具体请看代码

创建组件时，使用wx. 初始化动画实例。 通过监听组件显示属性的变化。 根据改变的属性值，调用动画实例的函数（改变CSS属性时调用动画实例的哪个方法），并传入改变的值。 然后导出动画队列并绑定到动画载体（标签）的属性上。

结果

WePY 项目不支持本机小程序语法。 最明显的就是原生小程序手动实现数据绑定，而WePY可以通过类似Vue的v-bind来绑定。 并且两个组件之间存在很多差异。详细信息请查看WePY文档

3、WePY小程序的实现

虽然WePY不支持原生小程序的语法，但在其项目中可以调用原生小程序的官方API。

达到效果

实现原理

小程序官方.( )

实现代码

WePY小程序实现弹窗组件

实施逻辑

水平有限，请在自己的知识范围内进行讲解。具体请看代码

使用类似Vue的语法v-bind绑定动画载体的属性，监听显示和隐藏属性的变化，然后动态导出wx创建的动画实例的动画队列。 此时不需要这样做，因为v-bind已经自动将新的动画队列绑定到动画载体上了。

结果

完美的解决了需求，最终的实现确实很有趣。 它使用Vue语法绑定原生小程序组件特有的属性。这证明勇于尝试和探索是解决问题的唯一途径。

4. 额外补充

在三种方式封装组件的过程中，无论哪一种都支持solt slot组件。 因此，可以将弹窗内容作为槽位，让用户可以根据业务需求拓展出更多个性化的弹窗样式。

5. 感受

前端很复杂，但仍然很有趣。 快点！ ！ ！