mpvue是一个使用Vue.js开发小程序的框架，它允许开发者利用Vue的开发体验来构建小程序，同时能够享受Vue生态的丰富资源。由于小程序原生代码与mpvue编写的代码有一定的差异，开发者在开发自定义组件时需要遵守mpvue的规范，并利用mpvue提供的组件和API来实现功能。
本指南详细介绍了如何在mpvue框架下开发自定义的导航组件。自定义导航组件可以使小程序的用户界面更加个性化，并提升用户体验。在小程序中，可以通过设置页面的navigationStyle属性为custom来开启自定义导航栏模式。自定义导航栏模式下，小程序仅保留右上角的胶囊按钮，其他元素则由开发者自由设计。
自定义导航栏涉及到两个部分：状态栏和标题栏。状态栏一般用于展示时间、网络状态等信息，而标题栏则用来显示页面标题。在全面屏手机（特别是带有刘海屏幕的iOS设备）上，状态栏的高度比其他设备要高，所以在设计自定义导航栏时，需要考虑不同设备状态栏高度的兼容性问题。
为了解决不同设备上导航栏高度兼容的问题，可以使用微信小程序提供的api wx.getSystemInfo 来获取当前设备的状态栏高度（statusBarHeight）。而标题栏的高度通常固定为44px（iOS带刘海屏幕）或48px（Android设备）。开发者需要根据当前设备系统类型来决定使用哪个高度值，然后将这两部分高度相加，得到导航栏的总高度。
为了实现自定义导航栏，需要在mpvue的template中使用<cover-view>标签。这是因为小程序的video组件具有最高的层级，普通html标签无法覆盖，而<cover-view>则可以实现覆盖效果。开发者可以按照自己的需求设计导航栏的样式和布局，并将获取到的状态栏高度和标题栏高度应用到<cover-view>中。
在mpvue中，自定义导航栏组件的实现需要结合JavaScript逻辑和模板。在beforeMount生命周期钩子中，使用wx.getSystemInfo获取设备信息，并将状态栏高度和平台信息存储在组件实例中。根据获取的平台信息，可以确定状态栏的高度，并结合标题栏高度来设置导航栏的样式。
在template中定义的导航栏组件主要包括以下几个部分：
- 占位栏：使用<cover-view>标签来定义一个占位栏，其高度等于导航栏的总高度。
- 导航栏主体：也是使用<cover-view>标签，其高度和背景颜色可以根据需要自定义。
- 状态栏：使用<cover-view>标签来展示状态栏，并设置其高度。
- 标题栏：使用<cover-view>标签来展示标题栏，包括左侧的后退按钮、中间的标题和右侧的导航选项等。
- 标题：使用<cover-view>标签来显示页面标题，并可以设置标题的颜色。
JavaScript代码中定义了导航栏组件的各种行为，如点击后退键触发的backClick方法，点击首页图标触发的homeClick方法等。通过这些方法，可以实现导航栏上的不同功能，如页面跳转、页面刷新等。
通过上述方法，开发者可以根据需要设计并实现自定义的导航组件，并通过在mpvue中正确的配置和编写代码来解决不同设备上的兼容性问题，从而提升小程序的用户体验和视觉效果。
