4、微信小程序开发の底部路由导航

一、关于头部文字的设置：utils文件下的app.json里面可以设置商城头部文字
二、关于底部导航的设置
（1）在pages里面创建相关需要的路由导航。在pages上  右键 新建目录 名称为gouwuche
 在gouwuche上面右键新建page名称跟gouwuche同名即可
（同上方法需要几个路由页面就创建几个相对应的文件夹）
（2）复制以下代码到utils文件下的app.json文件内

image.png

 "tabBar": {
    "list": [
      {
        "pagePath": "pages/shouye/shouye",
        "text": "首页",
        "iconPath": "pages/images/home-off.png",
        "selectedIconPath": "pages/images/home-on.png"
      },
      {
        "pagePath": "pages/gouwuche/gouwuche",
        "text": "购物车",
        "iconPath": "pages/images/home-off.png",
        "selectedIconPath": "pages/images/home-on.png"
      },
      {
        "pagePath": "pages/wode/wode",
        "text": "我的",
        "iconPath": "pages/images/home-off.png",
        "selectedIconPath": "pages/images/home-on.png"
      }
    ]
  },

这里我们以3个为例，跟其他代码以逗号隔开，
pagePath：是我们新建的文件夹路径
text：是页面显示的文字
iconPath：是点击前显示的图片
selectedIconPath：是点击后显示的图片
//注：图片需要自行添加  我是在pages下面创建的images文件夹内存放的

image.png

//理论来说我们已经做好了，但是页面为什么不显示呢？？？

image.png

//这里是默认显示的路由页面，第一条为默认显示的，因为默认给的是index页面，
//这个页面我们没有操作，所以只需要把我们自己做的页面链接移动到第一条即可！