• <track id="em4g6"><strike id="em4g6"></strike></track>
      1. 教育改變生活,株洲科泰成就夢想!
        報名熱線:0731-28161709

        教學課堂CLASSROOM

        開班信息
        熱門話題
        web開發
        目前所在位置: 首頁 > web開發

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

        來源:北大青鳥科泰校區時間:2019-04-09

        內容提要: 北大青鳥科泰IT培訓學院為大家提供移動端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;

        相關推薦
        ?
        聯系我們

        掃碼關注科泰

        電話咨詢:0731-28161709

        學校地址:株洲市云龍示范區北大青鳥株洲科泰校區

        留言咨詢

        Copyright 株洲科泰信息有限公司 版權所有__湘ICP備19017566號

        久久久久亚洲精品无码网址色欲

      2. <track id="em4g6"><strike id="em4g6"></strike></track>