[微信小程序]以自頁面底部菜單爲例自定義組件

基礎

參考：
小程序開發文檔-自定義組件
小程序開發文檔-Component 構造器
在不考慮第三方自定義插件的基礎上完成此開發

思考

1. 組件其實可以理解爲抽取的一個公共模塊，它取之於頁面，又用之於頁面，我們首先將需要組件在一個頁面中完整實現（html，css，js）
2. 頁面某一塊兒被抽取公共模塊需要考慮數據的傳導。
3. 在頁面中完成樣式調整的時候部分樣式是否對當前頁面有依賴，作爲組件是否能適應較複雜的環境（可以通過定義不常用的class，防止覆蓋）
4. 在頁面中使用的function是否在組件中同樣通用。
5. 小程序中用於標識是否爲組件的方法是在其同級頁面下json文件中配置

{
  "component": true
}

6. 引用路徑問題（組件可能被引入任意頁面中，使用絕對路徑比相對路徑要更爲穩妥）

動手

自定義頁面結構

<view class="tabBar">
 <block wx:for="{{barlist}}" wx:key="id">
   <view style="width:{{100/barlist.length}}%" bindtap="forwardBar" data-url="{{item.pagePath}}" data-barflag="{{item.barflag}}">
     <image src="{{item.iconPath}}"></image>
     <text style="color:{{item.selectedColor}}">{{item.text}}</text>
   </view>
 </block>
</view>

說明：
wx:for="{{barlist}}" 爲傳入數據，數組類型。
class=“tabBar” 整體組件樣式通過此class控制
bindtap=“forwardBar” 自定義事件

渲染頁面樣式

.tabBar{
background-color: #FFF;
position: fixed;
bottom: 0;
width: 100%;
font-size: 10px;
font-weight: 400;
text-align: center;
padding-top: 5px;
border-top: 1px solid #E4E4E4;
}

.tabBar view{
display: inline-block;
}
.tabBar view image {
height: 25px;
width: 25px;
display: block;
margin: 0 auto;
}
.tabBar view text {
display: block;
}

綁定事件

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    "barlist": [
        {
          "pagePath": "/pages/todolist/todolistedit",
          "text": "工作臺",
          "iconPath": "/images/indexselected.png",
          "selectedColor": "#2679f4"
        },
        {
          "pagePath": "/pages/notify/notify",
          "barflag":true,
          "text": "代辦通知",
          "iconPath": "/images/notify.png"
        },
        {
          "pagePath": "/pages/report/report",
          "iconPath": "/images/report.png",
          "barflag":true,
          "text": "數據中心"
        },
        {
          "pagePath": "/pages/usercenter/usercenter",
          "barflag":true,
          "iconPath": "/images/usercenter.png",
          "text": "個人中心"
        }
      ]
  },
forwardBar: function(event){
      const url = event.currentTarget.dataset.url;
      const barflag = event.currentTarget.dataset.barflag;
      if(url){
        if(barflag){
          wx.switchTab({
            'url': url
          })
        }else{
          wx.navigateTo({
            'url': url
          })
        }
       
      }else{
        wx.showToast({
          title: '未配置目標地址',
        })
      }
      
    }
})

說明：注意替換data中的圖片地址
將以上內容對應到新頁面中即可在頁面中渲染出如下效果：

轉爲組件

創建組件所需的目錄及頁面

複製組件內容

分別將前三步裏的wxml、js、wxss 複製到對應格式的文件中去

聲明組件

將【思考5】json複製到組件的json文件中去

js轉換

頁面的js使用的page構造器，組件使用Component 構造器
需要注意的是，組件構造器中data部分是組件的內部數據，如果需要接收外部數據需要在properties 中指定，同時自定義事件也略有不同。
完整js文件內容

Component({
  properties: {
    barlist: {
      type: []
    }
  },
  data: {
  },
  methods: {
    // 這裏是一個自定義方法
    forwardBar: function(event){
      const url = event.currentTarget.dataset.url;
      const barflag = event.currentTarget.dataset.barflag;
      if(url){
        if(barflag){
          wx.switchTab({
            'url': url
          })
        }else{
          wx.navigateTo({
            'url': url
          })
        }
       
      }else{
        wx.showToast({
          title: '未配置目標地址',
        })
      }
    }
  }
})

wxml部分不需要修改

使用

引入組件

使用組件在頁面的json文件中引入即可，如果想全局通用，在app.json中引入即可

{
 "usingComponents": {
    "mytabbar": "/components/mytabbar/mytabbar"
  }
}

注意mytabbar：即爲標籤的名字，後面爲組件的絕對地址

使用組件

在需要引入頁面引入上一步聲明的標籤即可

<mytabbar barlist="{{barlist}}"></mytabbar>

barlist：爲傳入數據，{{barlist}}從當前page的data裏取值。

自此就完成了組件的自定義

需要注意的是：

1. 自定的組件雖然跟tab頁面很像，但不是tab頁面，頁面件切換如果想達到首頁的效果，需要在個跳轉的各頁面引入組件並設置當前頁自定義組件的數據。
2. 組件有自己的事件定義方式，可以不通過bingtap的方式（參考官方文檔）
3. 組件更多用法參考官方文檔

附：wx.switchTab與wx.navigateTo的區別
wx.navigateTo不能跳到 tabbar 頁面
wx.switchTab跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面