本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于移動(dòng)端H5開(kāi)發(fā)遇到的問(wèn)題及解決方法，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

微信分享簽名錯(cuò)誤invalid signature

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

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

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

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

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

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

解決的辦法是頁(yè)面進(jìn)入的時(shí)候記錄url，如果是iOS設(shè)備那么使用這個(gè)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]) }

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

往返緩存問(wèn)題

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

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

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

這種寫法new Date("2019-01-01 00:00:00")在安卓端是支持的，但是在IOS端不支持，會(huì)報(bào)NAN錯(cuò)誤，所以需要把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, '/')

微信二維碼

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

IOS中無(wú)法點(diǎn)擊

span,p 等默認(rèn)無(wú)法點(diǎn)擊的標(biāo)簽, IOS中監(jiān)聽(tīng)click事件點(diǎn)擊無(wú)效
解決辦法，添加 cursor: pointer;

audio音頻無(wú)法播放

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

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

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

fixed問(wèn)題

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

本篇文章到這里就已經(jīng)全部結(jié)束了，更多其他精彩內(nèi)容可以關(guān)注PHP中文網(wǎng)的HTML5視頻教程欄目！