微信小程序开发常见问题与解决方案

1. 保存图片到手机

• 核心步骤：
  1. 使用 wxml-to-canvas 或 renderToCanvas 将 WXML 渲染为 Canvas。
  2. 通过 canvasToTempFilePath 将 Canvas 转换为临时文件路径。
  3. 调用 saveImageToPhotosAlbum 将图片保存到手机相册。

2. 滑动穿透问题

• 解决方案：
  • 在页面根节点设置 overflow: hidden 或 overflow: visible。
  • 使用 catchtouchmove 阻止事件冒泡。
  • 在 Vue 中，可通过 @touchmove.prevent 阻止默认行为。

3. 聚焦时键盘遮挡输入框（真机问题）

• 问题描述：在真机环境中，键盘弹出时可能遮挡输入框。
• 解决方案：使用 input 组件的 cursor-spacing 属性，指定光标与键盘的距离。

4. 原生组件的限制

• 问题背景：原生组件脱离 WebView 渲染流，导致功能受限。
• 具体限制：
  • Input 组件：
    • 不支持 type="file"，无法实现文件上传。
    • 不支持 type="password" 时的输入框清除功能。
    • 不支持 type="number" 时的数字输入限制（如最大最小值、步长等）。
    • 不支持 type="date" 时的日期选择器样式。
  • Textarea 组件：
    • blur 事件会晚于页面上的 tap 事件。
  • 层级问题：
    • 原生组件层级始终最高，其他组件无法通过 z-index 覆盖。
• 注意事项：
  • 微信开发者工具中，原生组件由 Web 组件模拟，可能与真机表现不一致，建议在真机调试。

5. 安全距离适配

• 问题背景：全面屏设备底部存在安全区域，需适配。
• 解决方案：

  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS ≥ 11.2 */
  

6. 自定义 TabBar

• 实现步骤：
  1. 在全局配置文件（app.config.js / app.json / app.jsx）中配置：

     tabBar: {
       "custom": true
     }
     

  2. 保留 TabBar 的原生特性，支持 switchTab 和 onTabItemTap 等 API。

7. 节点操作

• 问题背景：小程序不支持 document.getElementById。
• 解决方案：
  • 使用 wx.createSelectorQuery() 创建选择器。
  • 通过 select('#node-id') 方法获取节点。

8. WebView 组件

• 问题背景：
  • web-view 组件会自动铺满整个小程序页面。
  • navigationStyle: "custom" 自定义导航栏设置无效。

总结

小程序开发中，需特别注意原生组件的限制、真机环境的适配以及安全距离的处理。通过合理使用 API 和 CSS 方案，可以有效解决常见问题，提升用户体验。