跳至主要內容

微信小程序坑点记录

Cap原创大约 4 分钟

web-view 组件的配置问题

业务域名配置

文件预览的兼容问题

  • 问题： 当使用 web-view 组件去预览 pdf文件的时候，安卓机型会有无法预览的问题。

  • 解决方案： 使用先下载再预览的方式, Taro.downloadFile → Taro.openDocument

分享朋友圈问题

  • 问题： 分享到朋友圈时，微信会把当前分享页面放到一个隔离沙箱中（单页面），无法和应用的其他页面通信。如果当前页面的接口401或者依赖其他页面的信息，那么当前页面分享出来的就是无效页面。

  • 解决方案： 剥离分享朋友圈页面的上下文依赖关系

  • 建议： 慎重开启分享朋友圈页面，开启后需要保证分享页面能正常独立加载

机型的字体加粗问题

版本发布问题

  • 问题： 体验版从test环境切到pre环境的时候，发现体验版的手机号码授权登录失败，失败code：600002。配置完域名之后还是不能授权登录。

  • 解决方案： 这时需要把体验版的上传代码删掉，然后再次上传。再次设置为体验版，就可以恢复正常。

  • 建议： 微信的域名配置切换有缓存问题。当删除所有的小程序（开发版/体验版）后还不生效。建议删除上传版本，重新上传

部分安卓机video标签脱离文档流问题

  • 问题： video标签是有默认样式的：position: relative  。在部分安卓机会因为样式问题悬浮在页面，和fixed效果一样

  • 解决方案： 使用scroll-view组件包裹，将视频的处理交给微信组件

  • 建议： 使用video标签的时候，需要注意兼容问题

手机号授权登录兼容微信低版本问题

  • 问题： 这个api是有版本限制的，针对老版本需要做老版本api的实现

  • 解决方案： 后端接口提供兼容能力，对接老版本api

  • 建议： 在低版本微信，需要同时兼容旧版本获取手机号接口

scroll-view 组件 scroll-into-view属性问题

  • 问题： scroll-into-view 的属性，在动态绑定时，对应的 dom节点也需要是动态的，不然滚动不会被触发

  • 解决方案： 如果不是动态 dom 接口，可以加上 v-if 来判断，伪装成动态节点

  • 建议： 使用 scroll-view 时，在需要手动触发滚动的场景下，需要明确 scroll-into-view 是动态还是静态

scroll-view / 滚动条隐藏

  1. 对于 iOS，设置 scroll-view 的 enhanced 和 showScrollbar 即可（scroll-view）
  2. 对于安卓，设置了 showScrollbar 似乎不生效，可以通过 CSS 去隐藏滚动条

微信小程序如何隐藏 scroll-view 滚动条open in new window

scroll-view ::-webkit-scrollbar {
  appearance: none;
  color: transparent;
  display: none;
  width: 0;
  height: 0;
}

滚动穿透问题

如何彻底解决小程序滚动穿透问题open in new window

custom-wrapper组件影响问题

  • 问题： 在使用这个组件的时候，需要注意是否会对临近的元素渲染更新造成影响。当相邻的两个元素更新机制不一样时（custom-wrapper 会包裹更新层级），有可能会造成无法组件无法交互的问题。

  • 解决方案： 统一去掉 custom-wrapper 组件或者统一使用，当统一使用还是有问题的时候，就统一去掉。

  • 建议： 统一 custom-wrapper 的使用方式。

体验版和正式版会共用缓存：localstroage的使用需要区分环境

  • 问题： 小程序体验版和正式版会共用缓存，如果不做环境缓存区分，在没删除掉体验版的情况下，会导致两个环境的缓存错乱

  • 解决方案： 做localstroage存取的时候需要针对环境做区分

  • 建议： 当遇到一些需要缓存的场景，需要关注体验版和正式版本的区别。