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

1、扩展库方式推荐在微信小程序中使用 WeUI 的扩展库方式是最轻量且官方推荐的方法。无需 npm 操作也不占用代码包体积。打开项目根目录下的app.json文件。在usingComponents字段中添加以下配置{useExtendedLib:{weui:true}}设置后即可在小程序中使用 WeUI 的组件无需额外下载或安装无需在页面的 .json 文件中再次声明 usingComponents可以直接在 .wxml 文件中使用组件标签weui.wxss亦是如此。注意书写代码时不会有代码提示和建议。2、npm 方式常用通过 npm 方式安装 WeUI 可以提供更高的灵活性适合需要定制化或后续更新的项目。下载node.js选择LST稳定版本并配置add to path开发者界面打开终端并且选择cmd打开Command Prompt 或 命令提示符执行输入指令注意是在根路径cd可以选择路径npminit-y出现package.jsonnpminstallweui-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终端执行配置构建npm打开project.config.json{setting:{packNpmManually:true,packNpmRelationList:[{packageJsonPath:./package.json,miniprogramNpmDistDir:./}]}}点击【工具】→【构建 npm】出现miniprogram_npm文件夹如果项目的本地设置有npm构建须打开手动导入组件和样式在需要使用 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;在页面中直接使用引入的组件标签即可注意书写代码时不会有代码提示和建议。3、直接下载方式实用适合快速体验或不需要包管理工具的简单项目。访问 WeUI 的 GitHub 仓库下载源码https://github.com/wechat-miniprogram/weui-miniprogram/https://github.com/Tencent/weui-wxss在解压后的文件夹中你需要两个东西样式文件路径为 /weui-wxss-master/dist/style/weui.wxss。组件源码路径为 /weui-wxss-master/dist/example/ 下的各个组件文件夹如 dialog、button 等解压后将dist/style目录下的weui.wxss文件复制到小程序项目的styles目录中将dialog文件夹复制到你小程序项目的components目录下如果没有这个目录就新建一个。在需要使用 app.wxss文件中引入样式import../../styles/weui.wxss;在页面的 .json 文件中注册组件{usingComponents:{mp-dialog:/components/dialog/dialog}}直接在页面中使用 WeUI 的类名和组件结构即可或者将weui.wxss代码直接复制粘贴到页面的wxss文件。注意书写代码时会有代码提示和建议。注意事项扩展库方式无需额外配置但功能可能受限于官方提供的组件。npm 方式适合需要频繁更新或定制化需求的场景但需要构建 npm。直接下载方式适合快速开发但后续更新需要手动替换文件。