Lin UI微信小程序組件庫
Lin UI 是由林間有風(fēng)團(tuán)隊(duì)精心打造的一套微信小程序組件庫，組件豐富、設(shè)計(jì)優(yōu)美，并且擁有完整的商業(yè)案例，是您開發(fā)微信小程序的不二選擇。
特點(diǎn)
現(xiàn)在市面上已經(jīng)有了許多組件庫：Vant Weapp、iView Weapp、Color UI、Wuss Weapp、Wux Weapp 等等等等，他們每一套也都能稱得上是成熟的組件庫。那我為什么還要使用 Lin UI 呢？
Lin UI 吸引我的地方主要有如下幾點(diǎn)：
- 使用簡單
- 設(shè)計(jì)好看
- 組件豐富
- 反饋及時(shí)
設(shè)計(jì)好看
Lin UI 的另一大特點(diǎn)就是視覺設(shè)計(jì)出眾，因?yàn)榱珠g有風(fēng)有專業(yè)的 UI 設(shè)計(jì)師對組件樣式進(jìn)行設(shè)計(jì)，視覺方面甩其他樣式靠開發(fā)者自己設(shè)計(jì)的組件庫不止一條街。
文章開頭，我羅列了一堆組件，其中有一套，主打視覺，那就是 Color UI，也挺好看（Color UI 的作者也曾是一名設(shè)計(jì)師）。但是 Color 是一套 css 庫，并不是組件庫，至于具體區(qū)別，可以 Google 一下。
我們先來看幾個(gè)反面例子，這么“樸實(shí)無華”的樣式，你真的喜歡嗎
再來看一下 Lin Ui 是什么樣子
組件豐富
Lin UI 一共包含 54 個(gè)組件，不管你用于什么場景，基本都可以滿足你 90% 的需求，剩下的 10% ，可以通過提 Issue 的方式及時(shí)得到解決
使用簡單
開發(fā)過小程序的開發(fā)者可能都知道，小程序相比傳統(tǒng) Web 來說，會(huì)簡單很多，因?yàn)槲覀儾恍枰ヌ幚矶喽嗽O(shè)備上的屏幕兼容問題，這是小程序的一個(gè)優(yōu)勢。但是，如果因?yàn)橐胍惶捉M件庫，讓你失去了開發(fā)簡單這項(xiàng)優(yōu)勢，那還值得去使用它嗎？
Vant Weapp 是業(yè)內(nèi)非常成熟的一套組件庫，它的開發(fā)也歷經(jīng)了很長的周期。但是，在我看來，Vant Weapp 的一大缺點(diǎn)就是組件源碼非常復(fù)雜。這種復(fù)雜并不是說他的邏輯有多復(fù)雜，而是 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 組件幾乎是沒有業(yè)務(wù)邏輯的，但是它卻引入了 VantComponent、button、openType三個(gè) ts 文件。
是不是一臉懵逼？VantComponent是啥？小程序原生的Component呢？button又是啥？openType又是什么鬼？甚至源碼還是用 TypeScript 寫的，我寫個(gè)小程序還得先去學(xué)一遍 TypeScript ？
如果你剛接觸小程序和 Vant Weapp，這種高度封裝的特性會(huì)導(dǎo)致一個(gè)非常嚴(yán)重的問題：當(dāng)你在開發(fā)中遇到一個(gè)文檔解決不了的問題想翻看源碼時(shí)，你會(huì)發(fā)現(xiàn)你看不懂，你必須得理解其整套設(shè)計(jì)思想才能看懂其中每個(gè)組件的邏輯。很浪費(fèi)時(shí)間對不對？
Lin UI 就完全不存在這個(gè)問題，只要你懂 js 識字就能看懂源碼，不信你看
Component({
properties: {
/**
* 折疊面板類型
*/
type: {
type: String,
value: 'normal'
},
},
methods: {
/**
* 關(guān)閉所有打開的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 組件的源碼，因?yàn)槠鶈栴}，只截取了部分。為什么說只要識字就能看懂，因?yàn)槲覀?strong>對方法進(jìn)行了詳細(xì)的注釋，并且沒有對微信原生 api 進(jìn)行二次封裝，完全原生的寫法，保證你能看懂源碼，這么貼心，就問你感不感動(dòng)！
總結(jié)：如果你非常熟悉小程序的各種 api 、熟悉 ts、并且在遇見 bug 時(shí)有耐心去理解高度封裝的設(shè)計(jì)思想，那么你可以使用 Vant Weapp。反之，如果你剛接觸小程序，或者不會(huì) ts 、在遇見 bug 時(shí)想要以最快的速度解決 bug，那么 Lin UI 會(huì)給你最舒適的開發(fā)體驗(yàn)。
反饋及時(shí)
一個(gè)開源項(xiàng)目，其活躍度是非常重要的。反饋的 Bug 能否得到及時(shí)的解決，有好的想法能否的項(xiàng)目作者接納并加入項(xiàng)目之中，以及使用這個(gè)項(xiàng)目的人數(shù)。這三點(diǎn)是在進(jìn)行技術(shù)選型時(shí)必須要考慮的問題。
Lin UI 的反饋效率非常高，Issue 反饋的 Bug 平均能在 24 小時(shí)內(nèi)得到解決，這已經(jīng)是非常高的效率了。相比 Vant Weapp，因?yàn)槠渚S護(hù)者都是在職開發(fā)者，所以時(shí)間并不會(huì)太充裕，Issue 處理速度肯定也會(huì)慢于 Lin UI 的。