App內嵌webview踩坑

爲移動端h5頁面遇到的問題作些記錄

1、樣式部分

• 1.1 基本樣式

object-fit:fill; //video鋪滿父元素
 -webkit-appearance:none; //消除iOS輸入框的內陰影

• 1.2 劉海屏安全區域

因爲iphoneX之後的版本劉海屏和底部不是完整的方型區域，形成頁面顯示異常。處理方式是頁面將劉海屏和底部的區域排除在外使用中間部分，即所謂的安全區域。

iphoneX提供的meta頭

<meta name="viewport" content="viewport-fit=contain"> //可視化窗口徹底包含網頁內容
<meta name="viewport" content="viewport-fit=cover"> //網頁內容徹底覆蓋
<meta name="viewport" content="viewport-fit=auto"> //默認值和contain同樣

若是要適配劉海屏必需要使用cover的模式

安全區域涉及四個值

safe-area-inset-left //安全區域距離左邊邊界距離
safe-area-inset-righ //安全區域距離右邊邊界距離
safe-area-inset-top //安全區域距離頂部邊界距離
safe-area-inset-bottom //安全區域距離底部邊界距離

左右距離通常爲0，應該是頁面橫屏是纔會用到
兩個在css配合使用的函數：env和constant；env必須iOS>=11.2才支持，constant相反在iOS<11.2版本下使用。
例如：若是咱們的頭部標題navbar使用position:fixed的時候須要改寫成以下

.navbar{
    top:0;
    top:constant(safe-area-inset-top);
    top:env(safe-area-inset-top);/* 減去安全區域上邊距 */
}

個人處理方式是使用position:relative減掉邊距，內部內容區域使用position:absolute
相關連接:h5 在全屏iphonex中的適配

2、交互部分

• 2.1 App向h5通訊

將方法定義在window下，即定義成全局便可

• 2.2 h5向App通訊

iOS： window.webkit.messageHandlers[約定的名稱，如項目測名稱]postMessage(參數)
Android：window約定的名稱，如項目測名稱 (參數)

• 2.3 h5頁面活躍或隱藏狀態切換

這個是瀏覽器原生支持的方法，經過監聽狀態變化，具體例子以下；

const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
document.addEventListener('visibilitychange', () => {
  if (document[hiddenProperty]) {
    //當離開H5 跳轉到app原生的頁面時,這裏會被觸發
    // Toast('頁面隱藏了');

  } else {
    //當從原生頁面用戶一系列操做後,返回H5的時候,這裏會被觸發
    // Toast('頁面展現了');
  }
});

3、兼容性處理

• 3.1 安卓上傳圖片

安卓端的webview，使用<input type='file'>上傳圖片異常，選中圖片後沒法回顯到頁面。解決方法是原生處理，以下連接；(處理完後安卓使用h5上傳圖片會使用相冊的照片而不會有拍照選項；這裏雖然不影響使用，或許能夠進一步優化）
相關連接:Android WebView 不支持 H5 input type="file" 解決方法

• 3.2 頁面元素顯示位置與真實位置有偏差

場景：彈框中的輸入框聚焦時會彈出手機的軟鍵盤，而後收起鍵盤會發現，彈框中的按鈕或者關閉沒法點擊。

當時誤覺得是什麼問題使頁面"卡"住了，後面通過觀察嘗試，發現是頁面發生滑動致使的。當軟鍵盤彈出時，會把webview的可視區域向上滾動一段距離，而軟鍵盤收起時位置沒有還原回來致使頁面發生偏移，監聽scrollY就會看到變化過程。"卡"住產生的緣由就是位置變了，這裏比較玄學的就是實際位置變了，按鈕卻顯示在正常的位置，也致使開始沒即便定位問題緣由。

解決方法：經過監聽輸入框的聚焦失焦，當發生失焦時(失焦時正好軟鍵盤也收起了)使用window.scrollTo(0,0)將頁面回到正常的位置

4、其餘總結

由於前端項目都使用Vue框架，這裏移動端頁面UI庫，對比mint-ui,最後選擇了Vant