小程序-5（vant组件+全局数据共享+分包+tabBar案例）

在小程序中使用vant组件库，并实现全局数据共享，分包加载以及tabBar的配置。

首先，确保已经按照vant Weapp的文档安装并引入了vant组件库。

// 在项目根目录下的subpackages.json中配置分包
{
  "pages": [
    "pages/tabBar/tabBar-1/tabBar-1",
    "pages/tabBar/tabBar-2/tabBar-2"
    // ... 其他页面
  ],
  "subPackages": [
    {
      "root": "pages/subpackage",
      "pages": [
        "subpage/subpage"
      ]
    }
  ]
}

在app.json中配置tabBar：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/tabBar/tabBar-1/tabBar-1",
        "text": "Tab 1"
      },
      {
        "pagePath": "pages/tabBar/tabBar-2/tabBar-2",
        "text": "Tab 2"
      }
      // ... 其他tab
    ]
  }
}

在app.js中设置全局数据共享：

App({
  globalData: {
    userInfo: null
  },
  onLaunch: function () {
    // 小程序初始化时执行
  },
  getUserInfo: function(cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      // 调用登录API获取用户信息
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  }
})

在页面的.json配置中启用分包加载：

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/button/index"
  },
  "subpackages": [
    {
      "root": "pages/subpackage",
      "pages": [
        "subpage/subpage"
      ]
    }
  ]
}

在页面的.wxml中使用vant组件：

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

以上代码展示了如何在小程序中引入vant Weapp组件库，实现全局数据共享，配置分包加载以及tabBar的简单使用。