微信小程序添加新页面(pages)及其底部导航栏(tabBar)

目录

1.添加新页面流程

2.设置小程序底部选项卡

        2.1 注意事项 

---

1.添加新页面流程

创建多页面需要在app.json文件中pages属性里添加上述代码

          注意：新建页面要与初始页面代码以","分开；

pages属性的详解：

创建成功保存后开发工具会自动生产相关的四个文件 如图： 

2.设置小程序底部选项卡

         在app.json文件中添加新属性"tabBar"在属性list中添加下部页面导航栏的详细属性

                其中四个属性：

                        "pagePath": "pages/index/index"表示该页面的代码文件路径

                        "text": "首页"表示底部导航图标下的文字内容

                        "iconPath": "/image/shouye.png"表示未选中页面时导航栏显示的图标

                        "selectedIconPath": "/image/shouyea.png"表示选中时导航栏显示的图标

            ****图片路径文件夹要存放在与pages文件同目录，如图：

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/image/shouye.png",
      "selectedIconPath": "/image/shouyea.png"
    },
    {
      "pagePath": "pages/login/login",
      "text": "我的",
      "iconPath": "/image/me.png",
      "selectedIconPath": "/image/mea.png"
    },
    {...},
    {...}]
  }

        2.1 注意事项 

                注意：底部导航栏至少两个，至多五个，也就是"tabBar"属性中list中只能添加2-5个内容，不符合规定会报错 。

 底部导航栏效果图：