vant-weapp

vant-weapp是一个基于微信小程序的组件库，它由有赞前端团队开发和维护。vant-weapp提供了丰富的UI组件和丰富的功能，可以帮助开发者快速构建高品质的微信小程序应用。下面是vant-weapp的一些特点[^1]：

1. 提供了丰富的基础组件，如button、cell、toast等
2. 包含了各种常见业务场景所需的组件，如address-edit、coupon-cell、goods-action等
3. 提供了可定制的主题和多语言支持
4. 支持按需引入，不必全部引入所有组件

以下是演示如何快速搭建一个带有导航栏和tab栏的微信小程序应用:

1. 首先，可以通过npm安装vant-weapp，具体步骤可以参考vant-weapp的官方文档。

2. 在app.json文件中引入需要使用的组件，如下所示：[^2]

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/button/button"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "static/img/icon_home.png",
      "selectedIconPath": "static/img/icon_home_HL.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "static/img/icon_log.png",
      "selectedIconPath": "static/img/icon_log_HL.png"
    }]
  }
}

3. 在需要使用组件的wxml文件中引入组件，如下所示：[^2]

<!-- 引入导航栏组件 -->
<van-nav-bar
  title="导航栏"
  left-text="返回"
  left-arrow
  bind:click-left="onClickLeft"
/>

<!-- 引入tab栏组件 -->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="search">搜索</van-tabbar-item>
  <van-tabbar-item icon="friends-o">朋友</van-tabbar-item>
  <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
</van-tabbar>

4. 在对应的js文件中编写组件的交互逻辑，比如点击事件等，如下所示：[^2]

Page({
  data: {
    active: 0
  },

  onClickLeft() {
    wx.showToast({ title: '返回' });
  },

  onChange(event) {
    this.setData({ active: event.detail });
  }
});