1.现在page文件里面定义一个dh的文件，然后在component定义一个可复用的组件为dislog
然后在dh的json文件中引入这个组件

	{"usingComponents": {"dialog":"../../component/dialog/index"}}

2.dh中.js文件

// pages/dh/index.js
Page({data: {status:false},handleTap(){this.setData({status:true})},handlecancel(){this.setData({status:false})},handleConfirm(){this.setData({status:false})}
})

.wxml文件中

<dialog title="警告" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm" content='啦啦啦我也不知道这什么哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈'><image src='//gw.alicdn.com/imgextra/i1/O1CN016q4k5T1IPNCZM2RTx_!!6000000000885-0-tps-640-260.jpg_Q75.jpg'></image></dialog>
<view bindtap='handleTap' class='show'>显示</view>

.wxss文件

/* pages/dh/index.wxss */
.show{/* width:100%;height:100vh; */width:200rpx;height:140rpx;background:#ccc;border-radius:20rpx;color:#fff;text-align:center;line-height:140rpx;font-size:40rpx;margin:0 auto;margin-top:470rpx;
}

在组件中dialog文件中
index.js文件

// component/dialog/index.js
Component({/*** 组件的属性列表*/properties: {title:{type:String,value:"标题"},content:String,status:{type:Boolean,value:false,}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleCancel(){this.triggerEvent("cancel")},handleConfirm(){// this.triggerEvent('confirm')this.triggerEvent('confirm')}}
})

wxml文件

<view class="mask" wx:if="{{status}}"><view class="dialog"><view class="dialog-header">{{title}}</view><view class="dialog-body"><view wx:if="{{content}}" class='content'>{{content}}</view><slot></slot></view><view class="dialog-footer"><view class="dialog-btn" bindtap='handleCancel'>取消</view><view class="dialog-btn" bindtap='handleConfirm'>确认</view></view></view>
</view>

wxss文件

.mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgb(0,0,0,0.3);display:flex;align-items: center;justify-content:center;
}
.dialog{width:600rpx;height:auto;background:#fff;border-radius:30rpx;
}
.dialog-header{padding:30rpx 0;text-align:center;font-size:36rpx;}
.dialog-footer{display:flex;
}
.dialog-btn{flex:1;text-align:center;padding:40rpx 0;border-top:1rpx solid #eee;
}
.dialog-btn:first-child{border-right:1rpx solid #eee;
}
.dialog-body{padding:30rpx;}
.content {text-indent: 72rpx;color:#333;
}
.dialog-body image{width:100%;}

这样就可以实现一个简单的点击出现弹窗的效果