微信小程序自定义波浪组件

最近看到好多app上有波浪背景，有动态的，有静态的，这里是在小程序中用得动态。

先看看效果图：里面的文本是组件内部定义的。

这是用两个svg的图片用css关键帧动画做的效果（这里谢谢子弹短信里前端群的小伙伴提供的web版的css动画文件）

在小程序中使用，注意一个问题：就是svg不可以直接使用，需要转为base64（这个大家应该有收藏吧），这里我已经转换好了，在下面的wxss中。

这里顺便用一下自定义组件：

首先定义组件 wave

 wave.wxml：这里我默认是用得显示个人信息。其中isShowInfo来控制是否显示

<!--utils/wave/waves.wxml-->
<view class="zr">
    <view class='user_box' hidden="{
  {isShowInfo}}">
        <view class='userInfo'>
            <open-data type="userAvatarUrl"></open-data>
        </view>
    <view class='userInfo_name'>
        <open-data type="userNickName"></open-data>,欢迎您
    </view>
</view>
    <view class="water">
        <view class="water-c">
            <view class="water-1"> </view>
            <view class="water-2"> </view>
        </view>
    </view>
</view>

wave.js：这里组件定义一个私有方法 __hideInfo(),用来隐藏内部组件࿰