微信小程序导入 WeUI 的详细方式及具体步骤

1、扩展库方式（推荐）

在微信小程序中使用 WeUI 的扩展库方式是最轻量且官方推荐的方法。无需 npm 操作，也不占用代码包体积。

1. 打开项目根目录下的app.json文件。
2. 在usingComponents字段中添加以下配置：

   {"useExtendedLib":{"weui":true}}

3. 设置后即可在小程序中使用 WeUI 的组件，无需额外下载或安装，无需在页面的 .json 文件中再次声明 usingComponents，可以直接在 .wxml 文件中使用组件标签，weui.wxss亦是如此。注意：书写代码时不会有代码提示和建议。

2、npm 方式（常用）

通过 npm 方式安装 WeUI 可以提供更高的灵活性，适合需要定制化或后续更新的项目。

1. 下载node.js（选择LST稳定版本，并配置add to path）；
2. 开发者界面打开终端并且选择cmd打开（Command Prompt 或 命令提示符执行）；
3. 输入指令（注意是在根路径，cd可以选择路径）：

   npminit-y（出现package.json）npminstallweui-miniprogram--save（出现node_modules文件夹和package-lock.json，注意--save和--save-dev的区别）

   如果需要清理已下载的文件执行以下指令：

   Remove-Item-Recurse-Forcenode_modules-ErrorActionSilentlyContinue（在powershell终端执行） Remove-Item-Forcepackage-lock.json-ErrorActionSilentlyContinue（在powershell终端执行）npmcache clean --force（在cmd终端执行）

4. 配置构建npm（打开project.config.json）：

   {"setting":{"packNpmManually":true,"packNpmRelationList":[{"packageJsonPath":"./package.json","miniprogramNpmDistDir":"./"}]}}

5. 点击【工具】→【构建 npm】（出现miniprogram_npm文件夹），如果项目的本地设置有npm构建须打开；
6. 手动导入组件和样式，在需要使用 WeUI 的页面的 JSON 配置文件中引入组件（在app.json写会导致负担加载大）：

   {"usingComponents":{"mp-searchbar":"weui-miniprogram/searchbar/searchbar","mp-button":"weui-miniprogram/button/button","mp-cell":"weui-miniprogram/cell/cell","mp-cells":"weui-miniprogram/cells/cells","mp-icon":"weui-miniprogram/icon/icon","mp-form":"weui-miniprogram/form/form","mp-dialog":"weui-miniprogram/dialog/dialog","mp-toast":"weui-miniprogram/toast/toast","mp-loading":"weui-miniprogram/loading/loading","mp-slideview":"weui-miniprogram/slideview/slideview","mp-navigation-bar":"weui-miniprogram/navigation-bar/navigation-bar","mp-tabs":"weui-miniprogram/tabs/tabs","mp-tabbar":"weui-miniprogram/tabbar/tabbar","mp-card":"weui-miniprogram/card/card","mp-checkbox":"weui-miniprogram/checkbox/checkbox","mp-checkbox-group":"weui-miniprogram/checkbox-group/checkbox-group","mp-radio":"weui-miniprogram/radio/radio","mp-radio-group":"weui-miniprogram/radio-group/radio-group","mp-stepper":"weui-miniprogram/stepper/stepper","mp-half-screen-dialog":"weui-miniprogram/half-screen-dialog/half-screen-dialog","mp-action-sheet":"weui-miniprogram/action-sheet/action-sheet","mp-uploader":"weui-miniprogram/uploader/uploader","mp-badge":"weui-miniprogram/badge/badge","mp-popup":"weui-miniprogram/popup/popup","mp-progress":"weui-miniprogram/progress/progress","mp-avatar":"weui-miniprogram/avatar/avatar","mp-area":"weui-miniprogram/area/area","mp-picker":"weui-miniprogram/picker/picker","mp-date-picker":"weui-miniprogram/date-picker/date-picker"}}

   需要在app.wxss里面加入引用：

   @import'./miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

7. 在页面中直接使用引入的组件标签即可，注意：书写代码时不会有代码提示和建议。

3、直接下载方式（实用）

适合快速体验或不需要包管理工具的简单项目。

1. 访问 WeUI 的 GitHub 仓库，下载源码：
   https://github.com/wechat-miniprogram/weui-miniprogram/
   https://github.com/Tencent/weui-wxss

2. 在解压后的文件夹中，你需要两个东西：

   样式文件：路径为 /weui-wxss-master/dist/style/weui.wxss。
   组件源码：路径为 /weui-wxss-master/dist/example/ 下的各个组件文件夹（如 dialog、button 等）

   解压后，将dist/style目录下的weui.wxss文件复制到小程序项目的styles目录中，将dialog文件夹复制到你小程序项目的components目录下（如果没有这个目录，就新建一个）。

3. 在需要使用 app.wxss文件中引入样式：

   @import'../../styles/weui.wxss';

   在页面的 .json 文件中注册组件：

   {"usingComponents":{"mp-dialog":"/components/dialog/dialog"}}

4. 直接在页面中使用 WeUI 的类名和组件结构即可，或者将weui.wxss代码直接复制粘贴到页面的wxss文件。注意：书写代码时会有代码提示和建议。

注意事项

• 扩展库方式无需额外配置，但功能可能受限于官方提供的组件。
• npm 方式适合需要频繁更新或定制化需求的场景，但需要构建 npm。
• 直接下载方式适合快速开发，但后续更新需要手动替换文件。