微信小程序开发入门实战 （三）项目目录与tabBar 配置

为了贴合实战，这里附上3张UI图，接下来我们就是根据UI图来进行实战开发：

首页-ui
订单-ui
我的

项目目录以及文件结构

根据如图操作，创建我们需要的目录：

新建目录 新建页面

如下图所示，我们新建的目录结构就是这样的了。

项目目录以及文件结构

修改完成目录后，我们把根目录的 app.json 配置成如下：

{
  "pages": [
    "pages/home/home",
    "pages/order/order",
    "pages/user/user"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#4856DC",
    "navigationBarTitleText": "new-mini",
    "navigationBarTextStyle": "white",
    "backgroundColorTop": "#f5f5f5",
    "backgroundColorBottom": "#f5f5f5"
  },
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },
  "sitemapLocation": "sitemap.json"
}

这时我们可以看到一个基本的代码文件结构就构建完成了。下来我们就可以正式开发了。

tabBar 配置

tabBar 配置的api

tabBar 配置的api如图所示：

tabBar 配置的api

我们根据小程序默认的 tabBar 配置api进行配置后，如下图所示，这和我们的UI完全不匹配。为此我们需要依靠小程序提供文档来实现对默认tabBar的改动。更多tabBar的配置看这里：tabBar 配置、自定义 tabBar

截屏2020-06-01下午8.30.51.png

添加 tabBar 代码入口文件

在代码根目录下添加 tabBar 代码入口文件:

|--custom-tab-bar
|----image
|------...
|----index.js
|----index.json
|----index.wxml
|----index.wxss

如图：

tabBar 代码入口文件

相关图标地址如下：
首页：https://img.haomeiwen.com/i4645892/500e6fbe7c0db540.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
https://img.haomeiwen.com/i4645892/8cf2c4d3659f6f45.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
订单：https://img.haomeiwen.com/i4645892/ab89c2852966d5c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
https://img.haomeiwen.com/i4645892/8e9967baf9cdf117.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
用户：https://img.haomeiwen.com/i4645892/984344306732827a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
https://img.haomeiwen.com/i4645892/eef51f2722d3a396.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

配置 app.json

在app.json中，添加相关配置，修改如下：

{
  "pages": [
    "pages/home/home",
    "pages/order/order",
    "pages/user/user",
    "custom-tab-bar/index"
  ],
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#4856DC",
    "navigationBarTitleText": "new-mini",
    "navigationBarTextStyle": "white",
    "backgroundColorTop": "#f5f5f5",
    "backgroundColorBottom": "#f5f5f5"
  },
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },
  "sitemapLocation": "sitemap.json"
}

配置 custom-tab-bar/index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar {{show ? '' : 'is-hidden'}}">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view
    wx:for="{{list}}"
    wx:key="index"
    class="{{selected === index ? 'tab-bar-item is-active' : 'tab-bar-item'}}"
    data-path="{{item.pagePath}}"
    data-index="{{index}}"
    bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

配置 custom-tab-bar/index.js

// custom-tab-bar/index.js
Component({
  data: {
    show: true, // 是否显示
    selected: 0, // 选中的索引
    color: "#172A38", // 默认文字颜色
    selectedColor: "#4856DC", // 选中文字颜色
    // tabBar 列表
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "images/homeIconPath.png",
      selectedIconPath: "images/homeSelectedIconPath.png",
      text: "首页"
    }, {
      pagePath: "/pages/order/order",
      iconPath: "images/orderIconPath.png",
      selectedIconPath: "images/orderSelectedIconPath.png",
      text: "订单"
    }, {
      pagePath: "/pages/user/user",
      iconPath: "images/userIconPath.png",
      selectedIconPath: "images/userSelectedIconPath.png",
      text: "我的"
    }]
  },
  attached() {},
  methods: {
    // 切换 tabbar 时
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})

配置 custom-tab-bar/index.wxss

/* custom-tab-bar/index.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar.is-hidden {
  display: none;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  padding: 14rpx 0 12rpx 0;
  font-size: 20rpx;
  color: #172a38;
}

.tab-bar-item cover-image {
  width: 133rpx;
  height: 40rpx;
}

.tab-bar-item.is-active {
  color: #4856dc;
}

配置 custom-tab-bar/index.json

{
  "component": true
}

配置完成后，我们保存并编译后，页面如图：

配置完成页面

这时，我们可以看到我们页面底部tabbar已经配置完成了。

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。可参考底部的代码示例。

如果你需要在页面修改 tabbar 的相关属性，你可以通过 getTabBar 接口，例如：

this.getTabBar().setData({
  show: false
})

结语

提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。