颜值和功能皆不辜负，微信小程序原生语法组件库来了

极乐君

发布于 2020-05-22 15:58:15

7810

发布于 2020-05-22 15:58:15

文章被收录于专栏：极乐技术社区极乐技术社区

Lin UI 是基于微信小程序原生语法实现的组件库。遵循简洁，易用的设计规范。Lin UI 致力于给小程序开发者提供愉悦的开发体验。

文末多图预览，小伙伴们可以直达预览出，查看UI效果！

一、相关特性

简单易用

组件采用微信小程序的原生语法编写，只需要熟悉初级的 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中直接使用该组件。

<l-icon name="add"> </l-icon>

自定义配置

考虑到开发者在面临不同到项目时，需求和行业的不同。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 文件即是编译后的自定义组件，使用时将他拷贝到自己的项目里即可。