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

手机APP/开发
349
0
0
2022-04-06

简介

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

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

颜值和功能皆不辜负,微信小程序原生语法组件库来了——Lin 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 ,等待构建完成即可。

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

出现上图所示的结果后,可以看到小程序IDE工具的目录结构里多出了一个文件夹 miniprogram_npm(之后所有通过 npm 引入的组件和 js 库都会出现在这里),打开后可以看到 lin-ui 文件夹,也就是我们所需要的组件。

颜值和功能皆不辜负,微信小程序原生语法组件库来了——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 文件即是编译后的自定义组件,使用时将他拷贝到自己的项目里即可。

UI欣赏

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


总结

Lin UI是一个 用心的小程序UI组件库,无论是颜值还是其组件的丰富程度都很良心,不知道有没有和笔者一样的小伙伴,笔者比较喜欢这样的风格组件,偏向中国风。以上部分内容来自于官方文档,若你已经对它产生兴趣,那么可以查看文档获得完整的使用指南,enjoy it!