本文主要是熟悉微信小程式自定義元件的開發，以一個常見的導航欄（Tabbar）需求為例。

官方文件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

首先我們先看一下最終實現的效果：

這是一個非常簡單的例子，就用這個例子敲開自定義元件的大門。如果你對vue的元件很熟的話，那麼你應該會輕鬆上手。

思路

改元件應該具備最基本的屬性和方法：

• 每個tab頁籤顯示的文字
• 頁籤被選中時的顏色
• 選中某個頁籤時，父元件應該知道這個被選中的頁籤資訊，從而做一些邏輯操作

這裡我還給頁籤切換時添加了slider的滑動動畫，為了更好的使用者體驗

編碼實現

元件 wxml

<view class='tabbar-container'>
  <view class='tabbar'>
  <!-- 頁籤 -->
    <block wx:for="{{tabItems}}" wx:key="ti+{{index}}">
      <view id="{{index}}"
            class='tabbar-item'
            style='{
 
{ activedIndex == index ? ("color: " + activedColor) : "" }}'      
            bindtap="clickTab">
        <view class="tabbar-title">{{item}}</view>
      </view>
    </block>
    <!-- 
    	slider 滑塊，會隨著選中的頁籤而滑動至對應的位置,
    	使用了CSS3的translateX屬性 
    	-->
    <view
 
 class='selected-slider'
          style="transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);background-color: {{activedColor}}">
    </view>
  </view>
</view>

元件js

Component({
  properties: {
    tabItems: Array,
    // 選中標籤頁的顏色(文字顏色+小滑塊顏色)
    activedColor: {
      type: String,
      value: '#d5001c'
    }
  },
  data: {
    activedIndex: 0,
    // slider的左偏移量，用這個來控制其移動的距離
    sliderOffset: 0
  },
  methods: {
    // 切換tab時呼叫的方法
    clickTab(e) {
      this.setData({
        activedIndex: e.currentTarget.id,
        sliderOffset: e.currentTarget.offsetLeft
      })
      // 觸發父元件的tab-change方法，並將當前選中的tab作為引數傳遞給父元件
      this.triggerEvent('tab-change', { activedTab: e.currentTarget.id })
    }
  }
})

元件的 wxss

.tabbar {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 28rpx;
  box-shadow: 0 6rpx 6rpx 0 #f0f0f0;
}

.tabbar-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  color: #b5b4ba;
}

.tabbar-title{
  display: inline-block;
}
.selected-slider {
  position: absolute;
  content: " ";
  left: 0;
  bottom: 0;
  width: 33.33%;
  height: 6rpx;
  /* 選中頁籤時滑動的移動動畫 */  
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

元件json

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

使用該元件

註冊元件

不要忘了在使用該元件的頁面或父元件的json檔案中註冊該元件：

"usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }

頁面/父元件 的wxml

<view class='tab'>
  <tabbar tab-items="{{tabOptions}}" actived-color="green" 
  		 bind:tab-change="onTabChange">
  </tabbar>
</view>
<view class='tab-content tab-{{currentTabIndex}}'>
  {{'當前Tab: ' + currentTabIndex}}
</view>

頁面/父元件 的js

Page({
  data: {
    tabOptions: ['全部', '我的好友', '特別關注'],
    currentTabIndex: 0
  },
  onTabChange(e){
    // 接受來自元件傳遞的引數
    const detail = e.detail
    this.setData({
      currentTabIndex: detail.activedTab
    })
  }
})

頁面/父元件 的wxss

.tab-content{
  margin-top: 10rpx;
  height: 200px;
  width: 100%;
  text-align: center;
  padding: 100px 0;
}
.tab-0{
  background-color: lightblue;
}
.tab-1{
  background-color: lightgreen;
}
.tab-2{
  background-color: lightpink;
}

github

demo原始碼：https://github.com/JerryYuanJ/mini-app-pratice
如果對你有幫助，歡迎star。或者你發現bug也歡迎issue。