微信小程序_自定義導航

一、爲何須要自定義導航欄

何時開始支持

微信客戶端7.0.0 - 新增 框架 支持頁面級自定義導航配置 navigationStyle: custom。

基礎版本庫 v1.9.5 (2018.01.24)， 新增 配置 window.navigationStyle 支持全屏顯示小程序 詳情

目前支持全局的配置和單個頁面的配置兩種：

"navigationStyle": "custom"
複製代碼

二、如何實現與官方同樣效果導航條，以及如何擴展？

• 手機頂部信息欄的高度
• 微信小程序膠囊位置信息

微信小程序提供的API

• wx.getSystemInfo() 異步獲取系統信息
• wx.getSystemInfoSync() 同步獲取用戶信息
• wx.getMenuButtonBoundingClientRect() 小程序膠囊的位置新信息

注意咱們可以拿到的數值單位是 px 不是 rpx。【以後我也寫一篇專門探究小程序單位】

wx.getSystemInfo({
    success: (res) => {
     // iphone6.statusBarHeight = 20
     this.globalData.statusBarHeight = res.statusBarHeight; 
     let custom = wx.getMenuButtonBoundingClientRect();
     this.globalData.custom = wx.getMenuButtonBoundingClientRect();
     this.globalData.Custom = custom;
     this.globalData.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
     // 另外一種計算方式
     this.globalData.CustomBar =custom.height + ( custom.top - res.statusBarHeight) * 2;
    }
})
複製代碼

let custom = wx.getMenuButtonBoundingClientRect();
複製代碼

代碼演示

咱們用iphoneX的模擬器爲例子，由於iphoneX的信息導航欄比較高與別的不一樣，咱們從特殊的更加明顯。

<view class="bg" style="height:{{statusBarHeight}}px"></view>
<view class='jiaonang' style='margin-top:{{custom.top - statusBarHeight}}px; height:{{custom.height}}px'>
</view>
複製代碼

let app = getApp();
Page({
    data: {
        statusBarHeight: app.globalData.statusBarHeight,
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        custom: app.globalData.custom
    }
})
複製代碼

.bg {
  width: 100%;
  height: 50rpx;
  background: teal;
}

.jiaonang {
  width: 100%;
  background: red;
}
複製代碼

如下是微信小程序模擬器的不一樣的結果

• iphoneX 的效果

• iphone6 的效果

• 安卓Nexus5x 的效果

• 平板iPad Air 2 的效果

• ipad Pro 12.9-inch 的效果

三、如何適配不一樣的機型？？

不一樣機型的適配一直是前端的最嚴重的問題，小程序對適配問題提出了rpx的方案。 可是對於自定義導航欄，咱們彷佛用不到的自定義導航欄！

三、注意

客戶端 6.7.2 版本開始，navigationStyle: custom 對 <web-view> 組件無效。

後記

1. 其實小程序是特別的適合，沒有開發經驗入門或者轉行前端的同志~
2. 學會斷點調試，學會排除錯誤，纔是正道啊~
3. 我想學的細一點，路才走的廣一點~