[微信小程序]以自页面底部菜单为例自定义组件

基础

参考：
小程序开发文档-自定义组件
小程序开发文档-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 页面