微信小程序学习（二）——首页多页面切换

微信小程序学习（二）——首页多页面切换

本文主要介绍app.json的作用和使用。

本文主要参考：https://www.w3cschool.cn/weixinapp/hw9k1q8m.html

好，下面上货。

先看一下运行效果。

能够看到在下面有对应的menu菜单，能够进入首页，足迹和我的界面。

那么是如何实现的呢，下面我把主要代码放上。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/my/my"
  ],
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "selecctedColor": "#ffffff",
    "backgroundColor": "#eeeeee",
    "position":"bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"pages/img/menuicon/home.png",
        "selectedIconPath":"pages/img/menuicon/home2.png"
      },
      {
       "pagePath": "pages/logs/logs",
        "text": "足迹",
        "iconPath": "pages/img/menuicon/foot.png",
        "selectedIconPath": "pages/img/menuicon/foot2.png" 
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "pages/img/menuicon/my.png",
        "selectedIconPath": "pages/img/menuicon/my2.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  }
}

对应的目录结构如下：