uni-app支付宝小程序样式穿透失效

前情

uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,公司项目就是主推uni-app,对于一些组件我觉得可以复用的我都会抽成组件,如果觉得组件有分享价值的我都会分享到插件市场一来后续我别的项目用到可以直接下载使用,二来可以供大家使用,提高开发效率,我的插件库地址:DCloud 插件市场

插件不管你怎么封装,你暴露多少可配置API都难以适应形形色色的各种需求场景,就像这次我在开发一个售后模块需求,我想复用的我已经抽取的选择器组件来实现它的退款原因的选择,下图左边是我已经抽取的组件,右图是新的设计稿要实现的组件

坑位

组件功能是一样的,是可以复用的,但是它的UI相差的有点多,特别是勾选框的位置,这个比较能搞的,我是主动找UI沟通,能不能尽量复用我以前抽取的组件,这样可以减少一些开发工作量,UI最终同意了,但是颜色和字体大小还是要按新的UI来,整体结构可以复用,沟通到了这里应该是很愉快的了,改颜色和字体这不就是样式穿透的小事么

如果是web项目确实是小事,直接:deep(样式名穿透即可),我一开始也是这样整,自测也是OK的,还原出来的样式如下

随着我开发的进行,我一开始是把这个组件直接放到页面中的,后面发现这个组件在另一个地方也要用到,我于是理所当然的把它抽成了一个组件,此时事情发生了,我写的样式穿透全部不生效了

遇到的问题?

支付宝小程序端在页面中做组件的样式穿透是可以生效的,但是在组件里再对子组件做样式穿透是不会生效,这个问题其实我在快手和抖音端也遇到过,当时没有想到记录下来,这次整支付宝又遇到了......

解决方案

方案1:最暴力的方式

反正组件已经下载到uni_modules里,我直接修改里面源码颜色即可,这样改也是可以的,就怕某一天哪个新人不小心来个右击更新插件那就尴尬了,所以不是太推荐

方案2:既然样式穿透不生效,那我直接写全局样式

这里又有一个注意点,你直接在组件里移除scoped写全局样式是没有用的,你必须把你的样式移动到App.vue里的全局样式去,这里有一个技巧,防止影响到别的地方的样式,我把组件包一层,再取一个唯一的样式名,把重置样式写到这个样式名下即可,最终得以解决

思考

对于开发抽取并收集组件是非常值得做的,一来可以提高自己封装组件的技巧,二来可以减少重复的工作量,但对于形形色色的需求,组件很难适应所有,这时我们首先和需求保持沟通,能不能直接用组件样式,如果不行,能不能尽量往已抽取的组件靠,再通过样式穿透来适配,就算需求还是不同意,那最坏的就是直接拷贝一份组件再改那也比你从0写一个要快,你说是不是了?如果你有更好的看法,欢迎留言分享,一起学习进步

相关推荐
fionlsq1 小时前
uniapp集成原生安卓开发的插件
android·uni-app·小组件
狂团商城小师妹1 小时前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·微信小程序·小程序
奶糖 肥晨2 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
说私域4 小时前
情绪点设置在开源AI大模型驱动的S2B2C商城小程序AI智能名片中的应用研究
人工智能·小程序·开源
2501_916007475 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
chensi_076 小时前
uniapp x 鸿蒙开发之调试证书签名配置
服务器·uni-app·harmonyos
流***陌6 小时前
扭蛋机抽赏小程序:重构线上娱乐的“盲盒式”新体验
小程序·重构·娱乐
一 乐6 小时前
社区互助养老系统|基于java和小程序的社区互助养老系统小程序设计与实现(源码+数据库+文档)
java·数据库·spring boot·小程序·论文·毕设·社区互助养老系统小程序