LinUI重构说明

Hello,各位使用LinUI的开发者,首先自我介绍一下,我是LinUI的主要开发者之一,花名拾玖。

前一段时间群里面好多小伙伴问:“LinUI是不是不维护了?”。所以借着这个说明我统一回复一下大家,LinUI在去年一年的时间内,由于我个人以及其他小伙伴的时间原因及工作原因等,陆陆续续大家的精力都转移到其他地方去了,我本人也有想过放弃这个项目,但是我看到了各位依旧在使用这个组件库,依旧在给这个组件库提出自己的建议和issue,说实话我看到这些还是很感动的,也谢谢各位没有选择抛弃,所以又回来了!

我仔细看了这一年之中大家提出的建议和问题,结合我本人在近一年多的时间内技术的一些沉淀,我决定对这个项目进行重构,重构的原因主要为几个方面:

  • 目前社区中 TypeScript 的流行度还是很高的,特别是能在一些框架中能够很好的进行类型提示和错误提醒,例如 Taro,但是使用这个类型的前提是所使用的的库支持 ts 并提供类型定义文件,所以我决定对组件的代码更换为 ts 编写。

  • 目前的组件样式更改大多数是依赖于外部样式类,这种使用方式虽好,但是有局限性。另外主题色的更改需要通过下载项目进行编译,流程较为复杂,所以我决定采用 css变量 对组件中的样式进行重写,这样更改主题色的话只需要更改一下变量即可,不了解的小伙伴可以看一下vant的文档,里面有详细的使用介绍,当然我可没有抄袭,我只是借鉴[狗头]

  • 重构wxml中样式的书写方式,之前的书写方式采用的拼接式写法,导致wxml的结构过于臃肿,有关重构后的写法可以参考我之前写的一个文章

  • 有关 wx.lin 写法的重构,目前部分组件的 wx.linselectComponent 函数所替代,其主要原因是因为当一个页面存在多个相同的组件是, wx.lin 不知道调用的组件是哪一个,所以本次重构会重新该方法,类似的组件添加一个标识即可,可以看做是vue中的ref属性,同时去除掉通过 show 属性控制显隐的使用方式,类似的交互组件的使用方法将类似于 Element UI 的调用方式实现,以下是重构后的调用方式。

<l-toast id="toast" />
复制代码
wx.lin.$toast('提示')
复制代码
  • 之前的一些逻辑存在性能问题,同时我猜各位的代码中或多或少也存在一些性能问题,小程序中大多数的性能问题都是因为setData所导致的,这其中包括重复的绑定数据及高频的绑定数据,所以重构后的代码中提供了通用的工具函数,帮助数据进行diff并合并一个时间片内的data。除此之外也将提供一些Behavior帮助管理请求状态,分页数据等等。

  • 最后,也是部分小伙伴可能会感兴趣的部分,重构后的LinUI将完整支持Uniapp,是使用Uniapp语法所写的组件,所以之后文档中也会放出web版本的示例。

最后,一个人的想法和力量终究是有限的,欢迎各位有兴趣的小伙伴前来参与,作为一个开源项目,你虽然不能得到经济上的回报,但是你将获取以下成果:

  1. 成为一个3.2K star开源项目的contirbutor。
  2. 与伪大佬我本人共同成长,做出出色的组件库。
  3. 其他成就待发掘。

问与答:

我觉得我的技术太菜了,怎么办?

我觉得这个项目的开发过程还是比较开放的,我本人在开始做这个项目的时候连 vue 都不会,也搞了许多组件,虽然现在看来这些组件比较粗糙,但是我觉得首先要敢于尝试,如果你有这个想法,技术上的问题我可以给予一定的指导,小程序的组件大部分还是比较简单,更多的是样式上的实现。

我没有时间,怎么办?

做组件不需要太多的业余时间,除此之外你可以为项目贡献你的想法和建议,帮助一些刚开始使用的小伙伴解决一些些问题,这些都是对一个开源项目所做出的的贡献,这些做出贡献的小伙伴我回头也会放在文档中进行表彰[狗头]。

最后希望大家都可以参与进来,来帮助这个组件库变得越来越好。大家有什么好的建议或者有兴趣参与可以在评论区留言。

猜你喜欢

转载自juejin.im/post/7019216656354246663