使用小程序UI库

官网:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html
引入组件有2种方式:
一.npm

npm install --npm install --save weui-miniprogram

在app.wxss里引入

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

但是我在这里报错了
解决方法我把node_modules文件名改成nimoprogram_npm

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

在页面的 json 文件加入 usingComponents 配置字段

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

这部也改成

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

我看有的需要这样


使用小程序UI库_第1张图片
image.png

使用小程序UI库_第2张图片
image.png

但是我的依然报


使用小程序UI库_第3张图片
image.png

如果有人能为我解惑感激不尽
不过这样确实能用了
二、
通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小
这个方法比较方便,只需要在app.json引入

"useExtendedLib": {
    "weui": true
  },

页面json

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

你可能感兴趣的:(使用小程序UI库)