微信小程序自定义组件实现 tabBar、navBar

久不写文，手有些生，见谅。

最近App项目要将其中一个模块抽出来作成小程序， 功能包含 ：底部的Tab栏，顶部的标题栏

这里选择自定义的缘由有两点：

• narBar 微信原生不支持设置返回图标，且在 Android 上标题是居左显示，在 iOS 上是居中显示。
• 底部的 tabBar 不支持点击跳页面，图标布局不支持超过 tabBar 的高度。

下面两张图是简单实现的效果。

实现分析 源码地址

实现分析

以上效果我也是参考的网上例子来实现，可看该效果原做的分析。或者看看下面个人理解。

微信小程序自定义组件

官方文档地址 developers.weixin.qq.com/miniprogram…

文档中说明了自定义组件

• 能够将页面内的功能模块抽象成自定义组件，以便在不一样的页面中重复使用。
• 也能够将复杂的页面拆分红多个低耦合的模块，有助于代码维护。

建立自定义组件

在最新的开发工具中已经支持直接建立组件了，建立一个 components目录，而后在建立一个组件对于的目录，例如这里建立的是tabbar目录，而后在该目录点击鼠标右键选择新建Component，输入组件名称便可，例如这里输入的是tabbar。

组件模板和样式

官方文档 developers.weixin.qq.com/miniprogram…

相似于页面，自定义组件拥有本身的wxml 模板和 wxss 样式

在组件模板中能够提供一个<slot>节点，用于承载组件引用时提供的子节点。这个<slot>节点至关于组件占位符。

默认状况wxml中只支持一个<solt>节点，能够设置支持多个<solt>节点：

布局编写好以后就开始设置样式了，在页面中能够经过wxss来定义，也能够经过设置组件的class名称，而后再调用该组件的 wxss中定义样式。

组件的wxss默认是不支持app.wxss样式的，可是能够像设置多<slot>同样，进行设置：

模板数据绑定

经过调用 Component构造器时能够指定组件的属性、数据、方法等。developers.weixin.qq.com/miniprogram…

Component({
  // 详细使用看文档
  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），若是未指定则会根据类型选择一个
      observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也能够写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        // 一般 newVal 就是新设置的数据， oldVal 是旧数据
      }
    },
    myProperty2: String // 简化的定义方式
  },
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，能够为函数，或一个在methods段中定义的方法名
    attached() { },
    moved() { },
    detached() { },
  },

  // 生命周期函数，能够为函数，或一个在methods段中定义的方法名
  attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() { },
    hide() { },
    resize() { },
  },

  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法相似
      })
    },
    // 内部方法建议如下划线开头
    _myPrivateMethod() {
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange(newVal, oldVal) {

    }
  }

})
复制代码

在上面的代码中咱们能够经过properties和setData结合实现动态设置数据，在methods中能够定义方法，用于给外部调用，也就是组件间的通讯。

组件间通讯

能够经过triggerEvent或者直接获取组件this.selectComponent示例来调用方法和属性。

• triggerEvent
• 父组件还能够经过 this.selectComponent 方法获取子组件实例对象，这样就能够直接访问组件的任意数据和方法。

开始使用组件

在页面的json文件中配置组件的路径，以下：

{
  "usingComponents": {
    "navbar": "/components/navbar/index",
    "tabbar": "/components/tabbar/tabbar"
  }
}
复制代码

在页面的wxml布局中添加，以下：

// 引入组件
<navbar navbar-data='{{nvabarData}}'></navbar>
// 内容
<view class="home-page">
  <view style='margin-top: {{height}}px;margin-bottom:10px;'></view>
</view>
// 引入组件
<tabbar tabbar="{{tabbar}}"></tabbar>
复制代码

自定义 tabBar 组件分析

看文章顶部原做者的分析。下面介绍一些坑。

• 虽然在组件的js文件中已经设置了tabbar 可是在app.json中仍是须要配置tabbar，详细配置可看文章顶部github连接。

• 在页面的onload中还须要再设置一次

wx.hideTabBar({
    })
复制代码

由于从分享页面点击左上角的首页图标回到首页会出现两个tabbar，因此在首页还须要再隐藏一次tabbar.

• 注意路径问题，新版的开发工具components文件应该在miniprogram下，和pages为同级，不然在引入组件的路径中可能会出错。

自定义 navBar 组件分析

小程序中分享出去的页面是没有返回按钮的，为了用户可以再次回到咱们的小程序中，咱们在 navbar 上自定义了一个返回按钮和返回首页的按钮。

这里经过小程序的场景值和使用一个全局的变量share来判断是不是从分享页面进来。在 app.js中作了处理：

// 判断是否由分享进入小程序
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };
复制代码

为了适配顶部的高度，在wxml布局中还动态设置了一个margin-top的高度，这个高度经过获取系统的状态栏高度获得。

getSystemInfo: function () {
    let t = this;
    wx.getSystemInfo({
      success: function (res) {
        // 获取高度
        t.globalData.height = res.statusBarHeight;
      }
    });
  },
复制代码

而后在页面的data中设置组件的数据和状态栏的高度：

data: {
    // 组件所需的参数
    nvabarData: {
      showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
      title: '让故事发生', //导航栏 中间的标题
    },
    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20,
    // tabbar
    tabbar: {},
  },
复制代码

原做者在实现图标的显示和隐藏部分逻辑和个人预期不一致，我想实现的是从分享页面进入才显示左上角的返回首页图标，正常也就只显示返回按钮。修改点后的wxml以下：

<view bindtap='_navback' wx:if='{{!share}}'>
        <image src='/images/back.png' mode='aspectFill' class='back-pre'></image>
      </view>
// 这里把 share 取反去掉
      <view class='navbar-v-line' wx:if='{{share}}'></view>
// 这里把  share 取反去掉
      <view bindtap='_backhome'  wx:if='{{share}}'>
        <image src='/images/icon/icon_home.png' mode='aspectFill' class='back-home'></image>
      </view>
复制代码

本文完~，喜欢就点个赞呗。