微信小程序常见问题记录合集

一、开放能力web-view

• 定义：承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用
• 接口：web-view网页中可使用 JSSDK 提供的部分接口
• 问题：微信官方有说明web-view现存的Bug，同时也给出了对应的Tip，具体见下图
• 文档：官方文档传送门

二、原生组件层级最高

• 微信小程序原生组件的层级特性‌：在微信小程序中，原生组件如canvas、video、textarea等是由客户端直接创建和渲染的，因此它们的层级在页面中是最高的，不受z-index属性的控制。这意味着无论其他组件的z-index设置得多么高，都无法覆盖在原生组件之上‌。

• 原生组件的层级特性‌：原生组件的层级是独立的，完全独立于webview，因此无法通过z-index来控制它们与其他组件的层级关系。这种设计使得原生组件在性能和稳定性上具有优势，但同时也带来了布局上的挑战‌。

• 解决原生组件层级问题的方法‌：

  1. 使用cover-view和cover-image‌：这两个组件也是原生组件，但它们的层级比canvas更高，可以在某些情况下覆盖canvas。然而，它们的使用有一定的局限性，仅支持嵌套cover-view和cover-image，以及在其中使用button‌。
  2. 将canvas转换为图片‌：在canvas绘制完成后，使用canvasToTempFilePath方法将其转换为图片，然后隐藏canvas，显示图片。这种方法适用于静态的canvas绘图，但对于动画可能会影响性能‌。
  3. 调整布局‌：通过调整页面布局，尽量避免canvas与其他需要交互的组件重叠。例如，可以将canvas放置在页面的固定位置，其他组件则布局在canvas遮挡不到的区域‌。

• 原生组件支持同层渲染‌：为了解决原生组件的层级问题，微信小程序引入了同层渲染机制。通过同层渲染，原生组件可以与其他组件随意叠加，解决了层级限制的问题。但需要注意的是，组件内部仍由原生渲染，样式一般对原生组件内部无效‌。

三、slot插槽节点渲染机制

• 在浏览器中，slot 节点内容会被渲染到子节点里面，小程序中会被渲染为使用 slot 的兄弟节点

  

• 小程序中每个页面和组件都会有对应的 shadow-root 存放其真实节点

  

四、ios系统使用new Date()解析时间出现NaN

• 现象：ios系统使用new date("yyyy-MM-dd")解析时间时会显示NaN，这个不光是小程序，移动端iOS大部分机型都会出现这个问题

• 原因：由于ios无法识别yyyy-MM-dd的格式

• 解决：替换连接符-为可识别的/

let val = "2025-04-03 17:59:01"
let time = val.replace(/-/g, "/")
let dateTime = new Date(time)

五、全局样式变量定义(app.wxss文件)

• page 标签方式

  /* 标签定义全局变量 */
  page {
  }

• :root 伪类方式

  /* 伪类定义全局变量 */
  :root {
  }

• 两者的区别和选择建议

  • 兼容性 ：从兼容性方面来看， page 是小程序特有的选择器，兼容性良好。而 :root 是标准的 CSS 伪类，在支持 CSS 变量的环境中都能使用。
  • 语义 ： page 更明确地表示这是小程序的页面，语义上更贴合小程序的开发环境。 :root 则更偏向于标准 CSS 的使用习惯。
  • 开发建议：小程序中更推荐使用原生的 page 标签选择器。

六、原生<text>组件空白行渲染问题

• 小程序中使用原生<text>，若文本前后有空白行，或者是文本内容单独写一行，在模拟器中渲染出来会出现莫名其妙的空白行
• 经过验证后发现，只有特定微信开发者工具版本（我用的是Stable 1.06.2412050）才会出现，可能其他版本也会有类似问题
• 解决方案：去除文本内容前后的空行，使得文本内容和<text>组件在同一行即可解决