下载吧 ● 其他软件

分类分类

Lin UI(高质量UI组件库)

Lin UI(高质量UI组件库)

v0.9.4 官方版

大小：1.56 MB 更新：2025/01/03

类别：其他软件系统：WinAll

立即下载

　　Lin UI是一款非常专业且优秀的高质量UI组件库，基于微信小程序原生语法实现，设计规范非常简洁且易于使用，在近几年的互联网技术发展中小程序发展迅速，在前端的技术栈要求里也新增了微信小程序这项技能，而在小程序开发过程中很少有能够帮助到开发者的产品，因此小编特地推荐这款软件，拥有高质量的与小程序相匹配的组件库，能够帮助您开发微信小程序，除此之外还提供了wxs模块、电商组件模块等，在设计和实用性上都得到了很好的体现，欢迎有需要的用户下载体验

Lin UI(高质量UI组件库)

软件功能

　　支持在uni-app、mpvue、Taro等跨端框架中使用。

　　提供了海量的高质量的UI素材，可供自由选择

　　使用该软件，可帮助您快速开发微信小程序

　　拥有完整的商业案例，可快速进行了解

　　采用微信小程序的原生语法编写，只需要熟悉初级的 HTML 、 CSS 、 JavaScript 和 微信小程序 相关知识就能上手开发

　　可以一次性加载所有的代码，也可以选择只加载使用到的某些组件的代码

软件特色

　　简单易用

　　组件采用微信小程序的原生语法编写，只需要熟悉初级的 HTML 、 CSS 、 JavaScript 和 微信小程序 相关知识就能上手开发，同时既可以一次性加载所有的代码，也可以选择只加载使用到的某些组件的代码。

　　规范统一

　　遵循统一的 设计规范 ，接口标准 和 事件冒泡机制 ，减少开发者查阅文档的时间成本，提升开发效率。

　　文档丰富

　　为了能让更多开发者接触之初，就能够熟练的用Lin-UI开发自己的小程序应用，我们对每个组件的 属性 、 事件 、用法 、和 案例 上都做了详尽的描述。

　　扩展性强

　　支持 按需引入 和 自定义的主题色 ，生成多种风格，满足个性化产品需求；同时还具有很强的 扩展性 ，轻松实现组件的二次开发。

　　支持第三方库框架

　　支持第三方框架，taro，mpvue。

官方教程

　　安装

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

　　#方式一： 使用npm安装 （推荐）

　　打开小程序的项目根目录，执行下面的命令（如果使用了云开发，需要进入miniprogram文件夹下执行下面的命令）。

Lin UI(高质量UI组件库)

　　此时，会生成一个package.json文件，命令行里会以交互的形式让你填一些项目的介绍信息，你可以耐心填完，当然也可以忽略，全部按回车键来快速完成项目初始化。

　　注意事项

　　1.执行npm init进行初始化，此时会生成一个package.json文件，如果不进行npm init，在构建npm的时候会报一个错误：没有找到 node_modules 目录

　　2.不建议使用cnpm，这样会带来一些未知的错误。如果网络情况不佳，可以使用下面的命令行更换为淘宝源。

Lin UI(高质量UI组件库)

　　接着，继续执行下面的命令。

Lin UI(高质量UI组件库)

　　执行成功后，会在根目录里生成项目依赖文件夹 node_modules/lin-ui （小程序IDE的目录结构里不会显示此文件夹）。

　　然后用小程序官方IDE打开我们的小程序项目，找到 工具 选项，点击下拉选中 构建npm ，等待构建完成即可。

Lin UI(高质量UI组件库)

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

Lin UI(高质量UI组件库)

　　方式二：下载代码

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

Lin UI(高质量UI组件库)

　　使用组件

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

　　1、配置微信开发者工具

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

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

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

　　2、在页面中引入

Lin UI(高质量UI组件库)

　　在页面中使用

Lin UI(高质量UI组件库)

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

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

　　#自定义配置

　　考虑到开发者在面临不同到项目时，需求和行业的不同。Lin UI 设计规范上支持一定程度上的样式定制，以满足业务和品牌上多样化的视觉需求。

　　同时，可以通过对 components.json 进行配置，来编译生成相对应的组件。

　　为满足自定义的需求，首先我们要去下载 Lin UI 源码。

Lin UI(高质量UI组件库)

　　安装相关依赖

Lin UI(高质量UI组件库)

　　完成以上两步是对 Lin UI 进行自定义配置的基础要求。

　　#全局样式更改

　　Lin UI 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

　　以下是一些最常用的通用变量，所有样式变量可以在这里找到。

　　组件样式变量 找到根目录，打开config/style/_base.less文件

Lin UI(高质量UI组件库)

　　主题色更改

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

Lin UI(高质量UI组件库)

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

Lin UI(高质量UI组件库)

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

　　#按需加载组件

　　按需加载组件需要您配置config文件下的component.json文件

　　例如只需要 button 和 loading 两个组件，在component.json填入需要的组件名，如下所示代码：

Lin UI(高质量UI组件库)

　　配置完成后，在 Lin UI 下的根目录里打开终端执行

Lin UI(高质量UI组件库)

　　此时dist文件夹下面会生成button和loading两个组件及其所依赖的组件。

Lin UI(高质量UI组件库)

　　根目录下的 dist 文件即是编译后的自定义组件，使用时将他拷贝到自己的项目里即可。

相关文章
  • 最新排行
  • 最热排行
  • 评分最高
其他软件排行榜

点击查看更多

点击查看更多

点击查看更多