行動端H5開發遇到的問題及解決方法

這篇文章帶給大家的內容是關於行動端H5開發遇到的問題及解決方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

微信分享簽章錯誤invalid signature

vue單頁應用history模式下微信分享一直提示簽章錯誤invalid signature

依照微信官網文檔，已經引入jssdk，正確的配置js安全域名，後台開發人員產生的簽名也透過微信簽名工具驗證，但是前端的自訂分享一直報簽名錯誤，沒有辦法自訂分享，如果確保了哪些基本配置沒有問題，並且簽名也通過了微信簽名工具驗證，那麼可能就是前端訪問的url和後台生成簽名的url不一致導致的簽名錯誤

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

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

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

這是因為history模式下視圖是透過pushState來切換的，但是IOS微信客戶端（安卓客戶端已經修復了）不支援pushState的H5新特性，所以路由變化了但是微信瀏覽器取得到的url沒有變化，右上角複製連結發現，微信記錄的url還是第一次進入時的url，除非你手動刷新，或者使用window.location等頁面跳轉方法刷新，才能獲取到最新的url

解決的辦法是頁面進入的時候記錄url，如果是iOS設備那麼使用這個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設備，只要取得簽署的url和微信記錄的url一致簽章就是正確的

往返快取問題

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

如果是Vue單頁應用，並且使用了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, '/')

微信二維碼

一個頁面可能有多個二維碼，但長按識別二維碼只能辨識最後一個二維碼，這個時候我們需要控制頁面視覺區域內只能出現一個二維碼

IOS中無法點擊

span,p 等預設無法點擊的標籤, IOS中監聽click事件點擊無效
解決方法，加入 cursor: pointer;

audio音訊無法播放

audio.play() 方法在安卓裝置可以正常播放，但是在IOS客戶端不能播放，在設定了audio的src之後，我們需要加上這一行程式碼
audio.load() 去載入音訊

可以透過監聽loadeddata方法看音訊是否可以開始播放了，安卓設定在音訊載入好了之後就開始播放，但是iOS端可能稍微有延遲，這個時候我們可以透過audio.currentTime取得到音訊是否開始播放,這個值大於0就表示已經開始播放了

IOS行動端click事件300ms的延遲回應

fixed問題

在ios8以下系統，當小鍵盤啟動時，都會出現位置浮動問題，解決方法：只需要在中間部分外層p加上css樣式
position:fixed;top:50px; bottom:50px;overflow:scroll;

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的HTML5影片教學欄位！

以上是行動端H5開發遇到的問題及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！