摘要
最近在開發H5，就在開發程序中發現H5存在著一些坑，所以就總結一下在開發程序中遇到的坑以及解決辦法，本文會持續的更新，同時也歡迎大家一起評論分享H5開發中遇到的坑、解決辦法等，
常見的通用的H5開發問題
·微信自定義分享縮略圖失效
問題現象：微信自定義分享時，需要更換新的縮略圖，但是在更換上新縮略圖后，分享微信鏈接給朋友時，縮略圖顯示失效，具體問題如下圖所示：
解決方案： 經過debugger對比新舊兩張縮略圖的資訊發現，當縮略圖的大小太小時，無法獲取到正常的縮略圖地址url，調研了解到微信自定義分享時，縮略圖大小需要10K以上，調整圖片大小資訊即可解決問題，
IOS端-H5開發問題
· 輸入法隱藏頁面留白
問題現象：iOS端軟鍵盤失去焦點（隱藏）后，頁面不會回彈，頁面下方會留下輸入法塊的白色塊，
暴力解決方案：軟鍵盤收起（隱藏）后，滾動一下頁面，頁面中的留白塊塊就會消失，所以只要在輸入完畢后實作一下‘滾動’的操作就可以解決問題，
React(React Hook)暴力開發解決方案：（代碼實作部分）
// 輸入鍵盤隱藏回彈
useEffect(() => {
document.addEventListener('focusout', function(e) {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS) {
window.scrollTo(0, 0);
}
})
},[])
*注：這個ios軟鍵盤收起留白解決方案適應性不全（只適合表單中僅有一個input輸入框且為單頁面），表單中擁有多個input輸入框時，切換input時也會觸發scrollTo方法,造成input回彈閃爍例外問題，
問題現象: 存在多個input輸入框且頁面可以滾動時，切換輸入框產生回彈閃爍，影響用戶體驗；同時iOS微信中依舊存在軟鍵盤收起留白問題，
終極解決方案: 經過調研了解到微信版本6.7.4以上會出現該問題，首先判斷當前的設備以及當前微信版本號；其次當軟鍵盤收起時，設定setTimeout方法，模擬軟鍵盤彈起；最后獲取當前滾動高度位置，軟鍵盤收起滾動回當前滾動高度減1的位置即可，
React(React Hook)終極開發解決方案：（代碼實作部分）
useEffect(() => { // 軟鍵盤收起事件處理 const onFocusout = () => { let u = navigator.userAgent; let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 let wechatInfo = u.match(/MicroMessenger\/([\d\.]+)/i); // WeChat let wechatVersion = wechatInfo[1]; if (isiOS && wechatVersion >= '6.7.4') { setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); } }// 加載組件添加事件監聽 document.body.addEventListener('focusout', () => { onFocusout() }); // 卸載組件清除事件監聽 return () => { document.body.removeEventListener('focusout', () => { onFocusout() }); } },[])
·長按二維碼無法識別
問題現象：在ios中，部分iPhone機型（大螢屏、高解析度等）微信中長按二維碼無法識別，具體bug錯誤現象如下圖所示，
解決方案：添加padding、給二維碼添加透明的二維碼識別區，增加二維碼的識別面積；簡化二維碼周圍的資訊元素，增加二維碼計算識別度，
React開發解決方案：（代碼實作部分）
HTML部分：
import obbyMD from '@/assets/images/obby-majordomo.png';<div className="obby-QRcode">
<div className="code-img-2">
<img src=https://www.cnblogs.com/BlueBerryCode/p/{obbyMD} className="obbyMD-code" alt="二維碼"/>
<img src=https://www.cnblogs.com/BlueBerryCode/p/{obbyMD} className="code" style={{ opacity: 0 }} alt="透明二維碼"/>
</div>
<div className="obby-md-text">聯系小管家</div>
</div>
CSS公共部分：
@mixin QRCode {
background: #fdac6d;
border: 2px solid #f3a365;
box-shadow: inset 0 1px 10px 1px #f28a4c;
border-radius: 3.3vw;
}
CSS二維碼部分：
.obby-QRcode {
@include QRCode;
padding: 2.4vw;
margin: 6vw auto 3vw;
& .code-img-2 {
position: relative;
display: block;
margin: 0 auto;
width: 10rem;
height: 10rem;
& .obbyMD-code {
position: absolute;
display: block;
width: 10rem;
height: 10rem;
top: 0;
left: 0;
}
& .code {
position: absolute;
display: block;
margin: 0 auto 0;
width: 10rem;
height: 10rem;
top: -5rem;
left: -5rem;
opacity: 0;
}
}
.obby-md-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 2vw;
letter-spacing: 0.5vw;
font-family: Source Han Sans CN;
font-weight: 500;
color: #7D3100;
}
}
問題現象：增加二維碼識別面積后，iPhone高版本機型可以長按識別，但在使用程序中會突然就復現無法識別問題，
解決方案：經過測驗，二維碼組件頁面識別沒有問題，由上一級路由跳轉過來二維碼組件就會復現無法識別問題；路由跳轉方式用的react-router的history.push方式，更換跳轉方式為window.location.href = "https://www.cnblogs.com/BlueBerryCode/p/跳轉路由"即可解決，
·ios只加載首屏資訊
問題現象：掃碼進入H5頁面（可滾動頁面），頁面首屏存在圖片資源資訊，當頁面滾動后，頁面資訊無法加載，具體問題現象如下圖所示：
解決方案：汲取網上的開發經驗發現，在H5滾動容器的樣式里加了一個overflow：hidden，去掉該樣式屬性就解決問題，
Android端-H5開發問題
·video層級問題
問題現象：點擊登錄彈窗可以正常顯示，在點擊播放視頻后，video層級變成了最高級，再次點擊登錄彈窗被video遮擋了，無論怎么給登錄彈窗z-index都無法正常顯示彈窗，
解決方案：Android微信內置瀏覽器是X5內核，X5內核中默認了video的層級是最高級別，所以改變z-index沒有辦法改變層級顯示問題，在使用video標簽時可以加上 x5-video-player-type='h5-page'的屬性，這時就把H5中的video就啟用了同層H5播放器，這樣就可以調整video、彈窗等層級的顯示，（H5同層播放器接入規范：https://x5.tencent.com/tbs/guide/video.html）
React開發解決方案：（代碼實作部分）
<video
id="player"
controls={true}
width="100%"
height="100%"
x5-video-player-type="h5-page" // 啟用同層H5播放器
x5-video-orientation="landscape|portrait" // 視頻跟著手機自動旋轉
>
<source src=https://www.cnblogs.com/BlueBerryCode/p/{videoUrl} type="video/mp4" />
</video>
CSS樣式代碼：
video {
object-fit: fill;
object-position: center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/116215.html
標籤：JavaScript
上一篇：Vue.js 條件與回圈