微信小程序开源组件库合集

3370

===== Lin UI  doc.mini.talelin.com

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

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

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

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

npm init

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

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

npm install lin-ui

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

1.png


方式二:下载代码

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

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

image.png

示例:

image.png

在页面index.json 引入需要使用的组件

image.png

image.png

使用相关组件 index.wxml

image.png