Lazy loaded image
微信小程序开发踩坑记录
字数 1452阅读时长 4 分钟
2023-4-1
2025-4-8
type
status
date
slug
summary
tags
category
icon
password
上次编辑时间
Apr 8, 2025 03:36 PM

1. 视频在安卓/windows企业微信可以播放,ios/mac端企业微信无法播放

  • 问题描述:推送文章里发布的视频,运营将mov的格式的视频通过工具转换成mp4上传, 导致视频在ios端企业微信和mac端微信/企业微信都无法播放。
  • 问题原因:无法播放的视频编码采用了HEVC, 该编码格式在部分机型上不支持播放
Mac可以通过是否预览视频来区分,左图采用HEVC格式不可预览, 右图采用H.264可以预览
notion image
  • 解决方案:通过视频转换工具将视频编码格式转成H.264

2. input组件设置placeholder字体颜色不生效

  • 问题描述: 通过`placeholder-class` 设置颜色不生效,需要写在`placeholder-style`属性中才行

3. 自定义导航栏在mac微信和windows企业微信不生效

  • 问题描述:页面设置navigationStyle”: “custom”,在mac端微信小程序和windows企业微信都不生效,原生导航依然存在
  • 问题原因: 官方暂不支持,需要开发者做适配
  • 解决方案: 针对mac端微信和windows企业微信做特殊处理,如背景是图片需提供包含导航栏高度和不包含导航栏高度的背景图,防止背景图被压缩。
环境区分代码:

4. mac一体机端小程序input组件设置disable无法触发点击事件

  • 问题描述:input组件设置disable属性, 在mac一体机无法触发点击事件
  • 解决方案: 1.将事件委托给父组件,2.将input标签用view标签代替

5. IOS端无法转化2025-02-20格式的时间

  • 问题描述:iOS系统在处理日期时,不支持使用横线()作为分隔符的日期格式,例如2020-01-01。这种格式在iOS上可能会导致日期解析错误,返回NaNnull
  • 解决方案:将替换成/, 再解析时间;

6. 重新进入小程序app.onShow不触发

  • 问题描述:点击小程序右上角”重新进入小程序“,app的onShow事件不触发,正常进入小程序onShow会触发,只会触发一次
  • 问题机型:所有ios机型
  • 解决方案:逻辑处理不放在app.onShow事件中处理

7. text组件绑定事件在部分机型上不生效

  • 问题描述: 在华为mate40pro 上, 在
    • 标签上绑定的事件不生效
  • 解决方案:将事件绑定在view标签上

8. 小程序页面栈最多十层,超过十层跳出会失败

  • 问题描述wx.navigateTo跳转页面时, 最多支持连续进入10个页面,再继续深入跳转会失败
  • 解决方案:超过十层时跳转用wx.redirectTo, 可封装通用函数处理

9. 浮层滚动穿透

  • 问题描述: 页面可以滚动,浮层内容也可以滚动时,在滚动浮层内容时会带动底部页面内容的滚动
  • 解决方案
    • 1. 针对浮层内容没有滚动的情况,直接在浮层最外层view添加 catchtouchmove={{true}}
    • 2. 浮层内容有滚动时用scroll-view组件做滚动
    • 3. 使用内置组件page-meta 动态设置page-style="overflow: {{showPanel?'hidden':'visible'}}"解决

10. canvas绝对定义异常

  • 问题描述: canvas组件使用绝对定位,但仍然会随着页面的滚动而滚动。
  • 解决方案: canvas属于原生组件,不支持绝对定位包括absolute, fixed, relative

11. 微信生成小程序二维码scene参数长度有限制

  • 问题描述:小程序二维码scene参数限定长度为32位字符,但是实际开发中可能有很多的参数需要传递,比如pages/index/index?url=xxx%2F%23%2Fquick-ask%3&a=1%2F%23%2Fquick-ask%3&b=2&c=3%2F%23%2Fquick-ask%3,就需要通过特殊处理之后才能使用
  • 解决方案:伪参数:和后端定义好参数名称,后端接口根据定义好的参数映射做处理

12. ios真机播放长音频在onPlay中duration取值无效

  • 问题描述: ios真机播放20分钟或以上长音频,在onPlay回调中立即获取duration时值无效或为0,需要通过setTimeout增加一定的延时才能获取成功
  • 解决方案:

13. textarea禁用adjust-position后,多次点击输入框会导致页面上推

  • 问题描述: ios真机`textarea`多次点击后会导致页面上推
  • 解决方案: 页面设置disableScroll: true
上一篇
JS逆向分析:字节的火山引擎如何做前端白屏监控
下一篇
深入解析 addEventListener 的高级配置:从基础到 Vue3 实践

评论
Loading...