一、概述
使用uni-app x框架开发的一款多平台支持的电子商务平台。它的主要特点是一次开发，多处使用，可以同时在Android，iOS，鸿蒙next，Web，微信小程序等多个平台上运行。
效果如下：
二、tabBar
如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在 App 和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待 js 引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生 tab。
上面图片，底部展示的几个图标区域，就是tabBar
三、实现tabBar
目录结构
在pages目录，新建3个文件夹，cart，member，news，并在目录下，新增同名的uvue文件，结构如下：
./ ├── cart │ └── cart.uvue ├── index │ └── index.uvue ├── login │ └── login.uvue ├── member │ └── member.uvue └── news└── news.uvue
uvue文件，保持默认，在view里面，写对应的名字即可，比如cart.uvue内容如下：
<template><view>购物车</view> </template><script>export default {data() {return {}},methods: {}} </script><style></style>
在static目录，新增目录icon，用来放图标文件。
./ ├── cart-active.png ├── cart.png ├── home-active.png ├── home.png ├── member-active.png ├── member.png ├── news-active.png └── news.png
这个文件，大家可以从网络上，剪切一个即可。
最后修改pages.json，这个才是重点。
完整内容如下：
{"pages": [ //pages数组中第一项表示应用启动页，参考：https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html {"path": "pages/index/index"// "style": {// "navigationBarTitleText": "uni-app x"// } },{"path": "pages/login/login"},{"path": "pages/cart/cart"},{"path": "pages/member/member"},{"path": "pages/news/news"}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "uni-app x商城","navigationBarBackgroundColor": "#fe9b95","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},"tabBar": {"selectedColor": "#fe9b95","color": "#c0c0c0","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "/static/icon/home.png","selectedIconPath": "/static/icon/home-active.png"},{"text": "资讯","pagePath": "pages/news/news","iconPath": "/static/icon/news.png","selectedIconPath": "/static/icon/news-active.png"},{"text": "购物车","pagePath": "pages/cart/cart","iconPath": "/static/icon/cart.png","selectedIconPath": "/static/icon/cart-active.png"},{"text": "会员","pagePath": "pages/member/member","iconPath": "/static/icon/member.png","selectedIconPath": "/static/icon/member-active.png"}]} }
主要看tabBar相关参数：
- color：tab 上的文字默认颜色
- selectedColor：tab 上的文字选中时的颜色
- list：tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
其中 list 接收一个数组，数组中的每个项都是一个对象
- text：tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
- pagePath：页面路径，必须在 pages 中先定义
- iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
- selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
最后，重新编译运行，底部的tabBar，就可以正常显示了。