小程序开发随笔：波浪背景组件

[IWH]

冬天了，注意保暖

最近很多应用中都有贝塞尔曲线的设计，就是波浪动效，就把这个动效移到了小程序上，定义了一个自定义组件。

效果如下：

是不是很有动态贝塞尔曲线的感觉。本来是应该用Js绘制canvas的，这里没有，用得是纯css动画,l加上两个SVG图，两个图片视差，感觉是滚动的波浪。图片是透明度不同的白色波浪图。下面看看具体怎么做的。

01

准备两个SVG图片，

冬天一定注意保暖，手都快冻得没知觉了

注意：小程序背景不支持直接使用本地图片，这里用的base64转码过得图片。

具体编码一会看下面的wxss

02

定义一个自定义组件

新建一个com文件夹，再建立一个wave页面

我们依次编写：wave.json,wave.js,wave.wxss,wave.wxml

03

编写wave.json

json用来配置这个页面是否是自定义组件，以及是否使用了其它自定义组件

这里一个json格式数据

参数一是设置此页面作为组件来使用，参数二是可选的，引用的组件，因为我们是定义自定义组件，所以第二可以为空。

4

编写wave.js

这里解释一下，和平时的页面不一样，这里不是Page方法，是COmponent方法，说一下注意的属性，data是传递给组件是数据，methods是组件的私有方法。这里定义了一个隐藏信息得方法，因为在编写wave布局的时候，默认显示个人信息。在具体引用的时候，可以灵活移除。

5

编写wave.wxml

我们先前看到的是没有那句欢迎和信息组件的。因为在实际引用的时候，调用私有方法，移除了。注意那个{}

07

编写wave.wxss