微信小程序组件化开发：自定义一个modal弹出窗（Dialog对话框）

自定义组件分为简单的三个步骤：创建组件 → 编写组件 → 使用组件

先给大家看一下效果图（可以设置只显示一个按钮）：

第一步、创建组件

1、新建my-modal文件夹，用来保存组件。在my-modal文件夹下分别创建以下4个文件：

index.json

index.wxml

index.js

index.wxss

2、在index.json里面添加 "component":true ，作用是声明这一组文件为自定义组件

第二步、编写组件代码 

index.wxml的代码：

<view class='mask' wx:if='{{show}}' bindtap='clickMask'>  
  <view class='modal-content' style='height:{{height}}'>
    <view wx:if='{{showtitle}}' class="title" style="cursor: move;">{{title}}</view>
    <scroll-view scroll-y class='main-content'>
      <slot></slot>
    </scroll-view>
    <view class='modal-btn-wrapper'>
      <view wx:if='{{single}}' class='my-class cancel-btn' style='color:rgba(7,17,27,0.6)' bindtap='cancel'>取消</view>
      <view class='my-class confirm-btn' bindtap='confirm'>{{confirmText}}</view>
    </view>
  </view>
</view>

index.js的代码：

Component({
  //添加自定义class
  externalClasses: ['my-class'],
  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示modal弹窗
    show: {
      type: Boolean,
      value: false
    },
    //modal的高度
    height: {
      type: String,
      value: '80%'
    },
    title: {
      type: String,
      value: '标题'
    },
    confirmText:{
      type: String,
      value: '确定'
    },
    //控制底部是一个按钮还是两个按钮，默认两个
    single: {
      type: Boolean,
      value: true
    },
    //是否显示标题
    showtitle: {
      type: Boolean,
      value: false
    },
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickMask() {
      // 点击modal背景关闭遮罩层，如果不需要注释掉即可
      this.setData({ show: false })
    },
    cancel() {
      this.setData({ show: false })
      this.triggerEvent('cancel')
    },
    // 点击确定按钮的回调函数
    confirm() {
      this.setData({ show: false })
      this.triggerEvent('confirm')
    }
  }
})

index.wxss的代码：

.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.63);
  z-index: 9999;
}
.modal-content {
  display: flex;
  flex-direction: column;
  width: 90%;
  background-color: #fff;
  border-radius: 10rpx;
}
.main-content {
  width: auto;
  height: 100%;
  padding: 10px;
  text-align: center;
  justify-content: center;
  overflow: hidden;
}
.title{
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-bottom: 1px solid #eee;
  font-size: 28rpx;
  color: #333;
  overflow: hidden;
  background-color: #F8F8F8;
}
.modal-btn-wrapper {
  display: flex;
  flex-direction: row;
  height: 100rpx;
  line-height: 100rpx;
  border-top: 1rpx solid rgba(7, 17, 27, 0.1);
}
.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1px solid #e8e8ea;
}
.cancel-btn {
  border-right: 1rpx solid rgba(7, 17, 27, 0.1);
}
.confirm-btn {
  color: #3cc51f;
}

第三步、使用组件

1、首先在需要使用组件的页面json文件中进行引用说明, 这里是设置自定义组件的标签名和引用路径

{
  "usingComponents": {
    "my-modal": "../../mydist/my-modal/index"
  }
}

2、然后在.wxml调用组件（使用刚才自定义的my-modal标签）

<!--调用my-modal组件-->
<my-modal my-class="my-btn" show="{{isShow}}" title="" confirmText="保存到相册" bindconfirm="modalConfirm" bindcancel="modalCandel" single="{{single}}" showtitle="{{showtitle}}" >
    <view>
      <image style="width:100%;" src="../../images/shareImg.png" mode='widthFix'></image>
    </view>
</my-modal>

 3、在.js绑定数据和定义回调方法函数

//获取应用实例
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    shareImg: "https://wx.myfaka.com/car/shareImg.png", //分享二维码图片
    isShow: false,
    showtitle: false,//是否显示标题
    single: false,   //false只显示“确定”按钮，true显示“确定”和“取消”按钮 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
  },
  shareToFriends: function(e) {
    this.setData({
      isShow: true
    })
  },
  /**
   * 点击取消
   */
  modalCandel: function () {
    this.setData({
      isShow: false
    })
  },
  /**
   *  点击确认
   */
  modalConfirm: function () {
    var that=this;
    wx.downloadFile({ // 调用wx.downloadFile接口将图片下载到小程序本地
      url: that.data.shareImg,
      success(res) {
        wx.saveImageToPhotosAlbum({ 
          filePath: res.tempFilePath,
          success(res) {
            wx.hideLoading()
            wx.showModal({ // 保存成功后记得提醒用户二维码已经存到他的手机相册了哦
              title: '二维码已保存到系统相册',
              content: '分享给朋友，可免费获得洗车券',
              success: function (res) {
                if (res.confirm) {
                  //console.log('点击确定')
                } else if (res.cancel) {
                  //console.log('点击取消')
                }
              }
            })
          },
          fail(res) {
            wx.hideLoading()
            console.log('分享失败')
          }
        })
      },
      fail: function (res) {
        wx.hideLoading()
        console.log('分享失败')
      }
    })
    this.setData({
      isShow: false
    })
  }
})