微信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微信客户端内，若是页面连接中含有未转码的特殊字符，可能会致使二维码没法识别

以上

若是遇到新的问题会继续更新

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程