微信小程序组件库（微信小程序组件库搭建）

适合小程序快速开发的10个开源UI库

以下是适合小程序快速开发的10个开源UI库：uniui：简介：DCloud提供的跨端UI库，基于vue组件和flex布局，实现无dom的跨全端UI框架。特点：支持多种平台，包括小程序。uView UI：简介：uniAPP生态专用的UI框架。

uView UI：uni-app生态专用的UI框架，支持ios、Android、H5以及微信/支付宝/百度等小程序平台。vant-weApp：轻量可靠的移动端组件库，提供Vue Vue 微信小程序版本，还有React和支付宝小程序版本。iview-weapp：丰富的微信小程序UI组件库，但目前已不再更新。

Vant Weapp 是有赞前端团队开源的一套轻量、可靠的移动端组件库，适用于微信小程序。它提供了丰富的UI组件，帮助开发者快速构建小程序界面。iView Weapp微信小程序UI组件库：iView Weapp 是一套基于 Weixin 小程序的 UI 组件库，由 DCloud 团队维护。它提供了丰富的组件和示例，方便开发者快速上手。

简介：Vant Weapp是一个轻量、可靠的移动端组件库，专为微信小程序设计。特点：提供了丰富的UI组件，如按钮、对话框、列表等，方便开发者快速搭建小程序界面。图片展示：Github链接：HTTPs：//github.COM/vant-ui/vant-weapp iView Weapp 简介：iView Weapp是一套高质量的微信小程序UI组件库。

TouchUI WX：特点：完全免费的微信小程序开发框架，包含丰富的UI控件，用于官方组件的补充，还能扩展小程序的其他能力。功能：组建扩充、功能扩充、开发体验改善、小程序转为H5应用等。linui：特点：简洁、易用、灵活的微信小程序组件库。功能：提供便捷的开发体验。

如何在微信小程序项目中使用vant组件库

1、打开项目终端，新建一个终端窗口。在终端中输入 npm init y 命令来初始化项目包管理。安装vant组件库：使用 npm i @vant/weapp S production 命令来安装vant组件库。修改app.json文件：删除 style： v2，以避免小程序新版本基础组件样式导致的样式混乱问题。

2、创建普通微信小程序项目。 打开项目终端，新建一个终端。 在终端输入 `npm init -y` 来初始化项目包。 使用 `npm i @vant/weapp -S --production` 命令来安装vant组件库。 修改 `app.JSON` 文件，将其中的 `style： v2` 删除。

3、构建过程：在微信开发者工具中，选择“工具”菜单下的“构建npm”功能，并勾选“使用npm模块”选项。构建完成后，npm包中的组件和样式将被整合到小程序项目中。引入组件：配置路径：在app.json或具体页面的index.json文件中，引入你需要的vant Weapp组件，并配置其对应的路径。

微信小程序使用扩展组件库WeUI的入门教程

接下来，需要进行配置。首先，打开微信小程序开发工具，点击顶部菜单【工具】【构建npm】，构建完成后会在项目根目录生成miniprogram_npm文件夹。接着，在小程序开发工具右上角点击【详情】【本地设置】，勾选上【使用npm模块】，并确保基准库选择最新的版本。

构建成功之后，项目文件根目录会多出一个miniprogram_npm目录，这个就小程序构建npm所生成的目录。如下图所示：将weui的css样式引入全局css文件中，便于全局使用：/*引入weui库*/@import/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss；这样，就可以在全局使用weui的样式了。

方式一：通过npm构建 构建npm：在开发者工具中，打开标题栏，选择“工具”并点击“构建npm”。引入样式：在app.wxss文件的第一行引入WeUI的样式，代码为@import./miniprogram_npm/weuiminiprogram/weuiwxss/dist/style/weui.wxss；。

可以安装在其他目录下2 因为WeUI组件库是一个独立的项目，可以通过npm安装，也可以手动下载代码，然后将需要的组件放到其他目录下使用，只需要在代码中引入即可。3 但是需要注意的是，如果放到其他目录下使用，需要手动修改WeUI组件库中的样式文件路径，否则样式会无法加载。

在iofod平台上，WeUI基础组件的构建与运用是开发高效、美观小程序的关键。以下是对iofod中WeUI基础组件的详细解析：徽章（Badge）徽章组件通常用于展示小计数或标签，如通知数量或列表跳转内容的通知。在iofod中，构建徽章组件的步骤如下：拖入一个容器作为徽章的载体。

微信小程序常见的UI框架/组件库总结

在微信小程序开发中，常见的UI框架/组件库有以下几种：WeUI小程序：简介：由微信官方设计团队出品，提供与微信原生体验一致的基础样式。特点：深受开发者喜爱，适合追求与微信原生界面一致性的项目。官方地址：weui.iompvue：简介：基于Vue.js的框架，为小程序开发引入了Vue.js的开发体验。

WeUI小程序 - 由微信官方设计团队出品，提供与微信原生体验一致的基础样式，深受开发者喜爱，官方地址：weui.io/。

TouchUI WX：特点：完全免费的微信小程序开发框架，包含丰富的UI控件，用于官方组件的补充，还能扩展小程序的其他能力。功能：组建扩充、功能扩充、开发体验改善、小程序转为H5应用等。linui：特点：简洁、易用、灵活的微信小程序组件库。功能：提供便捷的开发体验。

lin-ui 链接：lin-ui GitHub特点：简洁、易用、灵活的微信小程序组件库。采用原生小程序语言编写，支持npm安装。适用于多种应用场景，包括电商专题组件。可在mpvue、Taro、WePY等第三方框架中使用。提供过滤器、行为等高级功能，满足个性化需求。

iView Weapp 简介：iView Weapp是由TalkingData发布的组件库，一套高质量的微信小程序UI组件库。GitHub地址：https：//github.com/TalkingData/iview-weapp开发文档：https：//weapp.iviewui.com/docs/guide/start使用心得：优点：提供了丰富的UI组件，如tabBar、Tabs、抽屉、index索引等，使用方便。