[小程式]高適應性的自定義導航欄開發思路

kirian發表於2018-07-06

非自定義導航欄高度怎麼計算？

  1. wx.getSystemInfo 和 wx.getSystemInfoSync 獲取機器資訊
  2. screenHeight - windowHeight 計算標題欄高度
  3. 標題欄高度
  • 'iPhone': 64,
  • 'iPhone X': 88,
  • 'android': 68

—— 不完全統計（ip6 , ip5 , ip6p , ipx , 小米mix2 , 小米5等綜合了開發工具提供的資料和真機資料）所得

自定義導航欄高度由誰決定？

  1. 開發時發現，自定義導航欄的實現需要 包含狀態列+膠囊 ：沒有自定義導航欄的時候頁面是全螢幕滾動會出現在狀態列的下一層
  2. 根據上一標題中步驟1的函式，可以獲得狀態列高度 statusBarHeight
  3. demo地址wechatide://minicode/7rCGPjmQ75PM，點選自動開啟開發工具

小程式自定義導航欄開發注意點與參考文件

  • 微信官方設計指導中關於膠囊按鈕的描述 由此推測膠囊寬度87pt=116px，設定之後，的確能產生較好的相容性效果
  • [2018-07-06]根據測試截圖發現微信膠囊寬度應該在96px左右，還有待研究
  • 社群相關Q&A：自定義標題欄高度計算
  • 使用時注意方法與屬性版本相容性
  • 完善之路：
    1. 開一個專案採集裝置的screenHeight,windowHeight,pixelRatio等資訊到一個資料庫中
    2. 微信提供這樣一個資料庫便於計算，或者微信優化自定義標題欄（譬如通知欄可以改變顏色但不要算在自定義範圍內，給出膠囊寬高到通知欄距離到右側螢幕邊框距離等相關引數）

相關文章