微信小程序weui导入项目的各种坑

问题1：把dist/style/weui.css 放到项目目录下，引用编译找不到文件

对于网上很多2018年帖子说下载源码，引用到项目里（按理说可以，但是微信开发工具编译会说找不到文件）这个问题，反正我是按网上的操作了，都不行。大体这种文章都是2020年以前的。我估计是随着版本升级后这个方式不行了。我包括试过把这个css粘贴到新建的wxss里引用也是有问题的。

问题2：构建npm包来实现引入文件，报错npm包不是内部或外部命令

也就是说我们需要先安装npm。npm需要安装nodejs。

---

有 两种办法

一种是useExtendedLib 扩展库，另一种是用npm构建。

下面方法使用npm构建

1.安装nodejs

下载连接在此 下载 | Node.js 中文网

安装就一路狂点Next就好了，环境变量这些现在的nodejs都会给你自动配置好，啥都不用管。

安装完成cmd命令下查下是否安装ok。输入node -v看nodejs版本。输入npm -v看npm版本。

2.微信开发工具开启“使用npm模块”

3.微信开发工具里安装production docxtemplater

 首先初始化npm，在项目的更目录下使用cmd命令

命令行输入：npm install -production docxtemplater

如果继续报错说npm不是内部或外部命令，请重新打开微信开发工具（我猜测他应该是没有获取到环境变量之类的）另外，网上有说要先初始化npm，需要在项目根目录下先执行npm init -f 初始化命令，再npm install --production docxtemplater。由于我操作的时候，跳过了这个步，也没遇到其他问题。

执行完成后，会在项目中多出了一个miniprogram_npm文件夹。 

4.微信开发工具构建npm

 

点击构建后，自动构建完成。

 

 构建完成后，在项目里会多出一个node_modules文件夹 

5.下载weui扩展库

 在miniprogram_npm根目录上执行cmd

输入 npm install --save weui-miniprogram

 执行成功后，在node_modules中会新增一个文件夹叫weui-miniprogram

再去“工具”-->"构建npm"进行构建（上文4.提到如何构建，不累述）

构建成功后，miniprogram_npm文件夹会多出一个weui-miniiprogram文件夹，里面是在官网看到的各种组件。至此完成了weui的项目引入。

---

在经过npm构建后的文件里，有个weui.wxss。而通过源码下载的叫weui.css。至此在项目中引用weui才不会报错了

6.使用weui测试下

在app.wxss中引用weui.wxss,这样其作用域就是全局的

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

 在需要测试的页面对应的json文件里加入

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

在 wxml 中直接使用该组件

    test content

在页面传值

Page({
    data: {
        buttons: [
        	{ text: '取消' },
        	{ text: '确认' }
        ]
    }
})

 

---

参考资料：

WeUI组件库简介 | 微信开放文档

快速上手 | wechat-miniprogram / weui