三，创建组件
1，组件html部分
dialog.wxml
<view class=‘dialog-container‘ hidden="{{!isShow}}"> <view class=‘dialog-mask‘></view> <view class=‘dialog-info‘> <view class=‘dialog-title‘>{{ title }}</view> <view class=‘dialog-content‘>{{ content }}</view> <view class=‘dialog-footer‘> <button class=‘dialog-btn‘ open-type="getUserInfo" bindgetuserinfo=‘bindGetUserInfo‘ catchtap=‘confirmEvent‘>{{ confirmText }}</button> </view> </view> </view>
在index页面引入dialog组件
<dialog id=‘dialog‘
title=‘登录提示‘
content=‘小程序需要您的授权才能提供更好的服务哦‘
confirmText=‘知道了‘
bind:confirmEvent=‘confirmEvent‘
bind:bindGetUserInfo=‘bindGetUserInfo‘> </dialog>
这里的title,content,confirmText是我自定义的属性名，这个是和组件所在的js中properties中的属性是对应的。
（在 properties 定义的属性中，属性名采用驼峰写法（例如：propArray）；在引入组件的 wxml 中，指定属性值时则对应使用连字符写法（例如：prop-array="..."））。
组件间的通信
bind:myconfirmEvent=‘confirmEvent‘
这里的 confirmEvent是自定义的组件需要触发的事件名，等号后面的 confirmEvent是引入组件的页面需要获取传过来的数据的自定义的事件名。
index.js获取组件传递过来的数据
confirmEvent: function () { this.dialog.hideDialog(); },
组件dialog.js
confirmEvent(){ this.triggerEvent("myconfirmEvent"); },
2，组件js部分
dialog.js
Component({ options: { multipleSlots: true //在组件定义时的选项中启用多slot支持 }, /*组件属性列表 */ properties:{ title:{ type:String, value:‘标题‘ //默认值 }, //弹窗内容 content:{ 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 }) }, /** tiggerEvent组件之间通信*/ confirmEvent(){ this.triggerEvent("confirmEvent"); }, bindGetUserInfo() { this.triggerEvent("bindGetUserInfo"); } } });
3,组件css部分
dialog.wxss
.dialog-mask{ position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); } .dialog-info{ position: fixed; z-index: 5000; width: 80%; max-width: 600rpx; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #FFFFFF; text-align: center; border-radius: 3px; overflow: hidden; } .dialog-title{ font-size: 36rpx; padding: 30rpx 30rpx 10rpx; } .dialog-content{ padding: 10rpx 30rpx 20rpx; min-height: 80rpx; font-size: 32rpx; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #999999; } .dialog-footer{ display: flex; align-items: center; position: relative; line-height: 90rpx; font-size: 34rpx; } .dialog-btn{ display: block; -webkit-flex: 1; flex: 1; position: relative; color: #3CC51F; }