小程式自定義單頁面、全域性導航欄

摘要： 小程式開發技巧。

• 作者：小白
• 原文：小程式自定義單頁面、全域性導航欄

Fundebug經授權轉載，版權歸原作者所有。

需求

產品說小程式返回到首頁不太方便，想新增返回首頁按鈕，UI說導航欄能不能設定背景圖片，因為那樣設計挺好看的。

需求分析並制定方案

這產品和UI都提需求了，咱也不能反駁哈，所以開始調研，分析可行性方案；1、可以新增懸浮按鈕。2、自定義導航欄。 新增懸浮按鈕，是看起來是比較簡單哈，但是感覺不太優雅，會佔據頁面的空間，體驗也不太好。所以想了下第二種方案，自定義導航欄既可以實現產品的需求還可以滿足UI的設計美感，在頂部空白處加上返回首頁的按鈕，這樣和返回按鈕還對稱（最終如圖所示，頂部導航欄是個背景圖片，分兩塊組合起來）。

實現方案

一、實現的前提

1、首先檢視文件，看文件裡關於自定義導航欄是怎麼規定的，有哪些限制；還有小程式自定義導航欄全域性配置和單頁面配置的微信版本和除錯庫的最低支援版本。

2、在app.json window 增加 navigationStyle:custom ，頂部導航欄就會消失，只保留右上角膠囊狀的按鈕，如何修改膠囊的顏色呢;膠囊體目前只支援黑色和白色兩種顏色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

3、還要考慮加返回按鈕和返回首頁的按鈕，適配不同的機型

先說下兩種配置方法：

①全域性配置navigationStyle：

• 除錯基礎庫>=1.9.0
• 微信客戶端>=6.6.0

app.json

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

②單頁面配置navigationStyle

• 除錯基礎庫>=2.4.3
• 微信客戶端版本>=7.0.0

自定義的頁面.json

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

兩者的區別就是，全域性配置放在app.json檔案裡，單頁面配置放在自定義頁面配置檔案裡。

二、實現的步驟

以下說下幾個要點：

1、自定義導航欄文字，是否顯示返回，是否顯示返回首頁,導航欄高度

2、statusBarHeight，用來獲取手機狀態列的高度，這個需要在全域性app.js中的onLaunch，呼叫wx.getSystemInfo獲取，navigationBarHeight+預設的高度，這個是設定整個導航欄的高度，

3、還有注意的，在寫樣式距離和大小時建議都用px，因小程式右邊的膠囊也是用的px，不是rpx。

4、因為自定義導航欄每個頁面都要寫，所以把導航欄封裝了公共元件，這樣只需要在每個頁面引入即可。

如下是封裝的導航欄元件：

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>

這裡有個需注意的問題，就是一般會出現自定義導航欄，下拉頁面，導航欄也隨著會下拉，這種問題是因為設定fixed後頁面元素整體上移了navigationBarHeight，所以在此元件裡設定一個空白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": {}
}

最終還需要考慮下版本相容的問題，畢竟還有一些使用者，微信版本並沒有更新到最新版本。

首先可以在app.js裡面獲取下當前使用者的微信版本，做下版本比較，如果小於這個版本，設定個全域性變數，也可以在元件寫個方法，在不同的頁面開啟顯示不同的頂部導航欄，或者可以控制是否顯示導航欄，這裡就不詳細說了。

親自試了下，在低於7.0版本的微信中，如果採用單頁面自定義導航欄，會出現兩個導航欄，這時候通過判斷版本號不要再渲染自定義的導航欄元件了，在頁面的配置檔案裡寫上title名，還有相應的背景色，這樣就會顯示自帶的導航欄了。

總結

小程式開發是有些坑的地方，從不支援自定義導航欄，到支援全域性自定義導航欄，再到現在的支援單頁面配置，可以看出在慢慢完善。還有底部tabbar，可自己選擇配置的太少了，雖然也支援自定義，但是發現自定義寫的底部導航元件體驗並不好，每次開啟頁面都會重新渲染底部的按鈕，如果全部寫成在一個頁面裡的tab切換，雖然按鈕每次不用重新載入了，但是業務多肯定不行，寫到一個單頁面裡東西也太多了。 希望微信能夠多新增或放開一些功能，讓開發者更好的服務於產品，給使用者更好的體驗。

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃程式設計、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家

相關推薦