微信小程序安装weui

1. 在项目根目录下执行：

npm init

2. 然后下包

npm install --save weui-miniprogram

然后报了这么一段错

npm ERR! code ERR_TLS_CERT_ALTNAME_INVALID
npm ERR! errno ERR_TLS_CERT_ALTNAME_INVALID
npm ERR! request to https://registry.cnpmjs.org/weui-miniprogram failed, reason: Hostname/IP does not match certificate’s altnames: Host: registry.cnpmjs.org. is not in the cert’s altnames: DNS:r.cnpmjs.org
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2021-03-04T15_43_20_662Z-debug.log

关闭npm的https（取消npm的https认证），执行：

npm config set strict-ssl false

再次下载包，成功！

3. 构建npm模块
   工具——构建npm
4. 使用npm
   详情——本地设置——使用npm模块
5. 引入weui样式
   根目录下的app.wxss文件中引入

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

6. 使用，这里拿官网的例子
   在页面的json文件中配置字段

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

在对应的wxml文件中使用

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

参考文档
request to https://registry.cnpmjs.org/vue failed, reason: Hostname/IP does not match certificate‘s
快速上手 | 微信开放文档