因為微信小程式的授權現在需要使用者點選按鈕才能呼叫授權介面，而小程式自帶的彈框的確認按鈕不能繫結bindtap或使用open-type屬性，所以打算自己寫一個自定義彈窗供大家方便使用...

成品：

wxml

<cover-view class='mask' wx:if='{{!hide}}'>
	<cover-view class='modal'>
		<cover-view class='title' wx:if='{{title}}'>{{title}}</cover-view>
		<cover-view class='content'>{{content}}</cover-view>
		<cover-view class='btns'>
			<button class='cancel' bindtap='Cancel' wx:if='{{showCancel}}'>取消</button>
			<button class='success' bindtap='Success' open-type='{{open_type}}'>{{confirmText}}</button>
		</cover-view>
	</cover-view>
</cover-view>
 

使用cover-view是為了讓彈框能蓋住小程式的原生元件，小程式的原生元件的層級問題是挺噁心的

wxss

.mask {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

.modal {
  width: 580rpx;
  background-color: #fff;
  border-radius: 8rpx;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
}

.title {
  font-size: 32rpx;
  color: #0e0e0e;
  text-align: center;
  line-height: 105rpx;
  margin: 0 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e6e6e6;
  font-weight: 700;
}

.content {
  color: #878787;
  font-size: 28rpx;
  line-height: 47rpx;
  white-space: pre-wrap;
  padding: 30rpx 86rpx 40rpx;
  text-align: center;
  letter-spacing: 1rpx;
}

.btns {
  height: 100rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6f6f6;
  font-size: 32rpx;
  border-top: 1rpx solid #e6e6e6;
}

.cancel {
  line-height: 100rpx;
  flex-grow: 1;
  border-right: 1rpx solid #e6e6e6;
}

.success {
  line-height: 100rpx;
  flex-grow: 1;
  color: #52ce38;
}
 

js

Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    // 彈框標題
    title: {
      type: String,
      value: ''
    },
    // 彈框內容
    content: {
      type: String,
      value: ''
    },
    // 是否顯示取消按鈕
    showCancel: {
      type: Boolean,
      value: true
    },
    // 確認按鈕文字
    confirmText: {
      type: String,
      value: '同意'
    },
    // 確認按鈕的open-type
    open_type: {
      type: String,
      value: ''
    },
    // bindSuccess 可繫結確認按鈕點選事件
    // bindCancel 可繫結取消按鈕點選事件
  },

  /**
   * 元件的初始資料
   */
  data: {

  },
  /**
   * 元件的方法列表
   */
  methods: {
    close: function() {
      this.setData({
        hide: true
      });
    },
    Success: function() {
      var myEventDetail = {} // detail物件，提供給事件監聽函式
      var myEventOption = {} // 觸發事件的選項
      this.triggerEvent('Success', myEventDetail, myEventOption)
      this.close();
    },
    Cancel: function() {
      var myEventDetail = {} // detail物件，提供給事件監聽函式
      var myEventOption = {} // 觸發事件的選項
      this.triggerEvent('Cancel', myEventDetail, myEventOption)
      this.close();
    },
  }
})
 

我在頁面使用元件

<iModal title='登入並授權' content='申請獲取以下許可權獲得你的公開資訊（暱稱、頭像）' bindSuccess='onSuccess'></iModal>

其中使用者點了確認按鈕後，頁面的onSuccess方法會被觸發的

 （使用元件的頁面的js程式碼）

這就是我寫的自定義彈框，大家有什麼更好的方式方法可以溝通交流