微信web開發遇到的坑

caige 發布于2019-08-21 11:42 / 2981人閱讀

摘要：由于蘋果的限制必須配合微信接口做處理。中已修復標簽的設置，會影響二維碼識別我試出來的微信客戶端內，如果頁面鏈接中含有未轉碼的特殊字符，可能會導致二維碼無法識別以上如果遇到新的問題會繼續更新

緩存控制 http接口數據緩存

一直在做spa，應用內的頁面切換沒有接口數據緩存的問題，而從應用內切換到外部再回來的話，如果接口地址參數都不變，那么之前請求過的接口，會使用上一次請求拿到的數據，抓包工具顯示請求根本沒有發生。

解決方法就是：改改參數，比如加個時間戳。

js/css/img

對于靜態資源可以更新文件名（如：文件名加hash），配合gulp，webpack等打包工具都可以實現。

index

嘗試過在html中添加http-equiv的meta標簽來控制response header，但在大部分安卓機上無效。
解決辦法：在html標簽上添加一個不存在的manifest，缺點是會造成一個額外的404請求

緩存控制涉及到http協議的知識，涉及catch control與三種header的用法。https://segmentfault.com/a/11...

音頻 自動播放

Android：沒問題（版本更新后可能會有自動播放失效的問題，懷疑與jssdk的初始化有關）。
iOS：由于蘋果的限制必須配合微信接口做處理。

如果audio標簽和audio資源都是靜態的，那么只需要在wx.ready中調用play方法。如果是延遲的自動播放，那么你可能需要在頁面加載完成后在ready中調用一次load

wx.ready(()=>{
    audio.play();
    // 延遲自動播放
    // audio.load();
})

如果是靜態的audio標簽，而資源路徑是通過接口拿到的，那么就需要把設置資源路徑的操作也放到wx.ready中

wx.ready(()=>{
    audio.src = YOUR_AUDIO_URL;
    audio.play();
})

如果audio標簽是頁面加載后動態創建的，那么iOS版的微信想要實現自動播放貌似是不可能的，至少我是沒有找到明確的方法，在此虛心求教。

對iOS音頻自動播放的通用解決辦法是把音頻播放放在用戶行為回調中，例如：給window添加一個touchstart的eventListener，在callBack中play

window.addEventListener("touchstart", function autoPlay() {
  audioElm.play();
  window.removeEventListener("touchstart", autoPlay, true)
}, true)

wxjssdk 接口權限的獲取

SPA下路由模式只能用hash，config的頁面URL不能攜帶hash部分

接口調用間隔

資源相關（圖片錄音）的接口，調用時需要有一個最小間隔時間，否則會調用失敗，而且不報錯，目前我是給了一個100ms的間隔，除了在首次錄音（喚起權限彈框）時會偶爾返回"too short"，其他接口都能正常運行。

iOS的link不能包含未轉碼的特殊字符，在某些機型上會造成分享失敗。
出現過success回調無法使用HTTPRequest的情況，延遲100ms即可。

二維碼識別問題 網上找到的

二維碼圖片必須放在img標簽里才能識別

一屏內不能出現兩個二維碼

iOS 6.2.2中二維碼的識別位置要比實際位置高64px（標題欄的高度），要在圖片底部加padding。iOS 6.2.4中已修復

viewport meta標簽的設置，會影響二維碼識別

我試出來的

iOS微信客戶端內，如果頁面鏈接中含有未轉碼的特殊字符，可能會導致二維碼無法識別

以上

如果遇到新的問題會繼續更新

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

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

微信網頁開發調用微信jssdk接口遇到的坑以及最終解決方法（持續更新）

摘要：在系統的手機中，其實微信點擊網頁的圖片會自動調用這個接口一次。然后在在下面進行微信的接口的調用判斷是還是終端終端更新這個好像微信自己修復了，現在無論還是，如果不調用這個方法，微信自己不會去調用了。 1.微信網頁開發調用jssdk時報permission denied 大致是兩個原因（1）首先注冊時未將你所調用的接口名字添加至jsApiList （2）第二個就是你的這個公眾號沒有權限使...

Little_XM 2019-08-02 11:00 評論0 收藏0
使用vue開發微信公眾號下SPA站點的填坑之旅

摘要：原文見我的博客，點擊進入使用開發微信公眾號下站點的填坑之旅本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢。原文見我的博客，點擊進入使用vue開發微信公眾號下SPA站點的填坑之旅本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢^_^。 ...

yeyan1996 2019-08-21 15:09 評論0 收藏0
微信小程序開發中遇到的坑和解決辦法

摘要：和部分組件表現的差異微信最小化后正在播放的會暫停，需要再次點擊播放按鈕，如果視頻設置的是不可控，沒有開始播放按鈕，視頻暫停了就無法繼續播放了，沒有該問題。 1、原生組件的層級問題 video、canvas、camera等原生組件層級最高，其他組件無論z-index為多少，都無法覆蓋在原生組件上。這里拿video組件做示例，如果需要點擊視頻支持微信開放能力，例如授權手機號，獲取用戶信息...

princekin 2019-08-23 12:39 評論0 收藏0
參加第二屆前端開發者年度大會總結

摘要：代表公司去參加今年的第二屆前端開發者年度大會，散會的時候，技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完美趁著還記得點什么，在這里做個自我回顧總結，謹代表個人見解，有不當之處，或若涉及圖片隱私或者其它問題，煩請代表公司去參加今年的第二屆前端開發者年度大會，散會的時候，Team 技術老大問我，今天感覺怎么樣，有什么收獲，當時就零零碎碎的回答了一些，不算完...

solocoder 2019-08-19 17:55 評論0 收藏0