微信小程序安装weui

悠悠 2022-11-05 08:51 193阅读 0赞

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

npm init

1.  然后下包

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

再次下载包，成功！

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

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

1.  使用，这里拿官网的例子  
    在页面的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][request to https_registry.cnpmjs.org_vue failed_ reason_ Hostname_IP does not match certificate_s]  
> [快速上手 | 微信开放文档][Link 1]

[request to https_registry.cnpmjs.org_vue failed_ reason_ Hostname_IP does not match certificate_s]: https://blog.csdn.net/qq_39378657/article/details/107550663
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html