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

旧城等待， 2022-03-27 13:16 618阅读 0赞

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

2018-1-18 更新  
navbar 组件目前还有适配问题

*  textarea层级最高,上滑会遮住navbar
 *  键盘弹起内容会遮住navbar

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

这里选择自定义的原因有两点：

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

下面两张图是简单实现的效果。  
![image.png][]

**[实现分析][Link 1]**  
**[源码地址][Link 2]**

![image.png][image.png 1]

**[实现分析][Link 3]**

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

## 微信小程序自定义组件 ##

> 官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

文档中说明了自定义组件

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

### 创建自定义组件 ###

在最新的开发工具中已经支持直接创建组件了，创建一个 `components`目录，然后在创建一个组件对于的目录，例如这里创建的是`tabbar`目录，然后在该目录点击鼠标右键选择`新建Component`，输入组件名称即可，例如这里输入的是`tabbar`。  
![image.png][image.png 2]

#### 组件模板和样式 ####

> 官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

类似于页面，自定义组件拥有自己的`wxml` 模板和 `wxss` 样式

在组件模板中可以提供一个`<slot>`节点，用于承载组件引用时提供的子节点。这个`<slot>`节点相当于组件占位符。  
![image.png][image.png 3]

默认情况`wxml`中只支持一个`<solt>`节点，可以设置支持多个`<solt>`节点：  
![image.png][image.png 4]

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

![image.png][image.png 5]  
![image.png][image.png 6]

组件的`wxss`默认是不支持`app.wxss`样式的，但是可以像设置多`<slot>`一样，进行设置：  
![image.png][image.png 7]

#### 模板数据绑定 ####

> 通过调用 Component构造器时可以指定组件的属性、数据、方法等。https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

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 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

![image.png][image.png 8]  
![image.png][image.png 9]

### 开始使用组件 ###

在页面的`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>

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

[image.png]: /images/20220327/0fef7d59dc684f45838aaf96fdb2f45d.png
[Link 1]: https://blog.csdn.net/qq_30817073/article/details/81450559
[Link 2]: https://github.com/SuRuiGit/wxapp-customTabbar
[image.png 1]: /images/20220327/7bb26482d13449c0b3c5f97fea9c5776.png
[Link 3]: https://blog.csdn.net/dt1991524/article/details/82699682
[image.png 2]: /images/20220327/f525d312429549d48bc93ae0e89e5bcd.png
[image.png 3]: /images/20220327/95cacb149280414987d356b4bb1c5e84.png
[image.png 4]: /images/20220327/ecac7d0214724c49b04b180c42cbc47b.png
[image.png 5]: /images/20220327/389316e08fa74e9b99dc2c158ca7018d.png
[image.png 6]: /images/20220327/864d1363d15042ea89ff691bb9fd39fb.png
[image.png 7]: /images/20220327/8b0085df033d43eea6e31a4209f520fd.png
[image.png 8]: /images/20220327/e4cfb1d88ae54c4fa5242ac3ff6a3f19.png
[image.png 9]: /images/20220327/e3226bb98e184dff91d2e2c68410b975.png