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

软件功能
支持在uni-app、mpvue、Taro等跨端框架中使用。
能够提供了海量的高质量的UI素材,可供自由选择
使用该软件,可帮助您快速开发微信小程序
拥有完整的商业案例,可快速进行了解
采用微信小程序的原生语法编写,只需要熟悉初级的 HTML 、 CSS 、 JavaScript 和 微信小程序 相关知识就能上手开发
可以能够一次性加载所有的代码,也可以能够选择只加载使用到的某些组件的代码
软件特色
简单易用
组件采用微信小程序的原生语法编写,只需要熟悉初级的 HTML 、 CSS 、 JavaScript 和 微信小程序 相关知识就能上手开发,同时既可以能够一次性加载所有的代码,也可以能够选择只加载使用到的某些组件的代码。
规范统一
遵循统一的 设计规范 ,接口标准 和 事件冒泡机制 ,减少开发者查阅文档的时间成本,提升开发效率。
文档丰富
为了能让更多开发者接触之初,就能够熟练的用Lin-UI开发自己的小程序应用,我们对每个组件的 属性 、 事件 、用法 、和 案例 上都做了详尽的描述。
扩展性强
支持 按需引入 和 自定义的主题色 ,生成多种风格,满足个性化产品需求;同时还具有很强的 扩展性 ,轻松实现组件的二次开发。
支持第三方库框架
支持第三方框架,taro,mpvue。
官方教程
安装
Lin UI能够提供两种安装方法,满足不同开发者的需求。如果您需要使用npm安装,请确保您已经在本机安装了npm。
#方式一: 使用npm安装 (推荐)
打开小程序的项目根目录,执行下面的命令(如果使用了云开发,需要进入miniprogram文件夹下执行下面的命令)。

此时,会生成一个package.json文件,命令行里会以交互的形式让你填一些项目的介绍信息,你可以能够耐心填完,当然也可以能够忽略,全部按回车键来快速完成项目初始化。
注意事项
1.执行npm init进行初始化,此时会生成一个package.json文件,如果不进行npm init,在构建npm的时候会报一个错误:没有找到 node_modules 目录
2.不建议使用cnpm,这样会带来一些未知的错误。如果网络情况不佳,可以能够使用下面的命令行更换为淘宝源。

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

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

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

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

使用组件
下文会简单介绍一个Lin UI 组件的引入和使用。
1、配置微信开发者工具
要正确使用 Lin UI,需将微信开发者工具的 Es6 转 ES5 和 增强编译 选项勾选上
设置路径:微信开发者工具右上角 - 详情 - 本地设置
将基础库版本设置到 =2.8.2
2、在页面中引入

在页面中使用

我们建议你在引入 Lin UI 组件时,都统一命名为 l-{组件名} 格式,遵循此规范将使你的项目代码更加清晰
至此,Lin UI 已成功引入至你的项目中了!
#自定义配置
考虑到开发者在面临不同到项目时,需求和行业的不同。Lin UI 设计规范上支持一定程度上的样式定制,以满足业务和品牌上多样化的视觉需求。
同时,可以能够通过对 components.json 进行配置,来编译生成相对应的组件。
为满足自定义的需求,首先我们要去下载 Lin UI 源码。

安装相关依赖

完成以上两步是对 Lin UI 进行自定义配置的基础要求。
#全局样式更改
Lin UI 的样式使用了 Less 作为开发语言,并定义了一系列全局/组件的样式变量,你可以能够根据需求进行相应调整。
以下软件是一些最常用的通用变量,所有样式变量可以能够在这里找到。
组件样式变量 找到根目录,打开config/style/_base.less文件

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

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

根目录下的 dist 文件夹即是编译后的自定义组件。
#按需加载组件
按需加载组件需要您配置config文件下的component.json文件
例如只需要 button 和 loading 两个组件,在component.json填入需要的组件名,如下所示代码:

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

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

根目录下的 dist 文件即是编译后的自定义组件,使用时将他拷贝到自己的项目里即可。
版权声明:Lin UI(高质量UI组件库)所展示的资源内容均来自于第三方用户上传分享,您所下载的资源内容仅供个人学习交流使用,严禁用于商业用途,软件的著作权归原作者所有,如果有侵犯您的权利,请来信告知,我们将及时撤销。
软件下载信息清单:
驱动文件名称 | 发布日期 | 文件大小 | 下载文件名 |
---|---|---|---|
Lin UI(高质量UI组件库)安装包 | 2024年11月12日 | 1.56 MB | LinUI.zip |
软件评论