微信小程序之公共組件寫法

我們要實現如下圖功能

小程序一個公共的彈出組件，首先我們創建一個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: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.wx-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 99;
}
.wx-dialog-content {
  position: absolute;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  /* height: 200px; */
  padding-bottom: 60px;
  z-index: 100;
  border-radius: 5px;
}
.wx-dialog-contents {
  padding: 10px;
}
.wx-dialog-title {
  padding: 5px 10px;
  font-size: 14px;
}
.wx-dialog-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eee;
}
.wx-dialog-btn {
  display: inline-block;
  width: 49%;
  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"}
}