微信小程序前端开发踩坑——引入weui组件库 - WXOPEN Club

前言

今天在写微信小程序前端页面，想引入weui组件库来完成开发。结果按着官方文档来遇到了一堆问题，最后靠着不断百度查资料才最终解决。所以将过程记录一下，避免后面再遇到这类坑。
注意：本文默认读者已知道怎么使用npm

1. 初始化

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

npm init

后面一路按回车健即可，最终会在项目的根目录中创建出一个名为package.json的文件。

2. 安装weui组件库

在cmd中紧接着输入以下命令：

npm install weui-miniprogram

命令执行完毕后会多出来一个node_modules文件夹，里面包含了weui组件库。

3. 构建npm

在微信开发者工具中，选择“工具”->“构建npm”。如无意外会出现类似“没有找到可以构建的NPM包……”这样的报错。
这时就需要在项目根目录找到package.config.js文件，修改相关的配置如下：

{
  ...
  "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文件中使用该组件即可

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