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

电玩女神 2022-06-01 04:49 1038阅读 0赞

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

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

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

好，下面上货。

先看一下运行效果。

![Center][]

![Center 1][]

![Center 2][]

能够看到在下面有对应的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
      }
    }

对应的目录结构如下：

![Center 3][]

[Center]: /images/20220601/ad9761d72f55447c975c4e05fc701c6a.png
[Center 1]: /images/20220601/c6142b851d8e44c3afea6a016ecad6bb.png
[Center 2]: /images/20220601/78382c50e4294c7d8a282197140ee4d8.png
[Center 3]: /images/20220601/1e4bd450f49b4e73bdae08109a20640e.png