成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

移動(dòng)端H5開(kāi)發(fā)遇到的坑

Eirunye / 1886人閱讀

摘要：微信分享簽名錯(cuò)誤單頁(yè)應(yīng)用模式下微信分享一直提示簽名錯(cuò)誤按照微信官網(wǎng)文檔，已經(jīng)引入，正確的配置安全域名，后臺(tái)開(kāi)發(fā)人員生成的簽名也通過(guò)微信簽名工具驗(yàn)證，但是前端的自定義分享一直報(bào)簽名錯(cuò)誤，沒(méi)有辦法自定義分享，如果確保了哪些基本配置沒(méi)有問(wèn)題，并且

微信分享簽名錯(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微信客戶(hù)端（安卓客戶(hù)端已經(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的話(huà)，頁(yè)面也不會(huì)刷新，這時(shí)候一些接口請(qǐng)求等可以放在beforeRouteEnter方法中

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

這種寫(xiě)法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,div 等默認(rèn)無(wú)法點(diǎn)擊的標(biāo)簽, IOS中監(jiān)聽(tīng)click事件點(diǎn)擊無(wú)效
解決辦法，添加 cursor: pointer;

audio音頻無(wú)法播放

audio.play() 方法在安卓設(shè)備可以正常播放，但是在IOS客戶(hù)端不能播放，在設(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)小鍵盤(pán)激活時(shí)，都會(huì)出現(xiàn)位置浮動(dòng)問(wèn)題，解決方法：只需要在中間部分外層div添加css樣式
position:fixed;top:50px; bottom:50px;overflow:scroll;

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109236.html

相關(guān)文章

  • 分享一些遇到的好文章

    摘要：移動(dòng)端布局總結(jié)移動(dòng)端全兼容的移動(dòng)端知識(shí)涵蓋偽類(lèi)等全移動(dòng)端不得不講的頭標(biāo)簽移動(dòng)端自適應(yīng)方案移動(dòng)端適配總結(jié)布局新舊混合寫(xiě)法詳解兼容微信使用實(shí)現(xiàn)手淘頁(yè)面的終端適配淘寶彈性布局方案實(shí)踐理解所需的知識(shí)產(chǎn)生的小數(shù)像素問(wèn)題高性能動(dòng)畫(huà)動(dòng)畫(huà)的性能優(yōu)化處理和動(dòng) 移動(dòng)端rem布局總結(jié) 移動(dòng)端全兼容的flexbox 移動(dòng)端知識(shí)(涵蓋、css、偽類(lèi)等)【全】 移動(dòng)端不得不講的頭標(biāo)簽 移動(dòng)端自適應(yīng)方案 移動(dòng)端適...

    Tikitoo 評(píng)論0 收藏0

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢(qián)包騰訊服務(wù)界面網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。 grid實(shí)戰(zhàn)之微信錢(qián)包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開(kāi)發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...

    Clect 評(píng)論0 收藏0

  • 2016年終工作總結(jié)

    摘要：由于初版需求及開(kāi)發(fā)工作都沒(méi)有參與，在接手項(xiàng)目后過(guò)了遍前端結(jié)構(gòu)發(fā)現(xiàn)所有交互及組件都是現(xiàn)擼，并未使用市面上已有的優(yōu)秀前端框架從我個(gè)人角度理解上出發(fā)，后續(xù)需求變更中當(dāng)需要實(shí)現(xiàn)某些常用組件樣式或交互時(shí)，基本上都需要現(xiàn)擼或者尋找合適的組件。 2016悄無(wú)聲息的過(guò)去了，再過(guò)不久便是農(nóng)歷新年 這幾天相對(duì)清閑梳理了一下去年所做的工作，希望在新的一年能發(fā)展的更好 今年一共研發(fā)或升級(jí)了五款產(chǎn)品：合伙人、奪...

    hoohack 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)：那些我遇到的bug (持續(xù)更新)

    摘要：暫未找到完美的解決方法，各位看官發(fā)現(xiàn)了記得評(píng)論提醒一下安卓移動(dòng)端瀏覽器設(shè)置無(wú)效，無(wú)法多選圖片問(wèn)題該問(wèn)題同樣暫未找到完美的解決方案別的現(xiàn)在一下子想不起來(lái)了。。。 從事前端開(kāi)發(fā)將滿(mǎn)一年了，期間遇到不少問(wèn)題，最坑的是一些自己不知道的坑。所以寫(xiě)出來(lái)警示后人。 1. ios端的sort方法無(wú)效描述：之前做一個(gè)小程序的聊天列表的時(shí)候需要用到sort進(jìn)行列表排序。嗯，后來(lái)有用戶(hù)反應(yīng)最新回復(fù)不置頂。。...

    曹金海 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<