微信小程序可以npm安装UI组件库,文档位置:npm 支持 | 微信开放文档
npm需要先安装node,直接到Node.js,下载安装node即可使用npm了。
然后到小程序自己目录下打开cmd。
记住步骤不要错:
第一步:npm init
然后一直回车,喜欢填也可以填版本资料等。
第二步:npm install --production
有赞的UI组件库:https://github.com/youzan/vant-weapp
第三步:执行:npm i @vant/weapp -S --production 安装有赞UI
然后自己小程序目录下多了一个node_modules目录,里面就是自己刚下载的@vant有赞的一些UI组件。
找到这个工具——构建npm。便会在自己小程序目录下生成miniprogram_npm目录。比如想使用按钮 ,就在miniprogram_npm\@vant\weapp\button中。
在详情中,选上使用npm模块。
以按钮组件为例,只需要在 json 文件中引入按钮对应的自定义组件即可:
{
"usingComponents": {"van-button": "@vant/weapp/button/index"},
"navigationBarTitleText": "社区",
"enablePullDownRefresh": true
}
接着就可以在 wxml 中直接使用组件:
<van-button type="primary">按钮</van-button>
将 app.json 中的 "style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。有赞文档链接,新版小程序导致样式覆盖不了。及时更新。