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

简介: !> 在组件的样式文件中也就是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-sharedshared 的自定义组件。(这个选项在插件中不可用。)(简单理解就是,组件的会影响到页面的,页面的会影响到组件的,相互互通)
目录
相关文章
|
19天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
1月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
19天前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
17天前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
13 0
|
1月前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
15天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
15天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
15天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
15天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。