簡介

Lin UI 是基於 微信小程序原生語法 實現的組件庫。遵循簡潔，易用的設計規範。Lin UI 致力於給小程序開發者提供愉悅的開發體驗。

文末多圖預覽，小夥伴們可以直達預覽出，查看UI效果！

Github和文檔

https://github.com/TaleLin/lin-ui

http://doc.mini.7yue.pro/

相關特性

• 簡單易用

組件採用微信小程序的原生語法編寫，只需要熟悉初級的 HTML 、 CSS 、 JavaScript 和 微信小程序 相關知識就能上手開發，同時既可以一次性加載所有的代碼，也可以選擇只加載使用到的某些組件的代碼。

• 規範統一

遵循統一的 設計規範 ，接口標準 和 事件冒泡機制 ，減少開發者查閱文檔的時間成本，提升開發效率。

• 文檔豐富

為了能讓更多開發者接觸之初，就能夠熟練的用Lin-UI開發自己的小程序應用，我們對每個組件的 屬性 、 事件 、用法 、和 案例 上都做了詳盡的描述。

• 擴展性強

支持 按需引入 和 自定義的主題色 ，生成多種風格，滿足個性化產品需求；同時還具有很強的 擴展性 ，輕鬆實現組件的二次開發。

• 支持第三方庫框架

支持第三方框架，taro，mpvue

快速上手

Lin UI 致力於給小程序開發者提供愉悅的開發體驗。

在開始之前，推薦先學習微信官方的小程序開發文檔，並正確安裝和配置了 Node.js v8或以上。

• 安裝

Lin UI提供兩種安裝方法，滿足不同開發者的需求。如果您需要使用npm安裝，請確保您已經在本機安裝了npm

1、方式一： 使用npm安裝 （推薦）

打開小程序的項目根目錄，執行下面的命令（如果使用了雲開發，需要進入miniprogram文件夾下執行下面的命令）。

npm init

接著，繼續執行下面的命令。

npm install lin-ui

執行成功後，會在根目錄里生成項目依賴文件夾 node_modules/lin-ui （小程序IDE的目錄結構里不會顯示此文件夾）。然後用小程序官方IDE打開我們的小程序項目，找到 工具 選項，點擊下拉選中 構建npm ，等待構建完成即可。

出現上圖所示的結果後，可以看到小程序IDE工具的目錄結構里多出了一個文件夾 miniprogram_npm（之後所有通過 npm 引入的組件和 js 庫都會出現在這裡），打開後可以看到 lin-ui 文件夾，也就是我們所需要的組件。

2、方式二：下載代碼

直接通過git下載 Lin UI 原始碼，並將 dist 目錄（Lin-UI 組件庫）拷貝到自己的項目中。

git clone https://github.com/TaleLin/lin-ui.git

• 使用組件

下文會簡單介紹一個Lin UI 組件的引入和使用。

使用前，確保該組件已經在你的項目目錄結構里。以icon組件為例，只需要在使用頁面的json文件中引入icon對應的自定義組件即可。組件路徑：path/to/${組件名稱}/index

TIP

例如：npm安裝：/miniprogram_npm/lin-ui/icon/index源碼安裝：/dist/icon/index

{
  "usingComponents": {
    "l-icon": "path/to/icon/index"
  }
}

然後在wxml中直接使用該組件。

自定義配置

考慮到開發者在面臨不同到項目時，需求和行業的不同。Lin UI 設計規範上支持一定程度上的樣式定製，以滿足業務和品牌上多樣化的視覺需求。

同時，可以通過對 components.json 進行配置，來編譯生成相對應的組件。為滿足自定義的需求，首先我們要去下載 Lin UI 源碼。

git clone https://github.com/TaleLin/lin-ui.git

安裝相關依賴

npm install

完成以上兩步是對 Lin UI 進行自定義配置的基礎要求。

全局樣式更改

Lin UI 的樣式使用了 Less 作為開發語言，並定義了一系列全局/組件的樣式變量，你可以根據需求進行相應調整。

以下是一些最常用的通用變量，所有樣式變量可以在這裡找到。

• 組件樣式變量 找到根目錄，打開config/style/_base.less文件

// Color 
@default-color          : @theme-color;
@success-color          : #34BFA3;
@warning-color          : #FFE57F;
@error-color            : #F4516C;
@disabled-color         : #DEE2E6;
@selected-color         : fade(@default-color, 90%);
@tooltip-color          : #fff;
@subsidiary-color       : #80848f;
@rate-star-color        : #f5a623;

// Text
@title-color            : #0e0e0e;
@text-color             : #888;

• 主題色更改

同樣打開根目錄，打開config/style/_theme.less文件，看到文件中定義了一個變量 @theme-color ，如果有主題色修改的需求，更改它即可。

// 主題色

@theme-color            : #2c61b4;                      // 主題色

其他 更改完成後，在Lin UI下的根目錄里打開終端執行如下所示命令

npm run build

根目錄下的 dist 文件夾即是編譯後的自定義組件。

#按需加載組件

按需加載組件需要您配置config文件下的component.json文件

例如只需要 button 和 loading 兩個組件，在component.json填入需要的組件名，如下所示代碼：

{
  "components": [
    "button",
    "loading"
  ]
}

配置完成後，在 Lin UI 下的根目錄里打開終端執行

npm run build

此時dist文件夾下面會生成button和loading兩個組件及其所依賴的組件。

├── dist
│   └── button.                             // button組件
│    ├── index.wxml                         // 組件wxml文件
│    ├── index.wxss                         // 組件wxss文件
│    ├── index.json                         // 組件json文件
│    └── index.js                           // 組件js文件
│   └── loading                             // loading組件

根目錄下的 dist 文件即是編譯後的自定義組件，使用時將他拷貝到自己的項目里即可。

UI欣賞

總結

Lin UI是一個 用心的小程序UI組件庫，無論是顏值還是其組件的豐富程度都很良心，不知道有沒有和筆者一樣的小夥伴，筆者比較喜歡這樣的風格組件，偏向中國風。以上部分內容來自於官方文檔，若你已經對它產生興趣，那麼可以查看文檔獲得完整的使用指南，enjoy it！