小程序开发实战指南之封装自定义弹窗组件

下面是关于“小程序开发实战指南之封装自定义弹窗组件”的完整攻略及两条示例说明：

一、封装自定义弹窗组件的目的

在微信小程序开发中，经常需要使用弹窗组件来提醒用户一些信息或让用户进行选择等操作。为了提高代码复用性，并且让开发更加方便快捷，我们需要将弹窗组件进行封装，使其可以更加方便地被其他页面调用使用。

二、封装弹窗组件的步骤

以下是封装自定义弹窗组件的步骤：

1. 创建组件目录

首先，在小程序项目中新建一个目录，用于存放自定义组件。在该目录下创建一个空文件夹用于存放弹窗组件的相关文件。

2. 创建组件wxml、wxss和js文件

在上述文件夹内创建组件的wxml、wxss和js文件，并输入以下代码：

wxml文件

<view class="mask" catchtouchmove="{{true}}" wx:if="{{show}}">
  <view class="mask-content">
    <view class="mask-title">{{title}}</view>
    <view class="mask-body">{{content}}</view>
    <button class="mask-close-btn" bindtap="closeMask">关闭</button>
  </view>
</view>

wxss文件

.mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  display:none;
  z-index: 999;
}
.mask-content{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 90%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding:20rpx;
  border-radius: 10rpx;
}
.mask-title{
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom:30rpx;
  text-align:center;
}
.mask-body{
  font-size: 28rpx;
  color: #333;
  line-height: 40rpx;
  text-align:center;
  margin-bottom:30rpx;
}
.mask-close-btn{
  display:block;
  width:100%;
  height:80rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #333;
  border-radius:8rpx;
  line-height:80rpx;
  text-align: center;
  margin-bottom:20rpx;
}

js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:'提示'
    },
    content:{
      type:String,
      value:''
    },
    show:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    closeMask(){
      this.setData({
        show:false
      })
    }
  }
})

3. 在页面中使用自定义组件

在需要使用弹窗组件的页面json文件中，引入上述组件文件：

{
  "usingComponents": {
    "mask-dialog": "/components/mask-dialog/mask-dialog"
  }
}

在该页面wxml文件中，使用自定义组件：

<mask-dialog title="提示" content="这是一个自定义弹窗组件" show="{{showDialog}}"></mask-dialog>

4. 在页面js文件中控制弹窗组件的显示和隐藏

在该页面js文件中，定义showDialog变量，并控制弹窗组件的显示和隐藏：

Page({
  data: {
    showDialog: false
  },
  showMask(){
    this.setData({
      showDialog: true
    })
  }
})

三、示例说明

示例1：封装一个confirm组件

在上述自定义弹窗组件的基础上，我们可以进一步封装一个confirm组件用于确认操作。以下是confirm组件的相关代码：

wxml文件

<view class="mask" catchtouchmove="{{true}}" wx:if="{{show}}">
  <view class="mask-content">
    <view class="mask-title">{{title}}</view>
    <view class="mask-body">{{content}}</view>
    <view class="mask-btn-group">
      <button class="mask-btn mask-confirm-btn" bindtap="onConfirm">确认</button>
      <button class="mask-btn mask-cancel-btn" bindtap="onCancel">取消</button>
    </view>
  </view>
</view>

wxss文件

.mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  display:none;
  z-index: 999;
}
.mask-content{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 90%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding:20rpx;
  border-radius: 10rpx;
}
.mask-title{
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom:30rpx;
  text-align:center;
}
.mask-body{
  font-size: 28rpx;
  color: #333;
  line-height: 40rpx;
  text-align:center;
  margin-bottom:30rpx;
}
.mask-btn-group{
  display:flex;
  justify-content: center;
}
.mask-btn{
  font-size: 32rpx;
  color: #fff;
  border:none;
  border-radius:8rpx;
  line-height:80rpx;
  text-align: center;
  width:200rpx;
  height:80rpx;
  margin-left:20rpx;
  margin-right:20rpx;
}
.mask-confirm-btn{
  background-color:#108ee9;
}
.mask-cancel-btn{
  background-color:#d81e06;
}

js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:'提示'
    },
    content:{
      type:String,
      value:''
    },
    show:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    onConfirm(){
      this.triggerEvent('confirm')
      this.setData({
        show:false
      })
    },
    onCancel(){
      this.triggerEvent('cancel')
      this.setData({
        show:false
      })
    }
  }
})

在需要使用confirm组件的页面wxml文件中，使用自定义组件并绑定confirm和cancel事件：

<mask-dialog title="提示" content="是否确认操作?" show="{{showDialog}}" bind:confirm="onDialogConfirm" bind:cancel="onDialogCancel"></mask-dialog>

在该页面js文件中，定义showDialog变量，并控制confirm组件的显示和隐藏，并处理confirm和cancel事件：

Page({
  data: {
    showDialog: false
  },
  showConfirm(){
    this.setData({
      showDialog: true
    })
  },
  onDialogConfirm(){
    //确认操作
  },
  onDialogCancel(){
    //取消操作
  }
})

示例2：封装一个toast组件

在上述自定义弹窗组件的基础上，我们还可以通过封装toast组件来实现错误提示或操作成功提示等功能。以下是toast组件的相关代码：

wxml文件

<view class="toast" wx:if="{{content && show}}">
  <view class="toast-content">{{content}}</view>
</view>

wxss文件

.toast{
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(0,0,0,0.7);
  padding: 20rpx;
  border-radius: 10rpx;
  color: #fff;
  display:none;
}

js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    content:{
      type:String,
      value:''
    },
    show:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    closeToast(){
      this.setData({
        show:false
      })
    }
  }
})

在需要使用toast组件的页面wxml文件中，使用自定义组件并绑定showToast变量：

<toast content="操作成功" show="{{showToast}}"></toast>

在该页面js文件中，定义showToast变量，并控制toast组件的显示和隐藏：

Page({
  data: {
    showToast: false
  },
  showToast(){
    this.setData({
      showToast: true
    })
    setTimeout(()=>{
      this.setData({
        showToast: false
      })
    },2000)
  }
})

当showToast变量值为true时，toast组件就会显示出来。通过setTimeout函数并设定时间为2000毫秒，可以控制toast组件的自动隐藏。