Kbone 使用小程序原生 tabbar（多页面）

1. 在 miniprograme.config.js 文件中配置 tabBar

在 gennerate 对象中配置 tabBar 相关信息

generate: {
    appEntry: 'miniprogram-app',
    autoBuildNpm: 'npm',
    // todo tabBar 配置
    tabBar: {
      // 以下三个属性与微信官方文档一致，为非自定义 tabBar 属性，使用自定义时可以省略不写
      // color: '#000000', // 字体颜色
      // selectedColor: '#07c160', // 选中时字体颜色
      // backgroundColor: '#ffffff', // 背景颜色
      
      // switchTab 页面，使用 pageName 代替官方的 pagePath 字段，其值为页面名称
      list: [
        {
          pageName: 'manage',
          text: '主页',
        }, 
        {
          pageName: 'goodManage',
          text: '挑选商品',
        }, 
        {
          pageName: 'personalCenter',
          text: '个人页',
        }
      ],
      // 使用自定义 tabBar，其值为需要拷贝到小程序 custom-tab-bar 目录的目录地址。
      custom: path.join(__dirname, '../src/components/customTabBar'),
  },

页面名称的官方文档：wechat-miniprogram.github.io/kbone/docs/…
参考资料：Kbone 官方配置文档

2. 编写原生的小程序 tabBar 组件代码

根据在 custom 下的引入路径，编写tabBar的代码

index.js

Component({
  lifetimes: {
    ready() {
      const { defaultSelect } = this.data;
      const selected = getApp().globalData.customTabbarSelect;
      this.setData({
        selected: selected === undefined ? defaultSelect : selected,
      });
    },
  },
  data: {
    isIphoneX: false,
    selected: 2,
    defaultSelect: 2,
    color: '#000000',
    selectedColor: '#07c160',
    backgroundColor: '#ffffff',
    list: [
      {
        pageName: 'manage',
        text: '主页',
        url: '/pages/manage/index',
        selectedIconPath: '',
      },
      {
        pageName: 'goodManage',
        text: '挑选商品',
        url: '/pages/goodManage/index',
        selectedIconPath: '',
      },
      {
        pageName: 'personalCenter',
        text: '个人页',
        url: '/pages/personalCenter/index',
      },
    ],
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const { index } = data;
      getApp().globalData.customTabbarSelect = index;
      wx.switchTab({
        url: this.data.list[index].url,
      });
    },
  },
});

index.wxml

<view class="custom_tab_bar">
  <block wx:for="{{list}}" wx:key="index">
    <view class="custom_tab_bar_item" data-index="{{index}}" bindtap="switchTab">
      <image src="{{selected==index?item.selectedIconPath:item.iconPath}}" class="custom_tab_bar_item_icon"></image>
      <view class="{{selected==index?'text_active':'text'}}">{{item.text}}</view>
    </view>
  </block>
</view>

index.json

// 一个空对象
{}

index.wxss

自己根据 wxml 写对相应的样式即可

结束

完成后再次进行打包，打包出的根目录下会增加一个 custom-tab-bar 的文件夹，里面的内容就是第二步编写的代码。
注意：tabbar page 只能用 switchTab 的方式进行跳转。用其他方法会报错。