1.

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

2.

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

配置：3.

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

思路4.

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

实现5.

首先我们通过

6.

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

this.globalData.headerBtnPosiwx.getMenuButtonBoundingClientRect()wx.getSystemInfo({//iphonex底部适配success:res{that.globalData.systeminfores}})复制代码7.

根据下图分析

8.

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

headerPosi：{bottom:82height:32left:278right:365top:50width:87}复制代码9.

获取到的状态栏高度为statusH44

10.

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

11.

customNav.topheaderPosi.top-statusHwxml部分

viewclass"custom_nav"style"height:{{navbarHeight}}px;"viewclass"custom_nav_box"style"height:{{navbarHeight}}px;"viewclass"custom_nav_bar"style"top:{{statusBarHeight}}px;height:{{cusnavH}}px;"viewclass"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"viewclass"gobank"style"height:{{navbarBtn.height-10}}px;width:{{navbarBtn.height-10}}px;"/viewviewclass"home"style"height:{{navbarBtn.height-10}}px;width:{{navbarBtn.height-10}}px;"/view/viewviewclass"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:.5rpxsolidrgba(0,0,0,.1);border-radius:50%;display:flex;padding:010rpx}.custom_nav_icon.gobank{background:url('https://www.easyicon.net/api/resizeApi.php?id1225467size128')no-repeatcentercenter;background-size:60%;padding:05px;margin:4px0;}.custom_nav_icon.home{background:url('https://www.easyicon.net/api/resizeApi.php?id1223065size128')no-repeatcentercenter;background-size:60%;padding:05px;margin:4px0;border-left:1pxsolidrgba(0,0,0,.1)}复制代码js部分constappgetApp();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(){letstatusBarHeightapp.globalData.systeminfo.statusBarHeight//状态栏高度letheaderPosiapp.globalData.headerBtnPosi//胶囊位置信息console.log(statusBarHeight)console.log(headerPosi)letbtnPosi{//胶囊实际位置，坐标信息不是左上角原点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}lethaveBack;if(getCurrentPages().length1){//当只有一个页面时，并且是从分享页进入haveBackfalse;}else{haveBacktrue;}varcusnavHbtnPosi.height+btnPosi.top+btnPosi.bottom//导航高度varsearchWapp.globalData.systeminfo.screenWidth-headerPosi.width-btnPosi.right*2-30console.log(searchW,app.globalData.systeminfo.screenWidth,headerPosi.width)this.setData({haveBack:haveBack,//获取是否是通过分享进入的小程序statusBarHeight:statusBarHeight,navbarHeight:headerPosi.bottom+btnPosi.bottom,//胶囊bottom+胶囊实际bottomnavbarBtn:btnPosi,cusnavH:cusnavH,searchW:searchW})},methods:{_goBack:function(){wx.navigateBack({delta:1});},_goHome:function(){wx.navigateTo({url:'/pages/index/index',});}}})复制代码