微信web开发遇到的坑

caige 发布于2019-08-21 11:42 / 2948人阅读

摘要：由于苹果的限制必须配合微信接口做处理。中已修复标签的设置，会影响二维码识别我试出来的微信客户端内，如果页面链接中含有未转码的特殊字符，可能会导致二维码无法识别以上如果遇到新的问题会继续更新

缓存控制 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微信客户端内，如果页面链接中含有未转码的特殊字符，可能会导致二维码无法识别

以上

如果遇到新的问题会继续更新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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