微信小程序之公共组件写法

我们要实现如下图功能

小程序一个公共的弹出组件，首先我们创建一个pop文件

然后在生成的pop.json文件中将component定义为true

{
  "component": true
}

为pop.wxml添加内容

<!--pages/common/pop/pop.wxml-->
<view class='wx_dialog' hidden="{{!isShow}}">
  <view class='wx-mask'></view>
  <view class='wx-dialog-content'>
    <view class='wx-dialog-title'>{{ title }}</view>
    <view class='wx-dialog-contents'>{{ 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>

pop.wxss

/* pages/common/pop/pop.wxss */
.wx_dialog {
  position: fixed;
  left: ;
  right: ;
  top: ;
  bottom: ;
}
.wx-mask {
  position: absolute;
  left: ;
  right: ;
  top: ;
  bottom: ;
  background: rgba(, , , .);
  z-index: ;
}
.wx-dialog-content {
  position: absolute;
  background: #fff;
  left: %;
  top: %;
  transform: translate(-%, -%);
  width: %;
  /* height: 200px; */
  padding-bottom: 60px;
  z-index: ;
  border-radius: 5px;
}
.wx-dialog-contents {
  padding: 10px;
}
.wx-dialog-title {
  padding: 5px 10px;
  font-size: 14px;
}
.wx-dialog-footer {
  position: absolute;
  left: ;
  right: ;
  bottom: ;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eee;
}
.wx-dialog-btn {
  display: inline-block;
  width: %;
  cursor: pointer;
  text-align: center;
}
.wx-dialog-btn:first-child {
  border-right: 1px solid #eee;
}

pop.js

// pages/common/pop/pop.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");
    }
  }
})

在父级页面的.js文件中添加

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

父级页面的.json文件中添加

{
　　"usingComponents": {"pop": "../common/pop/pop"}
}

在父级页面的.wxml文件中添加

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

然后就大功告成了

如果想注册到全局，则需要在app.json页面添加挂载：

{
　　"usingComponents": {"pop": "../common/pop/pop"}
}