前言

今天在写微信小程序的前端页面，想引入weui组件库来完成开发，结​​果按照官方文档遇到了不少问题，最后还是靠着不断百度查找资料才解决的。于是就把过程记录下来，避免以后再遇到这样的坑。

注意：本文假设读者已经知道如何使用 npm

1.初始化

以管理员身份运行命令行窗口（cmd），在cmd中进入项目根目录，然后输入以下命令：

npm init

直接一直按下键，就会在项目根目录中创建一个名为.json的文件。

2.安装weui组件库

然后在cmd中输入以下命令：

npm install weui-miniprogram

命令执行完成后，会多出一个文件夹，里面就是weui组件库。

3. 构建 npm

在微信开发者工具中，选择“工具”->“构建 npm”，如果没有出现异常，会出现类似“No NPM to ...”的错误提示。

这时需要在项目根目录下找到..json文件，修改相关配置，如下：

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

继续检查开发者工具里的“详细信息”->“本地设置”中“使用 npm 模块”选项是否勾选，如果没有勾选，则勾选。

完成以上配置后，重建npm即可完成构建。

4. 重启项目

在开发者工具中，点击“项目”->“重新打开此项目”，重新启动项目。

注意：这一步很重要！！！否则在导入组件的时候会提示找不到文件！！！

5.导入wxss

在app.wxss中，导入weui库的wxss文件

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

导入的时候路径要根据实际情况调整，但是最长的后缀是

/weui-miniprogram/weui-wxss/dist/style/weui.wxss

6. 导入组件

在你要使用组件的页面对应的js文件中导入该组件，一定要注意你项目的目录结构！！！

官方文档是这样写的

如果直接复制官方文档的话会忽略目录结构，会出错！！

然后在需要使用该组件的页面对应的wxml文件中使用该组件。

"test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test contentview> mp-dialog>

效果如下：

后记

不得不说前端开发的坑实在是太多了，上面记录的过程我花了一个多小时才搞清楚，看来日常中一定要多注意总结，不然真的会浪费很多时间！！！

创作不易，如果觉得有用的话，点个赞吧，谢谢~~~