微信小程序的Vant Weapp组件库

小程序 0

一、定义:

是一套开源的微信小程序UI组件库。提供了一整套UI基础组件和业务组件,能够快速地搭配出一套风格统一的页面

官方文档:介绍 - Vant Weapp (youzan.github.io)

 

二、使用:

(1)(找到.eslintrc.js 右键,在内件终端打开)打开命令提示符后,输入npm init -y命令,生成package.json文件

(2)在内件终端继续输入npm install @vant/weapp@1.10.4 -s -y 命令安装Vant Weapp包,

生成node_modules文件夹和package-lock.json文件

(3)修改app.json全局配置文件,将里面的”style“:“v2”配置项删除。因为小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱

(4)在菜单栏执行工具-》构建npm命令。构建npm

此时会多出一个文件夹 ,这里面就是vant-weapp组件库

 

三、测试vant是否装好:

(1)在app.json文件或页面的json文件中的usingComponents配置项中引用button组件

(2) 在index.wxml里写自定义按钮

<Van-button type="primary">我是vant组件库的按钮</Van-button>

四、vant  weapp组件库的自定义tabbar组件的使用:

注意:Tabbar组件,也可以用来作为小程序的自定义Tabbar使用

(1)理论知识:

微信小程序自定义tabbar的配置信息 

  • 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
  • 对于custom字段,它用于指定是否启用自定义tabBar。当custom字段设置为true时,小程序将不会自动使用默认的tabBar,而是会尝试读取项目根目录下的custom-tab-bar文件夹中的index组件,并将其作为自定义的tabBar进行渲染。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。

(2)在app.json文件或页面的json文件中的usingComponents配置项中引用自定义tabbar组件 

"usingComponents": {    "van-tabbar":"@vant/weapp/tabbar/index",    "van-tabbar-item":"@vant/weapp/tabbar-item/index"  },

(3)在app.json文件或页面的json文件中建立三个页面文件,以便于等下tabbar组件的切换

"pages": [        "pages/home/home",        "pages/message/message",        "pages/contact/contact"      ],

并且在每个文件的wxml页面写上对应的内容

(4)在app.json文件或页面的json文件中写好tabbar的属性配置:

"tabBar": {    "custom": true,    "list": [        {            "pagePath": "pages/home/home",            "text": "首页",            "iconPath": "/images/tabs/home.png",            "selectedIconPath": "/images/tabs/home-active.png"        },        {          "pagePath": "pages/message/message",          "text": "消息",          "iconPath": "/images/tabs/message.png",          "selectedIconPath": "/images/tabs/message-active.png"      },      {          "pagePath": "pages/contact/contact",          "text": "联系我们",          "iconPath": "/images/tabs/contact.png",          "selectedIconPath": "/images/tabs/contact-active.png"      }    ]},

(5)在pages下的是三个页面:contact、home、message页面的js文件下配置active选中状态

*通过onShow() 来更新 tabBar 的状态,进而来通知它哪个 tab 是当前活动的。*this.getTabBar() 是尝试获取 tabBar 的实例,然后使用 setData 方法来更新它的数据。

*对于自定义的 tabBaractive是自定义组件内部使用的一个数据属性,用来控制哪个 tab 应该显示为选中状态。

在pages下面的contact文件夹下的js文件里:

onshow是生命周期函数--用来监听页面显示

(7)结果显示:

点击不同的tabbar显示不同的页面

五、微信小程序中,自定义tabBar和默认的tabBar属性的区别

在微信小程序中,这二者有显著的区别,这不仅体现在配置方式和使用场景上,还体现在其功能和灵活性上。下面是对两者属性和操作的详细比较:

(1)自定义tabBar属性及操作

属性

  • custom:设置为true时启用自定义tabBar

操作

  1. 配置custom字段:在app.jsonapp.config.json文件中,将custom字段设置为true

    "tabBar": {"custom": true}
  2. 编写样式和逻辑:在自定义组件中编写tabBar的样式、图标和逻辑,如页面跳转、选中状态等。

  3. 页面间交互:如果需要在页面间与自定义tabBar进行交互(例如获取当前选中项或触发tabBar更新),可以通过全局状态管理或事件总线等方式实现。

(2)默认tabBar属性及操作

属性

  • color:未选中时的文字颜色。
  • selectedColor:选中时的文字颜色。
  • backgroundColor:背景色。
  • borderStyle:边框样式。
  • listtab项的列表。

操作

  1. 配置tabBar属性:在app.jsonapp.config.json文件的tabBar对象中设置上述属性。

    {"tabBar": {"color": "#999","selectedColor": "#007AFF","backgroundColor": "#FFFFFF","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/home.png","selectedIconPath": "images/home_selected.png"},// ... 其他tab项]}}
  2. 无需创建组件:使用默认tabBar时,无需创建额外的组件文件,所有配置均在app.jsonapp.config.json中完成。

(3)区别与注意事项

  • 灵活性:自定义tabBar提供了更高的灵活性,可以自定义样式、图标、动画等,但开发成本也相应增加。默认tabBar则较为简单,适用于基本的页面导航。

  • 开发成本:使用默认tabBar配置简单,几乎无需额外开发;而自定义tabBar则需要编写组件代码,并进行页面间的交互逻辑处理。

  • 兼容性:自定义tabBar需要确保在不同设备和微信版本上的兼容性;默认tabBar则具有更好的兼容性保障。

  • 更新与维护:自定义tabBar的样式和功能更新需要修改组件代码,而默认tabBar则可以通过修改配置快速更新。

(4)总结

在选择使用自定义tabBar还是默认tabBar时,应根据项目需求、开发资源和时间成本进行综合考量。对于需要高度个性化或复杂交互的场景,可以选择自定义tabBar;对于基本的页面导航和快速开发需求,使用默认tabBar更为合适。

也许您对下面的内容还感兴趣: