微信小程序中使用tabBar

前景知识

前面我们学习过：在app.json里对小程序进行全局配置，app.json的文件内容是一个JSON对象，包含很多属性，其中一个常用属性就是 tabBar。如果小程序是一个多tab应用，就可以通过tabBar指定tab栏的表现，以及tab切换时显示的对应页面。

tabBar 的属性值也是一个对象，该对象包含以下常用属性：

• color，tab上文字的默认颜色，仅支持十六进制颜色，必填。
• selectedColor，tab上文字选中时的颜色，仅支持十六进制颜色，必填。
• backgroundColor，tab的背景颜色，仅支持十六进制颜色，必填。
• position，tabBar的位置，仅支持两个值：bottom和top ，默认值是bottom。
• list，tab的列表，是一个数组，数组元素最少2个，最多5个。每个数组元素都是一个对象，包含以下属性值：
  • pathPath，页面路径，必须在pages中定义，必填。
  • text，tab上的文字，必填。
  • iconPath，图片路径，非必填。icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position值为top时，不显示icon。
  • selectedIconPath，选中时的图片路径，非必填。icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。

小程序项目

pages下新建Page：home（主页）、camera（拍照）、user（个人中心）。

• pages/home/home.wxml、home.wxss、home.js、home.json
• pages/camera/camera.wxml、camera.wxss、camera.js、camera.json
• pages/user/user.wxml、user.wxss、user.js、user.json

项目根目录下新建文件夹：static，static下新建文件夹：images，images下新建文件夹：tabIcons，tabIcons下存放tabBar要用到的图标。

代码涉及的主要文件有：

1. app.json
2. pages/home/home.wxml
3. pages/camera/camera.wxml
4. pages/user/user.wxml

app.json

{
    
  "pages": [
    "pages/home/home",
    "pages/camera/camera",
    "pages/user/user"
  ],
  "window": {
    
    "navigationBarBackgroundColor": "#971a22",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    
    "color": "#000000",
    "selectedColor": "#971a22",
    "backgroundColor": "#ffffff",
    "list": [
      {
    
        "pagePath": "pages/home/home",
        "text": "主页",
        "iconPath": "/static/images/tabIcons/home.png",
        "selectedIconPath": "/static/images/tabIcons/home-fill.png"
      },
      {
    
        "pagePath": "pages/camera/camera",
        "text": "拍照",
        "iconPath": "/static/images/tabIcons/camera.png",
        "selectedIconPath": "/static/images/tabIcons/camera-fill.png"
      },
      {
    
        "pagePath": "pages/user/user",
        "text": "个人中心",
        "iconPath": "/static/images/tabIcons/user.png",
        "selectedIconPath": "/static/images/tabIcons/user-fill.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/home/home.wxml

<view class="camera">
  Here is Home Page
</view>

pages/camera/camera.wxml

<view class="camera">
  Here is Camera Page
</view>

pages/user/user.wxml

<view class="camera">
  Here is User Page
</view>

相关链接

新建微信小程序项目