微信web開發遇到的坑

時間 2019-11-09

標籤微信 web 開發遇到欄目 HTML 简体版

原文原文鏈接

緩存控制

http接口數據緩存

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

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

js/css/img

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

index

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

<html manifest="NOT_EXIST.manifest">

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

音頻

自動播放

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

若是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部分ui

接口調用間隔

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

分享

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

二維碼識別問題

網上找到的

二維碼圖片必須放在img標籤裏才能識別
一屏內不能出現兩個二維碼
iOS 6.2.2中二維碼的識別位置要比實際位置高64px（標題欄的高度），要在圖片底部加padding。iOS 6.2.4中已修復
viewport meta標籤的設置，會影響二維碼識別

我試出來的

iOS微信客戶端內，若是頁面連接中含有未轉碼的特殊字符，可能會致使二維碼沒法識別

以上

若是遇到新的問題會繼續更新

相關文章

相關標籤/搜索

微信小程序遇到的坑

微信開發|PHP

Flask Web開發

Python web開發

Web Services 教程

瀏覽器信息

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<