H5手機端開發問題彙總及解決方案

前言

少俠，請留步，相見必是緣分，贈與你一部《踏坑祕籍》

扎馬步

踏坑第一式

ios豎屏拍照上傳，圖片被旋轉問題

解決方案

// 幾個步驟
// 1.經過第三方插件exif-js獲取到圖片的方向
// 2.new一個FileReader對象，加載讀取上傳的圖片
// 3.在fileReader的onload函數中，獲得的圖片文件用一個Image對象接收
// 4.在image的onload函數中，利用步驟1中獲取到的方向orientation，經過canvas旋轉校訂，從新繪製一張新圖
// 注意iPhone有3個拍照方向須要處理，橫屏拍攝，home鍵在左側，豎屏拍攝，home建上下
// 5.將繪製的新圖轉成Blob對象，添加到FormData對象中，而後進行校訂後的上傳操做
// 代碼有點雜，待整理後上傳，網上應該是能夠找到的

踏坑第二式

ios：DOM元素固定一邊，另外一邊滾動，滾動很卡的問題

// (橫向滾動用的多些)簡單粗暴的辦法，樣式添加以下屬性
-webkit-overflow-scrolling: touch;

踏坑第三式

部分手機第三方輸入法會將頁面網上擠的問題

// 特定需求頁面，好比評論頁面，輸入框在頂部之類的
const interval = setInterval(function() {
    document.body.scrollTop = 0;
}, 100)
// 注意關閉頁面或者銷燬組件的時候記得清空定時器
clearInterval(interval);

踏坑第四式

iPhoneX適配

// 1.viewport meta 標籤增長屬性viewport-fit=cover
<meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
// 2.body元素增長樣式
body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
// 3.若有fixed底部的元素，也增長上面樣式
xxx {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff; // 記得添加background-color，否則會出現透明鏤空的狀況
}

踏坑第五式

某些機型不支持video標籤的poster屬性，特別是安卓

用圖片元素 <img />來代替poster
 播放前顯示<img />，隱藏 <video />
 播放後顯示<video />，隱藏 <img />

踏坑第六式

CSS透明度顏色設置問題

Android部分不支持 hex寫法，推薦用rgba的寫法
#0000009c --> rgba(0, 0, 0, 0.61)

踏坑第七式

flex對低版本的ios和Android的支持問題

使用postcss的autoprefixer插件，自動添加瀏覽器內核前綴，
而且增長更低瀏覽器版本的配置，自動添加flex老版本的屬性和寫法
autoprefixer({
    browsers: [
        'iOS >= 6',     // 特殊處理支持低版本IOS
        'Safari >= 6',  // 特殊處理支持低版本Safari
    ],
}),

踏坑第八式

ios 頁面回退到長列表出現灰色遮擋問題

方案1：對列表數據進行緩存，好比redux之類的用法。
方案2：回退時，跳到頁面頂部。
const timer = setTimeout(() => {
    window.scrollTo(0, 1);
    window.scrollTo(0, 0);
}, 0);

踏坑第九式

ios 日期轉換NAN的問題

將日期字符串的格式符號替換成'/'。
栗子：'yyyy-MM-dd'.replace(/-/g, '/')

踏坑第十式（React）

未知錯誤異常，致使頁面崩潰，空白

React 16.x 增長了componentDidCatch() 生命週期方法
捕獲全局異常來進行頁面的友好提示（具體用法網上有不少資料）

打完收招

晉級還須要多多修煉

前端攻城獅②羣：592688854。歡迎感興趣的各路武林豪傑加入。