微信小程序组件开发

三，创建组件

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 () {

console.log('组件触发了父组件里的confirmEvent');

this.dialog.hideDialog(); },

 

组件dialog.js

  confirmEvent(){
　　　　console.log('组件先执行');
      this.triggerEvent("myconfirmEvent");
    },

 

   点击按钮执行顺序是，

console.log('组件先执行');

console.log('组件触发了父组件里的confirmEvent');

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;
}