小程式navigationStyle: custom 下web-view高度異常填坑

MarsDes發表於2018-10-02
NavigationWebView

官方文件
重點是微信版本6.7.2及以後navigationStyle: custom 自定義導航對web-view元件無效，導致不同系統手機不同微信版本號表現迥異。需要開發考慮到多種情況的相容。

情況分析

目前我在開發中主要遇到以下幾種情況,歡迎留言補充

  1. 微信版本號6.7.2以下的手機，需要再h5頁面模擬小程式的navigationBar；
  2. 微信版本號6.7.2級以上的蘋果機型，小程式自帶原生navigationBar，無需在h5頁面模擬;
  3. 微信版本號6.7.2及以上的安卓手機，小程式自帶原生navigationBar，無需在h5頁面模擬，但是web-view高度非100%，頁面內容被截，超出半部分為狀態列高度加自定義navigationBar高度。（如下圖所示）
    安卓機機型

解決方案

在小程式判斷微信版本號，獲取手機狀態列高度，在使用web-view元件的頁面，將需要的資訊傳遞過到h5頁面，針對機型做響應的相容處理。

// 小程式程式碼 基於wepy框架
// app.wpy
...
    //獲取系統相關資訊
    onLaunch () {
        try(){
            const sysInfo = wepy.getSystemInfoSync()
            this.statusBarHeight = sysInfo.statusBarHeight
            //以後版本號出現2位情況的話需要末位補0
            this.globalData.h5StatusBarHeight = Number(res.version.replace(/\./g, '')) < 672 ? res.statusBarHeight : 0
        }catch(e){
            console.log('獲取系統資訊異常',e)
        }
    }
複製程式碼
<!-- webview.wpy -->
<template>
    <web-view src="https://url.com?pTop={{pTop}}"></web-view>
</template>
複製程式碼
...
onLoad () {
    this.pTop = this.$parent.globalData.h5StatusBarHeight
}
...
複製程式碼
<!-- h5 app.vue -->
<template>
  <div id="app">
    <div v-if="pTop" class='navbar'>
      <div class='nav'  :style="{paddingTop:pTop+'px'}">
        <div class='nav_l'>
          <div class="back" @click="back">
            <img src="./assets/back_black.svg" />
          </div>
        </div>
        <div class="nav_m">nav標題</div>
        <div class='nav_r'></div>
      </div>
    </div>
    <div :style="{paddingTop:pTop+'px',marginTop:mTop+'rem',paddingBottom:isPbottom?'1.4rem':'0'}">
      <router-view/>
    </div>
  </div>
</template>
複製程式碼
export default {
  name: "app",
  data(){
    return {
      pTop:20,  // 手機狀態列高度
      mTop:0.88, // navbar 高度 
      isPbottom:false // 是否需要padding-bottom
    }
  },
  methods: {
    back () {
      wx.miniProgram.navigateBack()
    }
  },
  created(){
    this.pTop= Number(this.$route.query.pTop)
    // 安卓機
    this.isPbottom = this.pTop===0&&/(Android)/i.test(navigator.userAgent)
    if(!this.pTop){
      this.mTop= 0
    }
  }
};
複製程式碼

其他情景

  1. 底部固定懸浮
<!-- isFixBottom 判斷同理isPbottom -->
<footer :style="{bottom:isFixBottom?'1.4rem':'0'}">
 底部懸浮容器
</footer>
複製程式碼
  1. 頁面內容高度百分百即全屏
<!-- 高度自適應百分百 -->
<style>
    #container {
      height: 100%;
      width: 100%;
      display: table;
    }
    #fixbox{
      display: table-row;
    }
    #view{
      height: 100%;
      width: 100%;
      display: table-row;
    }
</style>
<div>
    <navBar>自定義navbar</navBar>
    <div class='container'>
        <div class='fixbox' :style="{height:isFixBottom?'1.4rem':'0'}"></div>
        <div class='view' :style="{marginTop:isFixBottom?'-1.4rem':'0'}"></div>
    </div>
</div>
複製程式碼
  1. 全屏帶輸入框，鍵盤拉起會導致頁面高度100%，需要監聽鍵盤拉起再做相容...

總結

navigationStyle: custom 目前還是有比較多一言難盡的地方。社群反映的問題也比較多，不排除後期官方會有所調整，專案中除了做相容還有就是根據運營資料檢視使用者機型版本分佈做升級提醒。
1.4這個值怎麼來？ 狀態列高度加navbar高度加安全高度，目前主流機型不表現算正常，當然跟頁面ui也有關係。時間比較緊迫，沒有仔細精算，歡迎補充提供更好的方案

相關文章