小程序组件默认样式 component default style

不知道微信处于什么目的,并未告知组件的默认样式。且微信开发者工具的 Wxml 选项卡,不仅不支持 inherited from 等 Elements 原有功能,对自定义组件的支持更是鸡肋。
造成在实际使用中,为了覆盖特定组件的样式。不仅需要搭配各种参数,尝试覆盖响应状态。还要翻阅这个没什么人答题,官方投入不足的开发者社区。
比如为了覆盖 button 组件的边框,试了各种参数,查了一堆问题,才在一个角落找到解决方案,原来是通过伪类实现的。
由于被这种操作恶心的实在够呛,不想当下次出现问题时还这么操作,就想了个办法拿到了组件默认样式。

微信开发者工具是用 NW.js 写的,编辑器使用 VSCode 团队开源的 monaco-editor 实现,模拟器和调试器使用 NW.js 提供的 webview 标签实现。其中模拟器用于展示视图层渲染结果,调试器用于调试逻辑层代码。
从微信开发者工具菜单栏中,打开“调试微信开发者工具”功能,弹出第一个 Chrome devtools 窗口。
在第一个 devtools 的 Elements 选项卡,选中模拟器所在的 webview 后,右键 Copy selector 后,在 Console 中输入 document.querySelector(“刚才复制的选择器”).showDevTools(true) 后,弹出第二个 Chrome devtools 窗口。
在第二个 devtools 的 Elements 选项卡,就可以看到模拟器中实际渲染的 DOM 结构,在最顶部的 style 节点就是注入的默认样式。

编辑器限制输入 20000 字,就不粘贴具体样式了,如有需要请自行获取。
代码片段 wechatide://minicode/iItbTfmC6pYO

《小程序组件默认样式 component default style》上有2条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注