微信小程序:使用VantUI组件库

微信小程序可以支持npm导入第三方库了(https://developers.weixin.qq…);VantUI是一个不错的移动UI组件库,下面我们在微信小程序中引入
第一步:

在小程序工程的根目录下执行:

npm init -y  //初始化
npm i vant-weapp -S --production 

第二步:
保证当前你的微信开发者工具是最新版本,然后点击执行“构建npm“
在这里插入图片描述
构建成功后会提示:
在这里插入图片描述
同时项目根目录中会多出一个目录“miniprogram_npm”,这个就是小程序可以识别的npm第三方库。
在这里插入图片描述
第三步:

这时候当我们需要在一个页面中调用vant组件,那么就要在对应的页面json中添加类似如下配置:
在这里插入图片描述

{
"usingComponents":{
 
  "van-button":"/miniprogram_npm/vant-weapp/button/index"
 }
}

接着你就可以在wxml中直接调用这个ui组件了。
在这里插入图片描述

注意,对于vant库来说其实你并不需要在页面对应的js中import vant-weapp组件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值