小程序自定义导航栏

背景：

产品经理跟细心地测试会发现：当我们把小程序的某一子页面，分享给其他人的时候。其他人只能通过点击小程序右上角的三个点胶囊，然后再点击“返回首页”，才能回到首页。

我们除了让想让用户能够看到我们分享的界面外，肯定还想让他去首页逛一逛。当然还有其他tab页面的话，也能让用户看一看其他的页面。说不定就成我们的付费用户了呢！

基于上面的诉求，我们就在想能不能把返回首页做到页面上，让用户一眼就能看到？

预测方案：

1. 悬浮按钮
2. 自定义NavigationBar

方案分析：

方案一能达到目的，但是很显然不优雅。因为会遮挡部分页面信息，用户体验不好。

方案二利用顶部的空白资源，加上返回首页按钮，既简洁，对称又优雅，简直妙不可言。

需要解决的问题都有哪些：

1. 查一下能自定义导航栏的微信版本跟调试库版本
2. 撸一个自定义NavigationBar

实践的方式如下：

第一个问题：

全局配置navigationStyle

• 调试基础库>=1.9.0
• 微信客户端>=6.6.0

单页面配置navigationStyle

• 调试基础库>=2.4.3
• 微信客户端版本>=7.0.0

基础库版本与客户端版本对应关系

第二个问题：

撸代码我觉得大家都没问题，下面说几个主要的点~

• 自定义导航栏文本，是否显示返回，是否显示返回首页,导航栏高度

// components/navigationBar/navigationBar.js
Component({
  properties: {
    text: {
      type: String,
      value: 'Wechat'
    },
    back: {
      type: Boolean,
      value: false
    },
    home: {
      type: Boolean,
      value: false
    }
  },
  data: {
    statusBarHeight: app.globalData.statusBarHeight + 'px',
    navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
  },
})

• statusBarHeight，这个需要在onLaunch获取

//app.js
App({
  globalData: {
    userInfo: null,
    statusBarHeight: '',
  },
  onLaunch: function () {
    wx.getSystemInfo({
      success: (res) => {
        this.globalData.statusBarHeight = res.statusBarHeight
        console.log('statusBarHeight' +  JSON.stringify(res))
      }
    })
  }
})

• 组件的wxss

这里不管是页面布局还是字体都建议使用px，因为小程序页面右上角的胶囊也是用的px不是rpx

• 全局组件配置如下

{
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  },
  "window": {
    "navigationStyle": "custom"
  }
}

• 单页面组件配置如下

// app.json
{
  "window": {
    "navigationStyle": "default"
  }
}

//end.json
{
  "navigationStyle": "custom",
  "usingComponents": {
    "navigationBar": "/components/navigationBar/navigationBar"
  }
}

至此所有问题，基本都已解决
Demo代码附上，欢迎参考