微信小程序-自定义组件样式隔离

简介: !> 在组件的样式文件中也就是WXSS文件,不能使用 ID 选择器,属性选择器,标签选择器。

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/


!> 在组件的样式文件中也就是WXSS文件,不能使用 ID 选择器,属性选择器,标签选择器。


反例:


我这里使用了标签选择器,效果如下:

2105804-20230514110319547-1260548940.png当我查看控制台发现,给出了一段警告,内容是:[pages/index/index] Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(./components/c-demo/c-demo.wxss:1:1)


意思就是说,不要在组件当中去使用标签选择器,当然你现在看着可能是有效果的,在以后的某个时段当中,可能会出现失效,所以,这里是不正确的使用。


正例:


记住一点就行,在组件中使用类选择器,来设置样式即可。


我这里就不写了,偷个懒,我相信大家,这点应该都知道。


好,这里介绍了第一个注意点事项,再来看第二个。


!> 默认情况下组件中的样式不会影响到页面中的样式


这个要怎么理解呢,就是说,我们在组件当中定义了一个叫 .title 的样式,我们页面文件的WXML中使用到了一个叫做 .title 的类名,这里是引用不到我们组件中定义的 .title 的样式信息的,这里就不提供代码和图片进行呈现。


!> 默认情况下,页面中的样式也不会影响到组件中的样式


!> 也就是说,默认情况下页面和组件中的样式是相互隔离的


?> 如果不想隔离,可以在组件的 .js 文件中,添加 options,在 options 中通过 styleIsolation 来指定隔离模式


官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html![image-20230514111329813](https://img2023.cnblogs.com/blog/2105804/202305/2105804-20230514111331013-578987132.png)


styleIsolation

  • apply-shared:表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;(页面的样式会影响到我们自定义的组件,也就是说不进行隔离)


我在index页面文件目录中的WXSS中定义了一个 .title 的样式,在我没有加 styleIsolation 配置项的时候,我们的index页面并不会作用到我们的c-demo组件当中,添加了之后我们的样式才会进行生效。


  • shared:表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)(简单理解就是,组件的会影响到页面的,页面的会影响到组件的,相互互通)
目录
相关文章
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
1210 1
微信小程序:轻松实现时间轴组件
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
3422 1
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
1646 0
微信小程序:自定义关注公众号组件样式
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
5015 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5437 1
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2911 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
743 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
10704 38
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程