產(chǎn)品說(shuō)小程序返回到首頁(yè)不太方便，想添加返回首頁(yè)按鈕，UI說(shuō)導(dǎo)航欄能不能設(shè)置背景圖片，因?yàn)槟菢釉O(shè)計(jì)挺好看的。
需求分析并制定方案
這產(chǎn)品和UI都提需求了，咱也不能反駁哈，所以開(kāi)始調(diào)研，分析可行性方案：
可以添加懸浮按鈕
自定義導(dǎo)航欄
添加懸浮按鈕，是看起來(lái)是比較簡(jiǎn)單哈，但是感覺(jué)不太優(yōu)雅，會(huì)占據(jù)頁(yè)面的空間，體驗(yàn)也不太好。所以想了下第二種方案，自定義導(dǎo)航欄既可以實(shí)現(xiàn)產(chǎn)品的需求還可以滿(mǎn)足UI的設(shè)計(jì)美感，在頂部空白處加上返回首頁(yè)的按鈕，這樣和返回按鈕還對(duì)稱(chēng)（最終如圖所示，頂部導(dǎo)航欄是個(gè)背景圖片，分兩塊組合起來(lái)）。
實(shí)現(xiàn)方案
一、實(shí)現(xiàn)的前提
首先查看文檔，看文檔里關(guān)于自定義導(dǎo)航欄是怎么規(guī)定的，有哪些限制；還有小程序自定義導(dǎo)航欄全局配置和單頁(yè)面配置的微信版本和調(diào)試庫(kù)的最低支持版本。
在 app.json window 增加 "navigationStyle":"custom"，頂部導(dǎo)航欄就會(huì)消失，只保留右上角膠囊狀的按鈕，如何修改膠囊的顏色呢;膠囊體目前只支持黑色和白色兩種顏色 在
app.josn window 加上 "navigationBarTextStyle":"white/black"。
還要考慮加返回按鈕和返回首頁(yè)的按鈕，適配不同的機(jī)型。
先說(shuō)下兩種配置方法：
1、全局配置navigationStyle
調(diào)試基礎(chǔ)庫(kù)>=1.9.0
微信客戶(hù)端>=6.6.0
app.json：
{
"usingComponents": {
"navigationBar": "/components/navigationBar/navigationBar"
},
"window": {
"navigationStyle": "custom"
}
}2、單頁(yè)面配置navigationStyle
調(diào)試基礎(chǔ)庫(kù)>=2.4.3
微信客戶(hù)端版本>=7.0.0
自定義的頁(yè)面.json：
{
"window": {
"navigationStyle": "default"
}
}
{
"navigationStyle": "custom",
"usingComponents": {
"navigationBar": "/components/navigationBar/navigationBar"
}
}兩者的區(qū)別就是，全局配置放在app.json文件里，單頁(yè)面配置放在自定義頁(yè)面配置文件里。
二、實(shí)現(xiàn)的步驟
以下說(shuō)下幾個(gè)要點(diǎn)：
1、自定義導(dǎo)航欄文本，是否顯示返回，是否顯示返回首頁(yè)，導(dǎo)航欄高度。
2、 statusBarHeight，用來(lái)獲取手機(jī)狀態(tài)欄的高度，這個(gè)需要在全局app.js中的 onLaunch，調(diào)用 wx.getSystemInfo 獲取， navigationBarHeight + 默認(rèn)的高度，這個(gè)是設(shè)定整個(gè)導(dǎo)航欄的高度。
3、還有注意的，在寫(xiě)樣式距離和大小時(shí)建議都用px，因小程序右邊的膠囊也是用的px，不是rpx。
4、因?yàn)樽远x導(dǎo)航欄每個(gè)頁(yè)面都要寫(xiě)，所以把導(dǎo)航欄封裝了公共組件，這樣只需要在每個(gè)頁(yè)面引入即可。
如下是封裝的導(dǎo)航欄組件：
wxml
<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
<view style="{{'height: ' + statusBarHeight}}"></view>
<view class='title-container'>
<view class='capsule' wx:if="{{ back || home }}">
<view bindtap='back' wx:if="{{back}}">
<image src='/images/back.png'></image>
</view>
<view bindtap='backHome' wx:if="{{home}}">
<image src='/images/home.png'></image>
</view>
</view>
<view class='title'>{{text}}</view>
</view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>這里有個(gè)需注意的問(wèn)題，就是一般會(huì)出現(xiàn)自定義導(dǎo)航欄，下拉頁(yè)面，導(dǎo)航欄也隨著會(huì)下拉，這種問(wèn)題是因?yàn)樵O(shè)置
fixed 后頁(yè)面元素整體上移了 navigationBarHeight，所以在此組件里設(shè)置一個(gè)空白view元素占用最上面的 navigationBarHeight 這塊高度。
wxss
.navbar {
width: 100%;
background-color: #1797eb;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.title-container {
height: 40px;
display: flex;
align-items: center;
position: relative;
}
.capsule {
margin-left: 10px;
height: 30px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #fff;
border-radius: 16px;
display: flex;
align-items: center;
}
.capsule > view {
width: 45px;
height: 60%;
position: relative;
.capsule > view:nth-child(2) {
border-left: 1px solid #fff;
}
.capsule image {
width: 50%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.title {
color: white;
position: absolute;
top: 6px;
left: 104px;
right: 104px;
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}js
const app = getApp()
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'
},
methods: {
backHome: function () {
let pages = getCurrentPages()
wx.navigateBack({
delta: pages.length
})
},
back: function () {
wx.navigateBack({
delta: 1
})
}
}
})json
{
"component": true,
"usingComponents": {}
}最終還需要考慮下版本兼容的問(wèn)題，畢竟還有一些用戶(hù)，微信版本并沒(méi)有更新到最新版本。
首先可以在app.js里面獲取下當(dāng)前用戶(hù)的微信版本，做下版本比較，如果小于這個(gè)版本，設(shè)置個(gè)全局變量，也可以在組件寫(xiě)個(gè)方法，在不同的頁(yè)面打開(kāi)顯示不同的頂部導(dǎo)航欄，或者可以控制是否顯示導(dǎo)航欄，這里就不詳細(xì)說(shuō)了。
親自試了下，在低于7.0版本的微信中，如果采用單頁(yè)面自定義導(dǎo)航欄，會(huì)出現(xiàn)兩個(gè)導(dǎo)航欄，這時(shí)候通過(guò)判斷版本號(hào)不要再渲染自定義的導(dǎo)航欄組件了，在頁(yè)面的配置文件里寫(xiě)上title名，還有相應(yīng)的背景色，這樣就會(huì)顯示自帶的導(dǎo)航欄了。
總結(jié)
小程序開(kāi)發(fā)是有些坑的地方，從不支持自定義導(dǎo)航欄，到支持全局自定義導(dǎo)航欄，再到現(xiàn)在的支持單頁(yè)面配置，可以看出在慢慢完善。還有底部tabbar，可自己選擇配置的太少了，雖然也支持自定義，但是發(fā)現(xiàn)自定義寫(xiě)的底部導(dǎo)航組件體驗(yàn)并不好，每次打開(kāi)頁(yè)面都會(huì)重新渲染底部的按鈕，如果全部寫(xiě)成在一個(gè)頁(yè)面里的tab切換，雖然按鈕每次不用重新加載了，但是業(yè)務(wù)多肯定不行，寫(xiě)到一個(gè)單頁(yè)面里東西也太多了。希望微信能夠多添加或放開(kāi)一些功能，讓開(kāi)發(fā)者更好的服務(wù)于產(chǎn)品，給用戶(hù)更好的體驗(yàn)。