{"component": true,         // 自定义组件什么"usingComponents": {}      // 可选项，用于引用其他组件
}    

/* components/Dialog/dialog.wxss */.wx_dialog_container{z-index: 100;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 100%;position: fixed;bottom: 0;top: 0;left: 0;background:rgba(0, 0, 0, 0.4);
}.wx-dialog{width: 300px;height: auto;background: #fff;border-radius: 2px;
}.wx-dialog-title{display: flex;justify-content: center;align-items: center;padding: 30rpx 20px;
}.wx-dialog-content{display: flex;justify-content: center;align-items: center;font-size: 34rpx;color: #96959A;padding: 0 20px;margin-bottom: 20px;
}.wx-dialog-footer{display: flex;justify-content: space-around;border-top: 1rpx solid #EEEBEE;
}.wx-dialog-btn{flex: 1;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 32rpx;
}.wx-dialog-btn:last-child{border-left: 1rpx solid #EEEBEE;color: #71C46A;
}

<!--components/Dialog/dialog.wxml-->
<view class='wx_dialog_container' hidden="{{!isShow}}"><view class='wx-mask'></view><view class='wx-dialog'><view class='wx-dialog-title'>{{ title }}</view><view class='wx-dialog-content'>{{ content }}</view><view class='wx-dialog-footer'><view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view><view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view></view></view>
</view>

// components/Dialog/dialog.js
Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },/*** 组件的属性列表* 用于组件自定义设置*/properties: {    // 弹窗标题title: {            // 属性名type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个},    // 弹窗内容
    content: {type: String,value: '弹窗内容'},    // 弹窗取消按钮文字
    cancelText: {type: String,value: '取消'},    // 弹窗确认按钮文字
    confirmText: {type: String,value: '确定'}},  /*** 私有数据,组件的初始数据* 可用于模版渲染*/data: {    // 弹窗显示控制isShow: false},  /*** 组件的方法列表* 更新属性和数据的方法与更新页面数据的方法类似*/methods: {/** 公有方法*///隐藏弹框
    hideDialog() {this.setData({isShow: !this.data.isShow})},    //展示弹框
    showDialog() {this.setData({isShow: !this.data.isShow})},     /** 内部私有方法建议以下划线开头* triggerEvent 用于触发事件*/_cancelEvent() {      //触发取消回调this.triggerEvent("cancelEvent")},_confirmEvent() {      //触发成功回调this.triggerEvent("confirmEvent");}}
})

{"usingComponents": {"dialog": "/components/Dialog/dialog"}
}

<view class="container"><dialog id='dialog' title='我是标题' content='恭喜你，学会了小程序组件' cancelText='知道了' confirm='谢谢你'bind:cancelEvent="_cancelEvent"  bind:confirmEvent="_confirmEvent"></dialog><button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>

//index.js//获取应用实例
const app = getApp()Page({  /*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {    //获得dialog组件this.dialog = this.selectComponent("#dialog");},showDialog() {this.dialog.showDialog();},   //取消事件
  _cancelEvent() {console.log('你点击了取消');this.dialog.hideDialog();},  //确认事件
  _confirmEvent() {console.log('你点击了确定');this.dialog.hideDialog();}})