weui引入小程序，微信小程序引入ui组件

小程序云开发引入weui

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

2、简介：Taro UI是一款由凹凸实验室打造、基于Taro编写的多端UI组件库。支持微信小程序、HreactNative等多端适配运行。官方地址：https：//taro-ui.jd.com/#/使用心得：优点：功能丰富，开发一套代码可以在多个平台运行，提高了开发效率。缺点：入门门槛高，不适合新人开发者。

3、打开开发者工具的标题栏，选择“工具”并点击“构建npm”。 在app.wxss文件的第一行引入WeUI的样式：`@import./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss；`方式二：直接下载组件库 下载WeUI组件库文件（weui-miniprogram）并放置在与pages同级的目录中。

5个最优秀的微信小程序UI组件库

1、简介：WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验。它包含了丰富的组件，如按钮、表单、对话框等，非常适合用于构建与微信风格一致的小程序界面。

2、TaroUI 简介：Taro UI是一款由凹凸实验室打造、基于Taro编写的多端UI组件库。支持微信小程序、HReactNative等多端适配运行。官方地址：https：//taro-ui.jd.com/#/使用心得：优点：功能丰富，开发一套代码可以在多个平台运行，提高了开发效率。缺点：入门门槛高，不适合新人开发者。

3、nutui：京东风格的vue组件库，支持移动端H5和小程序开发，提供70+高质量组件。wux-weApp：可配置的微信小程序UI组件库，提供80+组件，满足移动端开发需求。lin-ui：基于微信小程序原生语法的组件库，遵循简洁易用的设计规范。

4、TaroUI 链接：TaroUI github特点：由京东·凹凸实验室发布的多端UI组件库，支持H微信小程序、支付宝小程序、百度小程序等。整体风格简约、清新、统一，适合多种类型的小程序。功能丰富，但入门门槛较高，使用人数相对较少。

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

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

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

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

3、ZanUI WeApp 简介：ZanUI WeApp是有赞移动Web UI规范ZanUI的小程序实现版本。它结合了微信的视觉规范，提供了统一的使用感受。组件库包含了徽章、按钮、卡片、单元格、对话框等多种组件，非常适合用于构建复杂的小程序界面。

微信小程序(二)使用npm安装weui

1、二：配置微信开发者工具支持npm 这个很简单，如下图所示：勾选红框标注的使用npm模块：然后，点击菜单栏？工具-构建npm，将你刚刚使用npm安装的插件集成到项目中。如下图所示：构建成功之后，项目文件根目录会多出一个miniprogram_npm目录，这个就小程序构建npm所生成的目录。

2、初始化项目并安装 WeUI 初始化项目：确保已经安装了微信开发者工具并创建了一个小程序项目，然后在开发者工具中输入npm init y命令，初始化项目。安装 WeUI：使用npm install weuiminiprogram命令安装 WeUI 组件库。

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

4、首先，确保您已经安装了微信开发者工具并创建了一个小程序项目。其次，使用npm命令进行组件库的安装： 打开开发者工具，输入npm init -y，初始化项目。 然后，使用npm install weui-miniprogram命令安装 WeUI。

小程序引入weui使用步骤

1、要将 WeUI 库引入微信小程序中，您可以按照以下步骤操作：初始化项目并安装 WeUI 初始化项目：确保已经安装了微信开发者工具并创建了一个小程序项目，然后在开发者工具中输入npm init y命令，初始化项目。安装 WeUI：使用npm install weuiminiprogram命令安装 WeUI 组件库。

2、在完成以上步骤后，我们需要在小程序的根目录app.wxss文件中引入样式文件，路径可以根据实际情况调整。

3、首先，确保您已经安装了微信开发者工具并创建了一个小程序项目。其次，使用npm命令进行组件库的安装： 打开开发者工具，输入npm init -y，初始化项目。 然后，使用npm install weui-miniprogram命令安装 WeUI。

小程序引入weui、修改weui样式

方式一：通过npm构建 打开开发者工具的标题栏，选择“工具”并点击“构建npm”。

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

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

在完成以上步骤后，我们需要在小程序的根目录app.wxss文件中引入样式文件，路径可以根据实际情况调整。

整体设计规范 WeUI的所有页面，无论是嵌入式网页还是插件的小程序，都将在其右上角放置官方的小程序菜单。开发人员不能定制菜单内容，但可以自由选择颜色匹配的深度来适应WeUI页面的设计风格。在即时设计中，可以直接免费使用两种颜色的WeUI微信小程序组件库。

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