微信小程序自定义导航栏实例代码

背景 在做快狗打车小程序时，关于默认导航栏，我们遇到了以下的问题： Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中 页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果 左上角的事件无法监听、定制 路由导航单一，只能够返回上一页，深层级页面的返回不够友好 我们希望的是：在各个机型页面上title一致性 & 个性化展示、取得左上角点击事件控制权及深层级页面的一键返回 实现 step1 自定义 第一步 取得导航栏的控制权 小程序支持自定义导航栏，只需要在app.json文件中，window项中配置 "navi 在微信小程序开发中，为了实现更灵活的导航栏设计，我们常常需要自定义导航栏，以便解决默认导航栏带来的各种问题。例如，Android和iOS设备上页面标题的展示不一致，标题样式控制有限，以及左上角事件监听与定制的缺失。通过自定义导航栏，我们可以实现各平台页面标题的一致性、个性化展示，以及对左上角点击事件的控制，同时优化深层级页面的返回体验。 自定义导航栏的第一步是控制导航栏的权限。在`app.json`文件中的`window`配置项下，添加`"navigationStyle": "custom"`。这一设置意味着微信将不再管理导航栏，开发者可以完全自定义其内容和行为。此时，页面会从屏幕顶部开始渲染，不再包含默认的导航栏。 接下来，我们需要创建一个导航栏组件，并将其放置在原来导航栏的位置。这个组件需要包括以下几个关键功能点： 1. **导航栏高度适配**：导航栏高度通常由工具栏（固定20px）和title栏组成。title栏的高度需要根据手机型号动态计算。可以利用`wx.getSystemInfoSync`获取屏幕和窗口高度，再结合统计经验值（如：iPhone为64px，iPhone X为88px，Android为68px，samsung为72px）来确定不同设备上的导航栏高度。 2. **导航栏内容定制**：导航栏内容应根据当前页面的性质进行定制。这可能涉及到判断当前页面路由，例如：常规首页可能需要显示个人中心按钮，非常规首页可能需要显示回首页按钮，嵌套页面则需要返回上一页和回首页按钮。同时，title也可以根据页面类型展示个性化内容。 3. **布局处理**：使用`cover-view`组件来防止原生组件（如地图）遮挡导航栏。此外，为了确保导航栏始终位于视口顶部，可能需要一个占位块`place-holder`来调整页面内容的布局。 4. **事件监听**：实现左上角的点击事件监听，可以在此处添加自定义的返回逻辑，比如一键返回上一页或首页，以提升用户体验。 5. **样式控制**：为了让标题在所有机型上居中显示，需要自行布局实现。这可能涉及到对`cover-view`组件的CSS样式设置，包括定位、文字居中等。 在组件的`attached`生命周期函数中，可以获取当前页面的路由栈，以便根据页面状态调整导航栏的展示。例如，可以使用`getCurrentPages()`获取当前页面栈，然后通过栈顶元素`current_page`来确定当前页面的特性和需求。 自定义微信小程序的导航栏涉及多个步骤，包括权限控制、高度计算、内容定制、布局设计和事件处理。通过这些方法，开发者可以创建符合业务需求的导航栏，提升小程序的用户体验和视觉效果。在实践中，还应注意适配不同设备和版本的兼容性，确保自定义导航栏在各种环境下都能稳定运行。