背景：

產(chǎn)品經(jīng)理跟細心地測試會發(fā)現(xiàn)：當(dāng)我們把小程序的某一子頁面，分享給其他人的時候。其他人只能通過點擊小程序右上角的三個點膠囊，然后再點擊“返回首頁”，才能回到首頁。

我們除了讓想讓用戶能夠看到我們分享的界面外，肯定還想讓他去首頁逛一逛。當(dāng)然還有其他tab頁面的話，也能讓用戶看一看其他的頁面。說不定就成我們的付費用戶了呢！

基于上面的訴求，我們就在想能不能把返回首頁做到頁面上，讓用戶一眼就能看到？

預(yù)測方案：

1. 懸浮按鈕
2. 自定義NavigationBar

方案分析：

方案一能達到目的，但是很顯然不優(yōu)雅。因為會遮擋部分頁面信息，用戶體驗不好。

方案二利用頂部的空白資源，加上返回首頁按鈕，既簡潔，對稱又優(yōu)雅，簡直妙不可言。

需要解決的問題都有哪些：

1. 查一下能自定義導(dǎo)航欄的微信版本跟調(diào)試庫版本
2. 擼一個自定義NavigationBar

實踐的方式如下：

第一個問題：

全局配置navigationStyle

• 調(diào)試基礎(chǔ)庫>=1.9.0
• 微信客戶端>=6.6.0

單頁面配置navigationStyle

• 調(diào)試基礎(chǔ)庫>=2.4.3
• 微信客戶端版本>=7.0.0

基礎(chǔ)庫版本與客戶端版本對應(yīng)關(guān)系

第二個問題：

擼代碼我覺得大家都沒問題，下面說幾個主要的點~

• 自定義導(dǎo)航欄文本，是否顯示返回，是否顯示返回首頁,導(dǎo)航欄高度

// 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代碼附上，歡迎參考