Lin UI —— 一套設計精良的微信小程序組件庫

你好，我是小桔，是一個沒有感情的代碼崽。

今天我想向你推薦一套船新全新的微信小程序組件庫：Lin UI，是兄弟就用它！

簡介

Lin UI 是由林間有風團隊精心打造的一套微信小程序組件庫，組件豐富、設計優美，而且擁有完整的商業案例，是您開發微信小程序的不二選擇。

• 官方文檔
• Github 連接
• 碼雲 Gitee 連接
• 林間有風團隊首頁

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 。

我是小桔，歡迎關注個人微信公衆號，帶你瞭解更多先後端知識。