百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

Lin UI——一套设计精良的微信小程序组件库

toyiye 2024-06-06 22:11 15 浏览 0 评论

你好,我是小桔,是一个没有感情的代码崽。

今天我想向你推荐一套船新全新的微信小程序组件库:Lin UI,是兄弟就用它!

简介

Lin UI 是由林间有风团队精心打造的一套微信小程序组件库,组件丰富、设计优美,并且拥有完整的商业案例,是您开发微信小程序的不二选择。

  • 官方文档 - http://doc.mini.talelin.com
  • Github 链接 - https://github.com/TaleLin/lin-ui
  • 码云 Gitee 链接 - https://gitee.com/talelin/lin-ui
  • 林间有风团队首页 - https://talelin.com

PS:这篇文章不会介绍 Lin UI 如何使用,我仅向你介绍它的优点,如果想要了解使用方法欢迎前往文档官网查看

特点

现在市面上已经有了许多组件库:Vant Weapp、iView Weapp、Color UI、Wuss Weapp、Wux Weapp 等等等等,他们每一套也都能称得上是成熟的组件库。那我为什么还要使用 Lin UI 呢?

Lin UI 吸引我的地方主要有如下几点:

  • 使用简单
  • 设计好看
  • 组件丰富
  • 反馈及时

设计好看

Lin UI 的另一大特点就是视觉设计出众,因为林间有风有专业的 UI 设计师对组件样式进行设计,视觉方面甩其他样式靠开发者自己设计的组件库不止一条街。

文章开头,我罗列了一堆组件,其中有一套,主打视觉,那就是 Color UI,也挺好看(Color UI 的作者也曾是一名设计师)。但是 Color 是一套 css 库,并不是组件库,至于具体区别,可以 Google 一下。

我们先来看几个反面例子,这么”朴实无华“的样式,你真的喜欢吗

我们再来看一下 Lin Ui 是什么样子

怎么样,哪个好看应该不用我多说了吧

组件丰富

Lin UI 一共包含 54 个组件,不管你用于什么场景,基本都可以满足你 90% 的需求,剩下的 10% ,可以通过提 Issue 的方式及时得到解决

使用简单

开发过小程序的开发者可能都知道,小程序相比传统 Web 来说,会简单很多,因为我们不需要去处理多端设备上的屏幕兼容问题,这是小程序的一个优势。但是,如果因为引入一套组件库,让你失去了开发简单这项优势,那还值得去使用它吗?

Vant Weapp 是业内非常成熟的一套组件库,它的开发也历经了很长的周期。但是,在我看来,Vant Weapp 的一大缺点就是组件源码非常复杂。这种复杂并不是说他的逻辑有多复杂,而是 Vant Weapp 对代码做了大量的封装,我们看一下下面的代码:

import { VantComponent } from '../common/component';
import { button } from '../mixins/button';
import { openType } from '../mixins/open-type';

VantComponent({
  mixins: [button, openType],

  data: {
    baseStyle: ''
  }
)}

这是 Vant Weapp 的 Button 组件部分源码,我们知道,Button 组件几乎是没有业务逻辑的,但是它却引入了 VantComponent、button、openType三个 ts 文件。

是不是一脸懵逼?VantComponent是啥?小程序原生的Component呢?button又是啥?openType又是什么鬼?甚至源码还是用 TypeScript 写的,我写个小程序还得先去学一遍 TypeScript ?

如果你刚接触小程序和 Vant Weapp,这种高度封装的特性会导致一个非常严重的问题:**当你在开发中遇到一个文档解决不了的问题想翻看源码时,你会发现你看不懂,你必须得理解其整套设计思想才能看懂其中每个组件的逻辑。**很浪费时间对不对?

Lin UI 就完全不存在这个问题,只要你懂 js 识字就能看懂源码,不信你看

Component({
  properties: {
    /**
     * 折叠面板类型
     */
    type: {
      type: String,
      value: 'normal'
    },
  },

  methods: {
    /**
     * 关闭所有打开的collapse-item
     */
    foldAllExpandItem(collapseItem) {
      for (let i = 0; i < this.data._expandItems.length; i++) {
        if (collapseItem !== this.data._expandItems[i]) {
          this.data._expandItems[i].foldContent();
        }
      }
      this.data._expandItems = [];
    }
});

这是 Lin UI IndexList 组件的源码,因为篇幅问题,只截取了部分。为什么说只要识字就能看懂,因为我们对方法进行了详细的注释,并且没有对微信原生 api 进行二次封装,完全原生的写法,保证你能看懂源码,这么贴心,就问你感不感动!

总结:如果你非常熟悉小程序的各种 api 、熟悉 ts、并且在遇见 bug 时有耐心去理解高度封装的设计思想,那么你可以使用 Vant Weapp。反之,如果你刚接触小程序,或者不会 ts 、在遇见 bug 时想要以最快的速度解决 bug,那么 Lin UI 会给你最舒适的开发体验。

反馈及时

一个开源项目,其活跃度是非常重要的。反馈的 Bug 能否得到及时的解决,有好的想法能否的项目作者接纳并加入项目之中,以及使用这个项目的人数。这三点是在进行技术选型时必须要考虑的问题。

Lin UI 的反馈效率非常高,Issue 反馈的 Bug 平均能在 24 小时内得到解决,这已经是非常高的效率了。相比 Vant Weapp,因为其维护者都是在职开发者,所以时间并不会太充裕,Issue 处理速度肯定也会慢于 Lin UI 的。

结语

Lin UI 从 2019 年 4 月 24 日 发布第一个版本 0.1.0 以来,经过了一年多的迭代更新,600 多次 commit,300 多个 issue,换来的是现在已经足够稳定且易用的 Lin UI 。如果喜欢,也欢迎到 Github 上贡献一颗 Star

我是小桔,欢迎关注我的微信公众号,带你了解更多前后端知识。

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码