收藏
评论

小程序组件默认样式 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

最后一次编辑于  2018-03-28  (未经腾讯允许,不得转载)
复制链接收藏赞 0

2 个评论

  • 周光暖
    周光暖
    2018-04-23

    你好,我参考你代码片段里的样式,去修改了app.wxss,但发现还是没法改变默认组件的样式诶。

    2018-04-23
    赞同
    回复
  • live
    live
    2018-04-23

    你可以按照第二段的方式,自行检查并覆盖模拟器中的组件样式。

    但注意在真机中,部分组件是使用原生实现的,是无法通过 CSS 样式覆盖的。

    2018-04-23
    赞同
    回复