单一的视觉不再满足用户体验需求,为提高用户体验,提高应用体验口碑,同时提高开发者效率,我们希望提高组件库的可定制化,因此提供换肤功能以及多种类组件中的样式定制功能,允许用户将应用切换不同主题风格的皮肤,也允许开发者对指定组件进行样式改造。
主题定制是大多数组件库都会提供的一个核心样式相关的功能,技术选项上需要考虑的两点:
针对以上两点,我们做了一些分析:
目前各类组件库最常用的是以下两种方案:
在我们实现的hippy-react-ui中我们并没有提供打包的能力,而是把这部分移交到业务侧处理,原因是现在大部分业务发布时都会对业务进行打包处理,业务侧可能灵活设置打包配置内容,而不受限于组件库打包,另一方面是让业务侧使用组件时可以快速定位组件内部结构,方便排查使用过程中遇到的问题。因此我们选用了以上第二种方案,提供一份默认的样式配置表,而业务侧可以写入重新样式对其覆盖。
组件库是基于hippy-react设计开发的,hippy-react提供的数据的传递有两种:
第一个方案使用简单,只需要将样式从根节点往下一层层传递即可,但它的缺点也是需要一层层传递。我们的组件库中,复合组件很多,比如列表组件中用到了按钮组件,按钮组件中用到了文本组件,这要求每个组件都需要获取一遍props再往下传递,不仅加大开发成本,对影响了后续开发的可维护性。而第二个方案,我们只需要使用context提供主题的提供者和消费者,在需要使用主题的组件中注入即可,但它有个缺点:每次更新context的容,都会将所有消费到主题的组件重新更新一遍。而针对context的缺点,我们可以放下这个顾虑,因为主题本身也是只消费一遍,在切换主题的时候进行消费,而不是高频的去使用。因此组件获取样式配置表是通过context的方式进行获取。
通过上面技术的选型,我们确定了两点:
以上是生成全局样式表的过程,在讲解流程前需补充说明上图中深色/浅色主题:组件库内置两份主题色,主题的切换主要是颜色部分的切换,提供两种主题的原因是我们尽可能通用化配色,比如以下几个例子,背景色/背景图片我们可以随意替换,但作用在其之上的内容,简单分为深/浅两种方案基本可以适用到大部分场景。
组件库自带的样式分为三部分:跟主题相关的深色主题
和浅色主题
,还有与主题切换无关的其他样式
, 在业务侧未指定主题时,组件库默认使用浅色主题的颜色配置表+其他可配置的默认样式值,如字体大小,字重等,业务侧可以重写样式,最终生成的样式表作为提供者Provider给到各个组件使用。
我们暴露一个属性value={}
给业务侧赋值给组件库,业务侧可以在对象中传入指定的主题,比如value={theme: "light"}
或者 value={theme: "dark"}
,我们提供一个便利,业务侧可以直接传入value="light"
或value="dark"
。如果希望针对某个样式值进行重写,可以 value={textBaseColor: "#555555"}
。
在组件库中,我们根据业务侧传入的自定义内容进行判断且合并成新的样式配置表:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。