微信小程序自定义组件的使用步骤

1.在component文件夹下创建目录copyButton，右键新建Component自动生成文件

2.html

<!--component/copyButton.wxml-->
<view class="button-box">
   <!-- vant提示组件 -->
   <van-toast id="van-toast" />
  <!-- 使用catchtap阻止冒泡；data-copy传入的值就是组件接收的值-->
  <view class="copy-btn" catchtap="copywxtap" data-copy='{
  {copyValue}}'>复制</view>
</view>

3.css

/* component/copyButton.wxss */
/* 复制按钮 */
.copy-btn {
  width: 73rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  background: #FFECEC;
  border-radius: 16px;
  color: #FF4E4E;
  font-size: 24rpx;
  display: inline-block;
  margin-left: 24rpx;
}

4.js

// component/copyButton.js
import Toast from '../../wxcomponent/vant/dist/toast/toast';
Component({
  /**
   * 组件的属