微信小程式之公共元件寫法

我們要實作如下圖功能

小程式一個公共的彈出元件，首先我們建立一個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"); 
    } 
  } 
})      

在父級頁面.wxss中引入pop.wxss

@import '../common/pop/pop';      

在父級頁面的.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>      

然後就大功告成了

　　

每一次的記錄，都是向前邁進的一步