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

🌈 简洁、易用、灵活的微信小程序组件库
https://github.com/TaleLin/lin-ui

lin-ui linui miniprogram wechat weixin weixin-app

Last synced: 12 days ago
JSON representation

🌈 简洁、易用、灵活的微信小程序组件库

• Host: GitHub
• URL: https://github.com/TaleLin/lin-ui
• Owner: TaleLin
• License: mit
• Created: 2019-01-08T13:26:24.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-08-11T06:05:51.000Z (over 1 year ago)
• Last Synced: 2024-10-29T15:38:10.268Z (13 days ago)
• Topics: lin-ui, linui, miniprogram, wechat, weixin, weixin-app
• Language: JavaScript
• Homepage: https://doc.mini.talelin.com
• Size: 3.9 MB
• Stars: 4,094
• Watchers: 71
• Forks: 485
• Open Issues: 111
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


    





    :memo: 中文文档

    |

    :computer: 官方教程





    Lin UI, not just an UI component library!


    一套基于微信小程序原生语法实现的高质量 UI 组件库





    

        

    

    

        

    

    

        

    

    

        

    



---

## 目录

- [目录](#目录)

- [简介](#简介)

- [快速上手](#快速上手)

  - [安装](#安装)

  - [引入](#引入)

- [讨论交流](#讨论交流)

- [贡献代码](#贡献代码)

- [开源协议](#开源协议)

## 简介

Lin UI 是一套基于 **微信小程序原生语法** 实现的高质量 UI 组件库。遵循简洁、易用、美观的设计规范。

## 快速上手

**务必勾选`增强编译`、`Es6 转 ES5`以及`使用 npm 模块`选项**，[参考图片](https://cdn.talelin.com/20210128165243.png)

### 安装

1. 初始化你的项目为一个 NPM 项目

   ```

   npm init -y

   ```

   > 若项目根目录已包含 package.json 文件，则可跳过该步骤

2. 安装 Lin UI

   ```

   npm i lin-ui

   ```

3. 配置微信开发者工具

   要正确安装 Lin UI，需将微信开发者工具的如下**三个选项全部勾选上**，[参考图片](https://cdn.talelin.com/20210128165243.png)

   - `使用 npm 模块`

   - `增强编译`

   - `ES6 转 ES5`

   > 设置路径：微信开发者工具右上角 -> 详情 -> 本地设置

4. 构建 NPM 模块

   微信开发者工具配置完成以后，还需进行一次 NPM 模块的构建

   > 按钮位置：微信开发者工具顶部 -> 工具 -> 构建 npm

> **若你本地没有 Node.js 环境，无法使用 NPM 安装，则可以采用[源码方式安装](https://doc.mini.talelin.com/start/#方式二：下载代码)**

### 引入

1. 配置微信开发者工具

     - 要正确使用 Lin UI，需将微信开发者工具的 `Es6 转 ES5` 和 `增强编译` 选项勾选上

       > 设置路径：微信开发者工具右上角 -> 详情 -> 本地设置

     - **将基础库版本设置到 `>=2.8.2`**

2. 在页面中引入

   ```json

   {

     "usingComponents":{

       "l-button":"/miniprogram_npm/lin-ui/button/index"

     }

   }

   ```

3. 在页面中使用

   ```html

    默认按钮

   ```

   > 我们建议你在引入 Lin UI 组件时，都统一命名为 `l-{组件名}` 格式，遵循此规范将使你的项目代码更加清晰

   **至此，Lin UI 已成功引入至你的项目中了！**

## 讨论交流

![](https://img.juzibiji.top/20200807155013.png)

## 贡献代码

我们的代码基于 develop 分支开发，欢迎提交 Pull Request 进行代码贡献。

在提交 Pull Request 之前，请详细阅读我们的[开发规范](https://github.com/TaleLin/lin-ui/wiki)，否则可能因为 Commit 信息不规范等原因被关闭 Pull Request。

## 开源协议

[MIT](LICENSE) © 2020  林间有风