微信小程序系列——拓展组件库weui的npm引入

在引入之前，需要安装nodejs作为运行环境，具体 *** 作网上可以搜得到！

以引入vant为例：

输入npm init，下面的选择都用回车即可

npm i weui-miniprogram -S --production

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

"usingComponents": {

"mp-toptips": "//miniprogram_npm/weui-miniprogram/toptips/toptips"

}

<mp-toptips msg="{{tips}}" type="success" show="{{tips}}"></mp-toptips>

vant 很多组件带自定义样式custom-class，方便使用者修改或者扩展。

本文以vant-cell修改背景色为例，说明自定义属性的使用。

xml引入vant-cell

原始效果如下图

xml申明custom-class属性

wxss实现具体的样式

效果如下图，背景色样式已经被修改了，

Vant 是 有赞前端团队 开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本 、 Vue 3 版本 和 微信小程序版本 ，并由社区团队维护 React 版本 和 支付宝小程序版本 。

点击开发者工具中的菜单栏：工具 --> 构建 npm

以上就是关于微信小程序系列——拓展组件库weui的npm引入全部的内容，包括:微信小程序系列——拓展组件库weui的npm引入、微信小程序之vant组件自定义样式（外部样式）、小程序：使用Vant Weapp等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！