微信小程序开发避坑指南(持续更新）

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

问题描述：推送文章里发布的视频，运营将mov的格式的视频通过工具转换成mp4上传，导致视频在ios端企业微信和mac端微信/企业微信都无法播放。

问题原因：无法播放的视频编码采用了HEVC，该编码格式在部分机型上不支持播放

下图可以通过是否预览视频来区分，左图采用HEVC格式不可预览，右图采用H.264可以预览

解决方案：通过视频转换工具将视频编码格式转成H.264

2. 视频封面被遮挡问题

题描述：视频上方点赞工具模块被视频封面遮挡了

问题原因：项目早期视频封面代码封面用了cover-view标签，导致层级最高，覆盖了上层view标签内容

解决方案：将cover-view标签替换成view标签，再根据view标签设定的层级显示

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

问题描述 ：页面设置navigationStyle": "custom"， 在mac端微信小程序和windows企业微信都不生效，原生导航依然存在

mac企业微信	mac微信	window企业微信

问题原因： 官方暂不支持，需要开发者做适配
解决方案：针对mac端微信和windows企业微信做特殊处理，如背景是图片需提供包含导航栏高度和不包含导航栏高度的背景图，防止背景图被压缩。

环境区分代码：

ini 复制代码

wx.getSystemInfo({
  success: function(res) {
    if (res.platform === 'windows' && wx.qy ) {
      console.log('当前是在windows企业微信环境中');
    } else if(res.platform === 'mac' && !wx.qy) {
      console.log('当前是在mac微信环境中');
    }
  }
});

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

问题描述 ：input组件设置disable属性，在mac一体机无法触发点击事件

scss 复制代码

<view class="flex flex-1 align-items-center justify-content-center bg-f5f6fa radius-36 pr-20 pl-20 mt-16 mr-26 mb-16 ml-0">
  <text class="iconfont2 icon-150 font-48 c-666666 mr-16"></text>
  <input class="flex-1 h-72 line-height-72 font-30" disabled="{{true}}" type="text" placeholder="我来说两句" placeholder-style="color:#999999;" bindtap="bindComment" />
</view>

解决方案： 1.将事件委托给父组件，2.将input标签用view标签代替

scss 复制代码

<view class="flex flex-1 align-items-center justify-content-center bg-f5f6fa radius-36 pr-20 pl-20 mt-16 mr-26 mb-16 ml-0" bindtap="bindComment">
  <text class="iconfont2 icon-150 font-48 c-666666 mr-16"></text>
  <input class="flex-1 h-72 line-height-72 font-30" disabled="{{true}}" type="text" placeholder="我来说两句" placeholder-style="color:#999999;"  />
</view>

<view class="flex flex-1 align-items-center justify-content-center bg-f5f6fa radius-36 pr-20 pl-20 mt-16 mr-26 mb-16 ml-0" bindtap="bindComment">
  <text class="iconfont2 icon-150 font-48 c-666666 mr-16"></text>
  <view class="flex-1 h-72 line-height-72 font-30 c-999999">我来说两句</view>
</view>

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

问题描述 ：iOS系统在处理日期时，不支持使用横线（-）作为分隔符的日期格式，例如2020-01-01。这种格式在iOS上可能会导致日期解析错误，返回NaN或null

解决方案 ：将-替换成/, 再解析时间；

javascript 复制代码

function formatDateForIOS(dateString) {
  return dateString.replace(/-/g, '/');
}

let date = new Date(formatDateForIOS('2020-01-01'));
console.log(date); // 正确解析日期

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

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

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

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

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

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

ini 复制代码

function navigateToBeyond(params, limit = 10) {
  const routes = getCurrentPages();
  if (routes && routes.length >= limit) {
    wx.redirectTo(params);
  } else {
    wx.navigateTo(params);
  }
}

9. 浮层滚动穿透

问题描述：页面可以滚动，浮层内容也可以滚动时，在滚动浮层内容时会带动底部页面内容的滚动
解决方案：

- 1. 针对浮层内容没有滚动的情况，直接在浮层最外层view添加 catchtouchmove={{true}}
- 1. 浮层内容有滚动时用scroll-view组件做滚动
- 1. 使用内置组件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. input组件设置placeholder字体颜色不生效

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

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

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

ini 复制代码

const audioContext = wx.createInnerAudioContext();
const loadDuration = function () {
     setTimeout(() => {
        if (audioContext.duration === 0) {
            loadDuration();
         } else {
            // 获取到正确的duration
         }
     }, 100);
};
audioContext.onCanplay(loadDuration);

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

问题描述： ios真机textarea多次点击后会导致页面上推
解决方案 ：页面设置disableScroll: true