微信小程序:Vant Weapp组件库的使用

santu1年前 (2023-02-14)微信小程序278

官方文档:Vant Weapp - 轻量、可靠的小程序 UI 组件库 (gitee.io)



  1. npm初始化,根据需求填写内容,或者一路回车即可。

npm init


2.安装Vant Weapp组件库

npm i vant-weapp -S --production


3.构建npm

4.引入组件

    以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。

// app.json
"usingComponents": {
"van-button": "vant-weapp/button" }

5.使用组件

    引入组件后,可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

6.注意事项

    如果使用无效,尝试重新打开此项目

7.扫码查看官方模板

qrcode-201808101114.jpg


相关文章

微信小程序:页面跳转后去掉左上角的返回按钮

微信小程序:页面跳转后去掉左上角的返回按钮

跳转方式:wx.navigatorTo 【新页面打开,默认会有返回按钮】wx.redirectTo【当前页面打开,默认无返回按钮】wx.switchTab【只能用于跳转到tabbar页面,并关闭其他非...

微信小程序:tdesign组件库的使用

微信小程序:tdesign组件库的使用

新建终端npm initnpm i tdesign-miniprogram -S --production构建npm修改app.json=>删除...

微信小程序:组件的onLoad()实现

微信小程序:组件的onLoad()实现

onLoad()函数是页面加载时自动运行的,组件component使用另外一种方式达成同样的效果    // 组件生命周期声明对象(最重要的生命周期是...