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

**Repository Path**: io123/wechat-nav-bar

## Basic Information

- **Project Name**: 自定义微信小程序navBar组件
- **Description**: 小程序navBar，支持搜索框，添加logo，显示天气信息（可自行添加事件），支持添加返回主页，返回按钮，添加自定义样式，喜欢的点个小星星。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 4
- **Created**: 2020-08-22
- **Last Updated**: 2025-06-13

## Categories & Tags

**Categories**: weixin-lapp

**Tags**: None

## README

# 微信小程序navBar

#### 介绍
小程序navBar，支持搜索框，添加logo，显示天气信息（可自行添加事件），支持添加返回主页，返回按钮，添加自定义样式
![输入图片说明](https://images.gitee.com/uploads/images/2020/0822/202343_db0c7fbc_1139094.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0822/202233_fc183735_1139094.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0822/201719_a17fa15b_1139094.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2020/0822/201753_2b97a3ef_1139094.png "屏幕截图.png")
 #### version1.0.0 有如下功能

| 名称        | 类型      | 默认值   | 备注       |
|-----------|---------|-------|----------|
| showlogo  | boolean | false | 是否显示logo |
| logoImage | String  | 无     | logo图片地址 |
| showaw    | boolean | false | 显示城市天气   |
| searchBar  | Boolean  | false | 是否显示搜索         |
| searchText | String   | 无     | 搜索框placeholder |
| address    | String   | 无     | 显示地址           |
| weather    | String   | 无     | 显示天气           |
| bindsearch | function | 无     | 搜索框点击事件        |
| bindlogo   | function | 无     | 点击logo事件       |
| bindweather | function | 无     | 点击天气地址栏事件 |
| background  | String   | white | 背景颜色值     |
| back        | Boolean  | false | 是否是返回按钮   |
| bindback    | function | 无     | 绑定返回事件    |
|             |          |       |           |

#### 使用方法
#### 1、app.json 添加全局组件

```
 "usingComponents": {
    "navBar": "/components/navBar/navBar"
  },
```

![输入图片说明](https://images.gitee.com/uploads/images/2020/0822/203042_81732f42_1139094.png "屏幕截图.png")
#### 2、app.js中 onLaunch方法中 添加该段代码

```
 const { statusBarHeight, platform } = wx.getSystemInfoSync()
    const { top, height } = wx.getMenuButtonBoundingClientRect()

    // 状态栏高度
    wx.setStorageSync('statusBarHeight', statusBarHeight)
    // 胶囊按钮高度 一般是32 如果获取不到就使用32
    wx.setStorageSync('menuButtonHeight', height ? height : 32)
    
    // 判断胶囊按钮信息是否成功获取
    if (top && top !== 0 && height && height !== 0) {
        const navigationBarHeight = (top - statusBarHeight) * 2 + height
        // 导航栏高度
        wx.setStorageSync('navigationBarHeight', navigationBarHeight)
    } else {
        wx.setStorageSync(
          'navigationBarHeight',
          platform === 'android' ? 48 : 40
        )
    }
```

![输入图片说明](https://images.gitee.com/uploads/images/2020/0822/203209_8d2f6339_1139094.png "屏幕截图.png")