移動端H5開發遇到的坑

Eirunye 發布于2019-08-26 13:39 / 1859人閱讀

摘要：微信分享簽名錯誤單頁應用模式下微信分享一直提示簽名錯誤按照微信官網文檔，已經引入，正確的配置安全域名，后臺開發人員生成的簽名也通過微信簽名工具驗證，但是前端的自定義分享一直報簽名錯誤，沒有辦法自定義分享，如果確保了哪些基本配置沒有問題，并且

微信分享簽名錯誤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,div 等默認無法點擊的標簽, IOS中監聽click事件點擊無效
解決辦法，添加 cursor: pointer;

audio音頻無法播放

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

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

IOS移動端click事件300ms的延遲響應 fixed問題

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

云服務器 GPU云服務器移動端webrtc h5 H5移動端上傳圖片移動端開發 web移動端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109236.html

分享一些遇到的好文章

摘要：移動端布局總結移動端全兼容的移動端知識涵蓋偽類等全移動端不得不講的頭標簽移動端自適應方案移動端適配總結布局新舊混合寫法詳解兼容微信使用實現手淘頁面的終端適配淘寶彈性布局方案實踐理解所需的知識產生的小數像素問題高性能動畫動畫的性能優化處理和動移動端rem布局總結移動端全兼容的flexbox 移動端知識(涵蓋、css、偽類等)【全】移動端不得不講的頭標簽移動端自適應方案移動端適...

Tikitoo 2019-08-20 14:49 評論0 收藏0
移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
2016年終工作總結

摘要：由于初版需求及開發工作都沒有參與，在接手項目后過了遍前端結構發現所有交互及組件都是現擼，并未使用市面上已有的優秀前端框架從我個人角度理解上出發，后續需求變更中當需要實現某些常用組件樣式或交互時，基本上都需要現擼或者尋找合適的組件。 2016悄無聲息的過去了，再過不久便是農歷新年這幾天相對清閑梳理了一下去年所做的工作，希望在新的一年能發展的更好今年一共研發或升級了五款產品：合伙人、奪...

hoohack 2019-06-27 15:14 評論0 收藏0
前端開發：那些我遇到的bug (持續更新)

摘要：暫未找到完美的解決方法，各位看官發現了記得評論提醒一下安卓移動端瀏覽器設置無效，無法多選圖片問題該問題同樣暫未找到完美的解決方案別的現在一下子想不起來了。。。從事前端開發將滿一年了，期間遇到不少問題，最坑的是一些自己不知道的坑。所以寫出來警示后人。 1. ios端的sort方法無效描述：之前做一個小程序的聊天列表的時候需要用到sort進行列表排序。嗯，后來有用戶反應最新回復不置頂。。...

曹金海 2019-08-30 14:02 評論0 收藏0