1 Star 0 Fork 173

阿闵 / lin-ui

forked from 林间有风 / lin-ui 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Lin UI
Fantastic native based Mini-Programe components

⚡️ 文档网站: http://doc.mini.talelin.com
🔥 教程地址: https://talelin.com

简介

Lin UI 是基于 微信小程序原生语法 实现的组件库。遵循简洁,易用的设计规范。

讨论交流

QQ群号:643205479

微信公众号:林间有风

Lin UI商业案例

风袖

风袖

快速上手

Lin UI 致力于给小程序开发者提供愉悦的开发体验。

在开始之前,推荐先学习微信官方的小程序开发文档,并正确安装和配置了 Node.js v12或以上。 同时,我们假设你已了解关于 HTML、CSS 和 JavaScript 的初级知识,并且已经熟悉并阅读了小程序自定义组件

安装

Lin UI提供两种安装方法,满足不同开发者的需求。如果您需要使用npm安装,请确保您已经在本机安装了npm

方式一: 使用npm安装 (推荐)

打开小程序的项目根目录,执行下面的命令。

npm install lin-ui --production

执行成功后,会在根目录里生成项目依赖文件夹 node_modules/lin-ui (小程序IDE的目录结构里不会显示此文件夹)。
然后用小程序官方IDE打开我们的小程序项目,找到 工具 选项,点击下拉选中 构建npm ,等待构建完成即可。

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

方式二:下载代码

直接通过git下载 Lin UI 源代码,并将 dist 目录(Lin UI 组件库)拷贝到自己的项目中。

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

使用组件

下文会简单介绍一个Lin UI 组件的引入和使用。

使用前,确保该组件已经在你的项目目录结构里。
以icon组件为例,只需要在使用页面的json文件中引入icon对应的自定义组件即可。
组件路径:path/to/${组件名称}/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文件,进行修改即可。

  • 主题色更改

同样打开根目录,打开config/style/_theme.less文件,看到文件中定义了一个变量 @theme-color ,如果有主题色修改的需求,更改它即可。

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

其他 更改完成后,在 Lin UI 下的根目录里打开终端执行如下所示命令

npm run build

根目录下的 dist 文件夹即是编译后的自定义组件。

MIT License Copyright (c) 2020 TaleLin Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

🌈 简洁、易用、灵活的微信小程序组件库 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/xcmin_admin/lin-ui.git
git@gitee.com:xcmin_admin/lin-ui.git
xcmin_admin
lin-ui
lin-ui
master

搜索帮助

14c37bed 8189591 565d56ea 8189591