由于小程序tabbar只允许设置主包的页面，我们只能自己实现tabbar组件，将其应用于每个tabbar页面。查看最终效果

tabbar组件可参考官方自定义tabbar。

实现思路

1. 创建一个tabbar组件，用全局变量tabbarSelected作为tabbar的选中索引。
2. 将其引入需要tabbar的页面中，在页面的onLoad生命周期中设置tabbarSelected为对应的索引值。
3. 在tabbar组件所在页面的生命周期pageLifetimes的show内将tabbarSelected设置为tabbar选中索引值。
4. 点击tabbar时，使用redirectTo跳转到对应页面。

实现方式

1. 将官方示例的custom-tab-bar文件复制出来，放入到分包文件夹中。

2. 在app.js中加入全局变量tabbarSelected

   App({
     globalData: {
       tabbarSelected: 0
     }
   })
   

3. 修改tabar组件里的js文件，将data中的selected赋值为app.globalData.tabbarSelected，更改list里面的pagePath，组件所在页面的生命周期show内设置selected，更改switchTab方法。

   const app = getApp();
   
   Component({
     data: {
       selected: app.globalData.tabbarSelected,
       // ...
     },
     pageLifetimes: {
       show() {
         this.setData({
           selected: app.globalData.tabbarSelected
         });
       }
     },
     methods: {
       switchTab(e) {
         const data = e.currentTarget.dataset;
         const url = data.path;
         // 如果已经在当tabbar页面，直接返回
         if (data.index === app.globalData.tabbarSelected) {
           return;
         }
         app.globalData.tabbarSelected = data.index;
         this.setData({
           selected: data.index
         });
         wx.redirectTo({url});
       }
     }
   });
   

4. 在分包的tabbar页面的onLoad中设置全局变量tabbarSelected。

   const app = getApp();
   
   Page({
     onLoad() {
       app.globalData.tabbarSelected = 1;
     }
   });