微信小程序之自定義組件（附源碼）

最近在項目開發中，遇到好多雷同的頁面樣式，就想着能夠將經常使用的功能模塊封裝成組件，方便在項目中使用和修改，下面就參照微信小程序的文檔分步驟寫一個微信小程序的組件。

附上效果圖：

step1：建立文件並申明

與建立微信小程序的頁面同樣，一個自定義組件也須要json,wxml,wxss,js四個文件。

在項目根目錄中建立文件夾，取名爲：component，在該目錄下繼續建立文件夾successModal。

能夠在開發工具中右鍵建立，選擇component，默認自動會建立四個文件。如圖：

在successModal.json文件中進行自定義組件聲明，如：

在開發工具中右鍵新建選擇component，默認自動會建立。

{
  "component": true,
  "usingComponents": {}
}

step2:編寫組件模板代碼

<!-- 這是自定義組件的內部WXML結構 success.wxml-->
<view class='modal-section' wx:if="{{modalHidden}}">
  <view class='modal-opaci' bindtap='modal_click_Hidden'></view>
  <view class='modal-cont'>
    <icon type='{{modalIcon}}' size='70'></icon>
    <text class='modal-titleTxt {{modalIcon}}'>{{modalTitle}}</text>
    <text class='success-msg'>{{modalDesc}}</text>
  </view>
</view>

step3:編寫樣式文件

/* 這裏的樣式只應用於這個自定義組件 */
/*successModal.wxss*/
.modal-opaci {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.modal-cont {
  position: fixed;
  top: 30%;
  left: 8.5%;
  z-index: 999;
  border-radius: 20rpx;
  padding: 40rpx 150rpx;
  background-color: #fff;
  text-align: center;
}

.modal-cont text {
  line-height: 90rpx;
  display: block;
}

.success {
  color: #09bb07;
}

.modal-titleTxt {
  font-size: 50rpx;
  font-weight: 700;
}

.warn {
  color: #f76260;
}

step4:編寫業務邏輯

在自定義組件的 js 文件中，須要使用 Component() 來註冊組件，組件的屬性值和內部數據將被用於組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的。

//successModal.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    //這裏定義了modalHidden屬性，屬性值能夠在組件使用時指定.寫法爲modal-hidden  
    modalHidden: {
      type: Boolean,
      value: true
    },
    modalIcon: {
      type: String,
      value: ' ',
    },
    modalTitle: {
      type: String,
      value: ' ',
    },
    modalDesc: {
      type: String,
      value: ' ',
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    // 這裏是自定義方法
    modal_click_Hidden: function () {
      this.setData({
        modalHidden: false,
      })
    },
  }
})

step5:使用自定義組件

首先在須要使用的json文件中進行引用申明，而後須要提供每一個自定義組件的標籤名和對應的自定義組件文件路徑。

//index.json
{
  "usingComponents": {
    "modal-success": "../../component/successModal/successModal" //在這裏寫上頁面中自定義的標籤名和自定義組件的文件路徑
  },
  "navigationBarTitleText": "首頁"
}

其次，在頁面的wxml中使用自定義組件：在頁面的 wxml 中就能夠像使用基礎組件同樣使用自定義組件。節點名即自定義組件的標籤名，節點屬性即傳遞給組件的屬性值。

<!--index.wxml-->
<view class="container">
  <view class="demoBtn" bindtap="bindViewTap">
    <text>點擊</text>
  </view>

  <!-- 調用modal組件 -->
  <modal-success modal-hidden="{{is_modal_Hidden}}" modal-icon="{{is_modal_icon}}" modal-title="{{is_modal_title}}" modal-desc="{{is_modal_desc}}" />
</view>

以上就是小程序自定義組件的demo，歡迎start。

github地址：小程序自定義組件

注意點：

• 對於基礎庫的1.5.x版本， 1.5.7 也有部分自定義組件支持。
• 由於WXML節點標籤名只能是小寫字母、中劃線和下劃線的組合，因此自定義組件的標籤名也只能包含這些字符。
• 自定義組件也是能夠引用自定義組件的，引用方法相似於頁面引用自定義組件的方式（使用 usingComponents 字段）。
• 自定義組件和使用自定義組件的頁面所在項目根目錄名不能以「wx-」爲前綴，不然會報錯。
• 舊版本的基礎庫不支持自定義組件，此時，引用自定義組件的節點會變爲默認的空節點。