微信小程序組件化開發：自定義一個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
    })
  }
})