微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。

朴灿烈づ我的快乐病毒、 2024-04-23 12:57 75阅读 0赞

## 一、前言 ##

dai ga hou啊！我是 ???**是江迪呀**。我们在进行微信小程序开发时，常常需要自定义一些东西，比如**自定义顶部导航**、**自定义底部导航**等等。那么知道这些自定义内容的具体位置、以及如何适配不同的机型就变得尤为重要。下面让我以在iPhone机型，来给大家介绍下**微信小程序**如何获取自定义内容的位置信息。

## 二、开启自定义 ##

*如果需要自定义顶部和底部导航。那么如何在自定义后能够适配不同的机型而不会出现样式问题呢？我们可以通过`wx.getSystemInfo({})`方法来获取页面的信息来保证样式的正确性。此方法常用于`app.js`文件中的`onLanch()`方法中，保证这些信息优先被加载，并把获取到的页面信息放到全局变量中，方便其他页面的获取使用。*

在此之前需要开启自定义顶部和底部导航栏。如下所示：

{
        
      "pages": [
        "pages/index/index",
        "pages/index2/index2" 
      ],
      //自定义顶部导航 "navigationStyle": "custom",
      "window": {
        
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white",
        "backgroundTextStyle": "light"
      },
      //自定义底部导航 "navigationStyle": "custom",这里注意在设置自定义底部导航栏时，list中至少包含两个页面
      "tabBar": {
        
        "custom": true,
        "list": [
          {
        
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
        
            "pagePath": "pages/index2/index2",
            "text": "首页2"
          }
        ]
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

### 2.1 整个页面 ###

#### 1.位置 ####

![在这里插入图片描述][8c8191105bf14c2e843151825536f37b.png]

#### 2.如何获取 ####

**页面代码：**

**页面js代码：**

const app = getApp()
    Page({
        
      data: {
        
        screenHeight: app.globalData.screenHeight,
      }
    })

**app.js文件代码：**

onLaunch: function() {
        
            wx.getSystemInfo({
        
                success: e => {
        
                	//获取整个页面的高度
                    this.globalData.screenHeight = e.screenHeight;
                  }
                 },
            )}

### 2.1 状态栏 ###

#### 1.位置 ####

状态栏就是手机最顶部显示**时间**、**信号**、**电量**等信息的区域。一般状态栏的信息我们不单独获取设置，因为**顶部导航栏**包含了**状态栏**。  
![在这里插入图片描述][bb7d81b60ede4780970264e94fea846d.png]

#### 2.如何获取 ####

**页面代码：**

<view style="height: { { screenHeight}}px;background-color: aliceblue;">
      
      <view style="height: { { statusBarHeight}}px;background-color: red;"></view>
    </view>

**页面js代码：**

// index.js
    const app = getApp()
    Page({
        
      data: {
        
        screenHeight: app.globalData.screenHeight,
        statusBarHeight: app.globalData.statusBarHeight
      }
    })

**app.js文件代码：**

onLaunch: function() {
        
    	     wx.getSystemInfo({
        
               success: e => {
        
                  this.globalData.screenHeight = e.screenHeight;
                  //获取状态栏的高度
                  this.globalData.StatusBar = e.statusBarHeight;
               }
    	     },
    	)}

### 2.2 顶部导航栏 ###

#### 1.位置 ####

顶部导航栏的高度是包含胶囊体的。  
![在这里插入图片描述][e85c1e39b4214efeacc30fb26f08058c.png]

#### 2.如何获取 ####

首先获取胶囊体的信息，如果不存在胶囊体，`顶部导航栏高度` = `状态栏高度` \+ `50`；如果存在`顶部导航栏高度` = `胶囊体离页面顶部的距离` \+ `胶囊体离页面底部的距离` \- `状态栏高度`  
**页面代码：**

**页面js代码：**

const app = getApp()
    Page({
        
      data: {
        
        screenHeight: app.globalData.screenHeight,
        customBar: app.globalData.CustomBar
      }
    })

**app.js代码：**

// app.js
    App({
        
      globalData:{
        
      },
      onLaunch: function() {
        
        wx.getSystemInfo({
        
        success: e => {
        
            let capsule = wx.getMenuButtonBoundingClientRect();
            if (capsule) {
        
              this.globalData.Custom = capsule;
              this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
            } else {
        
              this.globalData.CustomBar = e.statusBarHeight + 50;
            }
          }
         },
     )}
    })

### 2.4 内容区域 ###

#### 1.位置 ####

如果你做的小程序没有`底部导航栏`的话，那么`内容区域` = `页面总高度` \- `顶部导航栏高度`  
![在这里插入图片描述][000b1ea9943d4d77b92c032e44d1cdc9.png]  
但是如果你需要底部导航的话那么`内容区域` = `页面总高度` \- `顶部导航栏高度` \- `底部导航栏高度`  
![在这里插入图片描述][734687098ff3430da149a678b8f651ff.png]

#### 2.如何获取 ####

**页面代码：**

**页面js代码：**

const app = getApp()
    Page({
        
      data: {
        
        screenHeight: app.globalData.screenHeight,
        CustomBar: app.globalData.CustomBar,
        tabBarHeight: app.globalData.tabBarHeight,
      }
    })

**app.js代码：**

// app.js
    App({
        
      globalData:{
        
        
      },
      onLaunch: function() {
        
        // 获取系统状态栏信息
        wx.getSystemInfo({
        
        success: e => {
        
            this.globalData.screenHeight = e.screenHeight;
            this.globalData.tabBarHeight = e.screenHeight - e.safeArea.bottom + 50
            let capsule = wx.getMenuButtonBoundingClientRect();
            if (capsule) {
        
              this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
            } else {
        
              this.globalData.CustomBar = e.statusBarHeight + 50;
            }
          }
         },
     )}
    })

### 2.3 底部导航栏 ###

#### 1.位置 ####

![在这里插入图片描述][06c85d00ad974b1c9f43343d009d0770.png]

#### 2.如何获取 ####

**页面代码：**

**页面js代码：**

const app = getApp()
    Page({
        
      data: {
        
        screenHeight: app.globalData.screenHeight,
        statusBarHeight: app.globalData.statusBarHeight,
        customBar: app.globalData.CustomBar,
        tabBar: app.globalData.tabBarHeight,
        tabBarHeight: app.globalData.tabBarHeight
      }
    })

**app.js代码：**

onLaunch: function() {
        
            wx.getSystemInfo({
        
                success: e => {
        
                	this.globalData.screenHeight = e.screenHeight;
                	this.globalData.tabBarHeight = e.screenHeight-e.safeArea.bottom + 50
    				let capsule = wx.getMenuButtonBoundingClientRect();
    		        if (capsule) {
        
    		          this.globalData.Custom = capsule;
    		          this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
    		        } else {
        
    		          this.globalData.CustomBar = e.statusBarHeight + 50;
    		        }
                  }
                 },
            )}

这个底部导航栏之所以+50，我是从小程序框架中获取的，可以直接拿来用。

## 三、胶囊体 ##

### 3.1 什么是胶囊体？ ###

![在这里插入图片描述][e8aefdb827124e878387fbc541665ddb.png]

我们再做自定义顶部导航时，在一些场景下需要在导航中设置返回按钮以及其他信息：  
![在这里插入图片描述][703e58a191e04021ad97d22efc41cd78.png]  
这些按钮和信息需要和胶囊体对齐才完美，所以我们需要获取到`胶囊体`的位置信息。

### 3.2 如何获取？ ###

// app.js
    App({
        
      globalData:{
        
      },
      onLaunch: function() {
        
        // 获取系统状态栏信息
        wx.getSystemInfo({
        
        success: e => {
        
          	//胶囊体距离顶部距离
            this.globalData.capsuleTop =  wx.getMenuButtonBoundingClientRect().top;
            //胶囊体的高度
            this.globalData.capsuleHeight =  wx.getMenuButtonBoundingClientRect().height;
            //胶囊体的宽度
            this.globalData.capsuleWidth =  wx.getMenuButtonBoundingClientRect().width;
          }
         },
         wx.onKeyboardHeightChange((res) => {
        
          console.log('键盘高度111111：', res.height)
          wx.setStorageSync('keyBordHeight', res.height)
        })
     )}
    })

[8c8191105bf14c2e843151825536f37b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/7bdbc15c25fe483b95d74af35eaa35a8.png
[bb7d81b60ede4780970264e94fea846d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/604241ffab6545588e8f0a87459857da.png
[e85c1e39b4214efeacc30fb26f08058c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/aed11a4e34004df5b008678d88d48432.png
[000b1ea9943d4d77b92c032e44d1cdc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/19a99aff818e4c45852ab8ed42d4a387.png
[734687098ff3430da149a678b8f651ff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/3f4528da9f1b41f097380f8d2970b933.png
[06c85d00ad974b1c9f43343d009d0770.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f5acf749e0d34c2f8682117800ec7f80.png
[e8aefdb827124e878387fbc541665ddb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/65eb4696eeb74e32b9997bc70e24bc7a.png
[703e58a191e04021ad97d22efc41cd78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/1abf8fd691744ceab54402265daa2292.png