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

一、开放能力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的格式

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

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

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

  • page 标签方式

    css 复制代码
    /* 标签定义全局变量 */
    page {
    }
  • :root 伪类方式

    css 复制代码
    /* 伪类定义全局变量 */
    :root {
    }
  • 两者的区别和选择建议

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

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

  • 小程序中使用原生<text>,若文本前后有空白行,或者是文本内容单独写一行,在模拟器中渲染出来会出现莫名其妙的空白行
  • 经过验证后发现,只有特定微信开发者工具版本(我用的是Stable 1.06.2412050)才会出现,可能其他版本也会有类似问题
  • 解决方案:去除文本内容前后的空行,使得文本内容和<text>组件在同一行即可解决
相关推荐
知性的小mahua2 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_18 分钟前
暑期前端训练day5
前端
uncleTom66624 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥27 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF38 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man40 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬41 分钟前
理解JS事件环(Event Loop)
前端·javascript
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树2 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js