小程序UI搭建＋波纹按钮特效

在小程序中实现UI组件的搭建以及波纹按钮的特效，可以使用微信小程序自定义组件功能。以下是一个简单的波纹按钮组件的实现：

首先，在小程序项目中的 components 目录下创建一个新的文件夹，命名为 wave-button，然后在该文件夹内创建两个文件：wave-button.json 和 wave-button.wxml。

wave-button.json 文件用于声明这是一个自定义组件：

{
  "component": true,
  "usingComponents": {}
}

wave-button.wxml 文件用于定义组件的模板，并实现波纹特效：

<view class="wave-button" bind:touchstart="onTouchStart" bind:touchend="onTouchEnd">
  {{text}}
</view>

接下来，在 wave-button 文件夹中创建 wave-button.js 文件来处理事件和动画：

// wave-button.js
Component({
  properties: {
    text: String
  },
  data: {
    isWave: false
  },
  methods: {
    onTouchStart(event) {
      this.setData({ isWave: true });
      this.startAnimation(event.touches[0].pageX, event.touches[0].pageY);
    },
    onTouchEnd() {
      this.setData({ isWave: false });
    },
    startAnimation(x, y) {
      this.animation = wx.createAnimation({
        duration: 1000,
        timingFunction: 'ease'
      });
      this.animation.opacity(0).scale(2).step();
      this.setData({
        animationData: this.animation.export()
      });
      setTimeout(() => {
        this.animation.opacity(1).scale(1).step();
        this.setData({
          animationData: this.animation.export(),
          isWave: false
        });
      }, 500);
    }
  }
});

最后，在需要使用波纹按钮的页面的 JSON 配置文件中引入自定义组件：

{
  "usingComponents": {
    "wave-button": "/components/wave-button/wave-button"
  }
}

在页面的 WXML 文件中使用自定义组件：

<wave-button text="点击我"></wave-button>

这样，你就创建了一个带有波纹特效的按钮，可以在小程序中复用。