這篇文章主要介紹如何解決移動端H5開發(fā)遇到的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為海城等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及海城網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、海城網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

微信分享簽名錯誤invalid signature

vue單頁應(yīng)用history模式下微信分享一直提示簽名錯誤invalid signature

按照微信官網(wǎng)文檔，已經(jīng)引入jssdk，正確的配置js安全域名，后臺開發(fā)人員生成的簽名也通過微信簽名工具驗證，但是前端的自定義分享一直報簽名錯誤，沒有辦法自定義分享，如果確保了哪些基本配置沒有問題，并且簽名也通過了微信簽名工具驗證，那么可能就是前端訪問的url和后臺生成簽名的url不一致導致的簽名錯誤

前端如果是通過ajax將url傳到后端獲取簽名，那么我們需要將當前頁面除去'#'hash部分的鏈接，并且需要encodeURIComponent

let url = location.href.split('#')[0]
encodeURIComponent(url)

正常來說這樣就可以實現(xiàn)微信自定義分享了，但是單頁應(yīng)用路由切換了之后IOS端還是提示簽名錯誤，安卓端沒有問題

這是因為history模式下視圖是通過pushState來切換的，但是IOS微信客戶端（安卓客戶端已經(jīng)修復了）不支持pushState的H5新特性，所以路由變化了但是微信瀏覽器獲取到的url沒有變化，右上角復制鏈接發(fā)現(xiàn)，微信記錄的url還是第一次進入時的url，除非你手動刷新，或者使用window.location等頁面跳轉(zhuǎn)方法刷新，才能獲取到最新的url

解決的辦法是頁面進入的時候記錄url，如果是iOS設(shè)備那么使用這個url獲取微信簽名

router.afterEach(to => {
  sessionStorage.setItem('currentUrl',window.location.href)
})
let url = encodeURIComponent(location.href.split('#')[0])
if(system == "iOS" && sessionStorage.getItem('currentUrl')) {
  url = encodeURIComponent(sessionStorage.getItem('currentUrl').split('#')[0])
}

這個時候拿這個url去獲取微信簽名就是正確的了，該方法只適合IOS設(shè)備，只要獲取簽名的url和微信記錄的url一致簽名就是正確的

往返緩存問題

點擊瀏覽器的前進和回退，有時候不會自動執(zhí)行js，特別是在safari中，這與往返緩存(bfcache)有關(guān)系。
解決方法 ：window.onunload = function(){};

如果是Vue單頁應(yīng)用，并且使用了keep-alive的話，頁面也不會刷新，這時候一些接口請求等可以放在beforeRouteEnter方法中

IOS端不支持new Date("2019-01-01 00:00:00") 這種格式

這種寫法new Date("2019-01-01 00:00:00")在安卓端是支持的，但是在IOS端不支持，會報NAN錯誤，所以需要把new Date("2019-01-01 00:00:00")改成new Date("2019/01/01 00:00:00")這種形式

let date = '2019-01-01 00:00:00'
date.replace(/\-/g, '/')

微信二維碼

一個頁面可能有多個二維碼，但是長按識別二維碼只能識別最后一個二維碼，這個時候我們需要控制頁面可視區(qū)域內(nèi)只能出現(xiàn)一個二維碼

IOS中無法點擊

span,p 等默認無法點擊的標簽, IOS中監(jiān)聽click事件點擊無效
解決辦法，添加 cursor: pointer;

audio音頻無法播放

audio.play() 方法在安卓設(shè)備可以正常播放，但是在IOS客戶端不能播放，在設(shè)置了audio的src之后，我們需要加上這一行代碼
audio.load() 去加載音頻

可以通過監(jiān)聽loadeddata方法看音頻是否可以開始播放了，安卓設(shè)置在音頻加載好了之后就開始播放，但是iOS端可能稍微有延遲，這個時候我們可以通過audio.currentTime獲取到音頻是否開始播放,這個值大于0就說明已經(jīng)開始播放了

IOS移動端click事件300ms的延遲響應(yīng)

fixed問題

在ios8以下系統(tǒng)，當小鍵盤激活時，都會出現(xiàn)位置浮動問題，解決方法：只需要在中間部分外層p添加css樣式
position:fixed;top:50px; bottom:50px;overflow:scroll;

以上是如何解決移動端H5開發(fā)遇到的問題的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標題：如何解決移動端H5開發(fā)遇到的問題-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://aaarwkj.com/article36/pjgpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、用戶體驗、域名注冊、定制開發(fā)、ChatGPT、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)