商城小程序需要四个底部导航按钮，遂记录一下实现过程
最终实现效果如下所示
新建一个小程序项目，我是创建了JS模板，项目创建完成后需要新建五个文件夹，其中四个（page子文件夹）用于存放pages文件，一个sources文件夹（与pages同级）用于存放资源文件，如图标文件
图标需要8个，因为选中的图标和未选中的图标需要进行区分
图标文件源于阿里巴巴矢量图库
需要在app.json中添加以下配置信息，其中tabBar是新增的，其余均为系统默认生成
{"pages": ["pages/Homepage/Homepage","pages/index/index","pages/logs/logs","pages/Mine/mine","pages/Recommend/recommend","pages/ShoppingCart/shoppingCart"],"tabBar": {"color": "#A9A9A9","selectedColor": "#000000","backgroundColor": "#FFFFFF","borderStyle": "black","position": "bottom","custom": false,"list": [{"pagePath": "pages/Homepage/Homepage","text": "首页","iconPath": "source/img/main.png","selectedIconPath": "source/img/main_selected.png"},{"pagePath": "pages/Recommend/recommend","text": "推荐","iconPath": "source/img/star.png","selectedIconPath": "source/img/star_selected.png"},{"pagePath": "pages/ShoppingCart/shoppingCart","text": "购物车","iconPath": "source/img/shop.png","selectedIconPath": "source/img/shop_selected.png"},{"pagePath": "pages/Mine/mine","text": "个人中心","iconPath": "source/img/my.png","selectedIconPath": "source/img/my_selected.png"}]},"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "Weixin","navigationBarBackgroundColor": "#ffffff"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}
