原文地址： www.ctoku.com/post/XqArOn…

在进行小程序开发的过程中，经常遇到的一个问题就是，通过好友分享打开的小程序，去首页的入口太深，导致有部分用户流失，还有对返回按钮和返回地址进行特殊化处理，需要返回到指定位置，则可以通过自定义的方式进行处理。

配置：

通过配置navigationStyle对页面或者全局页面进行自定义头部

思路

首先我们指定自定义头部肯定是以组件的形式存在的；我们自定义的同时需要保持右边胶囊位置一致，同时也需要保留页面标题我们实现的效果如下图所示：

实现

首先我们通过

wx.getMenuButtonBoundingClientRect() 获取右边胶囊的位置使用wx.getSystemInfo 获取系统信息这两组数据不是经常改变的所以我们在进入小程序的时候执行放到全局变量里面。

this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo({ // iphonex底部适配
	success: res => {
		that.globalData.systeminfo = res
	}
})

根据下图分析

我们自定义的图标和右边胶囊位置一致因此我们通过右边胶囊的位置定位左边自定义图标的位置我们最初获取到的右边胶囊位置

headerPosi：{
	bottom: 82
	height: 32
	left: 278
	right: 365
	top: 50
	width: 87
}

获取到的状态栏高度为statusH = 44

所以自定义胶囊距离最顶部的高度为胶囊距离状态栏高度 - 状态栏高度

customNav.top = headerPosi.top - statusH wxml部分

<view class="custom_nav" style="height:{{navbarHeight}}px;">
  <view class="custom_nav_box" style="height:{{navbarHeight}}px;">
    <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;">
      <view class="custom_nav_icon"  wx:if="{{!navbarData.has_search}}" style="height:{{navbarBtn.height - 2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius: {{navbarBtn.height / 2}}px">
        <view class="gobank" style="height:{{navbarBtn.height - 10}}px;width:{{navbarBtn.height - 10}}px;"></view>
        <view class="home" style="height:{{navbarBtn.height -10 }}px;width:{{navbarBtn.height - 10}}px;"></view>
      </view>
      <view class="nav_title" wx:if="{{!navbarData.has_search}}" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;">组件目录</view>
    </view>
  </view>
</view>

wxss部分

.custom_nav {
  width: 100%;
  background: #fff;
}

.custom_nav_box {
  position: fixed;
  width: 100%;
  background: #fff;
}
.custom_nav_bar{
  position: relative;
}
.custom_nav_box .nav_title {
  font-size: 34rpx;
  color: #000;
  text-align: center;
  position: absolute;
  max-width: 360rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-weight: 600;
}

.custom_nav_box .custom_nav_icon {
  position: absolute;
  border: .5rpx solid rgba(0, 0, 0, .1);
  border-radius: 50%;
  display: flex;
  padding: 0 10rpx
}
.custom_nav_icon .gobank {
  background: url('https://www.easyicon.net/api/resizeApi.php?id=1225467&size=128') no-repeat center center;
  background-size: 60%;
  padding:0 5px;
  margin: 4px 0;
}
.custom_nav_icon .home {
  background: url('https://www.easyicon.net/api/resizeApi.php?id=1223065&size=128') no-repeat center center;
  background-size: 60%;
  padding:0 5px;
  margin: 4px 0;
  border-left: 1px solid rgba(0, 0, 0, .1)
}

js部分

const app = getApp();
Component({
  properties: {
    navbarData: { // navbarData 由父页面传递的数据
      type: Object,
      value: {
        gobank: true,
        gohome: true,
        has_search: false,
      },
      observer: function (newVal, oldVal) { 
      }
    }
  },
  data: {
    haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮
    statusBarHeight: 0, // 状态栏高度
    navbarHeight: 0, // 顶部导航栏高度
    navbarBtn: { // 胶囊位置信息
      height: 0,
      width: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    cusnavH: 0,
    searchW: 0, //搜索框宽度
  },
  // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
  attached: function () {
    let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度
    let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息
    console.log(statusBarHeight)
    console.log(headerPosi)
    let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
      height: headerPosi.height,
      width: headerPosi.width,
      top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度
      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度）
      right: app.globalData.systeminfo.screenWidth - headerPosi.right // 屏幕宽度 - 胶囊right
    }
    let haveBack;
    if (getCurrentPages().length === 1) { // 当只有一个页面时，并且是从分享页进入
      haveBack = false;
    } else {
      haveBack = true;
    }
    var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度
    var searchW = app.globalData.systeminfo.screenWidth - headerPosi.width - btnPosi.right * 2 - 30
    console.log(searchW, app.globalData.systeminfo.screenWidth, headerPosi.width)
    this.setData({
      haveBack: haveBack, // 获取是否是通过分享进入的小程序
      statusBarHeight: statusBarHeight,
      navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom
      navbarBtn: btnPosi,
      cusnavH: cusnavH,
      searchW: searchW
    })
  },
  methods: {
    _goBack: function () {
      wx.navigateBack({
        delta: 1
      });
    },
    _goHome: function () {
      wx.navigateTo({
        url: '/pages/index/index',
      });
    }
  }
})

使用方式

在需要自定义的页面引入该组件

navbarData 控制显示及返回按钮等操作

微信小程序自定义头部返回按钮及回到首页样式

配置：

思路

实现

wxss部分

js部分

使用方式