实现小程序插件自定义导航栏

时间：2024-03-08 15:35:37

最近有用户提出腾讯位置服务路线规划插件在小程序自定义导航栏之后，导致路线规划插件的导航栏消失问题，发现小程序自定义导航栏会影响插件导航栏。

决定使用插件自定义导航栏来解决这一问题。下面是对于插件自定义导航栏的开发心得。

  1. 了解小程序导航栏

小程序导航栏的总体划分为下面几个区域：

 

  1. 小程序自定义导航栏

小程序可以提供可以自己自定义导航栏接口，接下来我们来学习下怎么进行自定义导航栏：

知己知彼，方百战百胜。首先我们要了解默认导航栏是怎么计算的：

  1. 默认导航栏

  1. wx.getSystemInfo可以获取屏幕的位置信息；

  2. screenHeight - windowHeight = 屏幕的导航栏高度（totalBarHeight)；

  3. 状态栏高度可根据systemInfo中statusBarHeight值获取；

  4. 标题的高度(titleBarHeight) = totalBarHeight - statusBarHeight；

 

上述的默认导航栏的计算可以直接根据小程序的wx.getSystemInfo接口来计算，看着是不是很轻松能搞定。现在我们来看看自定义导航栏。

（2）自定义导航栏

小程序提供了可以定义导航栏接口：

app.json的window项中配置以下代码：

 

"navigationStyle": "custom"

 

配置自定义导航栏之后的效果图：

自定义导航栏中wx.getSystemInfo的 screenHeight和windowHeight的值是一致的。此时，我们没办法计算导航栏高度了。但是经过简单的线下数据采集，得到了大部分热门的手机导航栏高度数据（totalBarHeight)。

 

  1. 大部分手机的导航栏高度（totalBarHeight)

 

iPhone： 64px;
iPhone： 88px;
android： 68px;
samsung： 72px;

 

  1. 状态栏高度可根据systemInfo中statusBarHeight值获取；

  2. 标题的高度(titleBarHeight) = totalBarHeight - statusBarHeight；

 

自定义导航栏实现后效果图:

  1. 小程序插件可以自定义导航栏吗？

上述的都是小程序的自定义导航栏用法，有同学提问了小程序插件中能否自定义导航栏呢？

答案是当然是可以的。插件中自定义导航栏没办法像小程序里统一设置，但是可以在每个页面的json文件中单独配置，其他的步骤和小程序的自定义导航栏一致：

 

 

"navigationStyle": "custom"

 

 

 

参考文章链接：

高适应性的自定义导航栏开发思路

微信小程序自定义导航栏

腾讯位置服务路线规划插件

 

相关文章