微信小程序自定义导航栏以及安全区域计算和适配

尚梦

已于 2023-12-10 01:04:17 修改

阅读量1k

点赞数 5

分类专栏：微信小程序文章标签：微信小程序安全 notepad++

于 2023-12-07 16:21:09 首次发布

本文链接：https://blog.csdn.net/qq_42164957/article/details/134858402

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：

一. 安全区域

定义：从胶囊顶部 - 屏幕底部
作用：不同手机的安全区域不同，适配安全区域能防止页面重要内容被遮挡。
常见业务：自定义导航栏，适配不同的手机。

二. 自定义导航栏

1. js文件

// pages/index/index.js
Page({
  

  /**
   * 页面的初始数据
   */
  data: {
    marginTop: 0,
    infoTop: 0,
    topHeight: 0,
    isPhone: false,   // 是否是phone机型
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getMarginTop();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    
  },

  // 获取导航栏的高度
  getMarginTop() {
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: res => {
        //导航高度
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
        var top = navHeight * 750 / wx.getSystemInfoSync().windowWidth;

        this.setData({
          marginTop: navHeight,
          infoTop: wx.getSystemInfoSync().statusBarHeight,
          topHeight: top
        })
        // 获取设备机型
        const model = res.model;
        if (model.includes('iPhone')) {
          this.setData({
            isPhone: true
          })
        }else if(model.includes('Android')){
          this.setData({
            isPhone: false
          })
        }
      },
      fail(err) {
        // console.log(err);
      }
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

2. wxml文件

<view class="zdytabbox">
		<view class="safetab">
				<image class="img" src="/public/image/BG.png"></image>
				<view style="{{'height:'+infoTop+'px'}}"></view>
				<view style="{{'height:'+(marginTop - infoTop)+'px;line-height:'+(marginTop - infoTop)+'px;padding-left:40rpx'}}" class="my-title">我的</view>
				<view class="my-msg" bindtap="grxx">
						<!-- 在这里编写内容就行 -->
				</view>
		</view>


		<!-- 底部 -->
		<view class="outStore">
				<view class="bottomCase">提交</view>
				<view class="{{ isPhone ? 'isIPhoneXRegexBottom' : 'isnullPhomeBottom' }}"></view>
		</view>
</view>

3. json文件

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

三. 底部按钮的适配

由于用户的机型不同，微信小程序底部的高度计算规则也不同，现在的机型分为两种，一种是安卓机，一种是ios机型，安卓机的适配在开发者工具上的预览机型相当于iphone5，而ios机型在开发者工具上的预览相当与iphone12或以上，这其实只是一个预估值，可以将它统称为iphoneX，导致机型不适配的原因是因为苹果 iPhoneX 、iPhone XR等设备上，物理Home键被取消，改为底部小黑条替代home键功能。

iPhone底部的小黑条（Home Indicator）高度是34px，实际我也在真机确认了是34px，所以可以根据该值，设置底部按钮或选项卡的margin-bottom、padding-bottom、height等，或者添加一个div来占位小黑条的位置。