小程序目录文件（pages.json）介绍 及 tabBar-demo

一、目录介绍

• 小程序的文件，大致就是这些；
• 
• ❗❗ 注意 ：
  • 小程序的所有 静态资源 只能放在 static 文件夹下，否则打包会出错；

二、pages.json介绍

{
    // 对应 pages 文件夹
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            // 页面对应的路径
            "path": "pages/index/index",
            // 当前页面的样式
            "style": {
                // 当前页面导航栏标题文字内容
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    // 全局样式：所有的页面都会生效
    "globalStyle": {
        // 导航栏标题颜色
        "navigationBarTextStyle": "black",
        // 导航栏标题文字内容
        "navigationBarTitleText": "uni-app",
        // 导航栏背景颜色
        "navigationBarBackgroundColor": "#F8F8F8",
        // 导航栏背景颜色
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}

• 当我们不知道某个配置项什么意思的时候，可以将鼠标悬停到具体的配置项上，编译器会有对应的提示信息，告诉我们这个配置项是用来干什么的；
  • 
• ❗❗ 注意 ：
  • navigationBarTitleText 配置项：
    • 如果单独配置了某个页面的标题，那么该标题就会覆盖全局样式中配置的标题；
  • navigationBarTextStyle 配置项：
    • 该配置项只有两个选项 black / white，其他配置项会报错；

三、创建文件

• 
• 
• 点击创建之后，就可以看到，在 pages 文件夹下会有我们创建的新页面，并且在 pages.json 中，自动配置了路由；

四、配置 tabBar （底部导航栏demo）

• 目标文件： pages.json；
• tabBar配置项：
  • 配置小程序的底部导航栏，list是个数组，里面存放具体每个页面的配置项（页面路径及对应的文本）
  • 注意 ：
    • list中至少包含2项，否则会报错；

{
    // 对应 pages 文件夹
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            // 页面对应的路径
            "path": "pages/index/index",
            // 当前页面的样式
            "style": {
                // 当前页面导航栏标题文字内容
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/my/my",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }
    ],
    // 全局样式
    "globalStyle": {
        // 导航栏标题颜色
        "navigationBarTextStyle": "white",
        // 导航栏标题文字内容
        "navigationBarTitleText": "uni-app",
        // 导航栏背景颜色
        "navigationBarBackgroundColor": "#27ba9b",
        // 导航栏背景颜色
        "backgroundColor": "#F8F8F8"
    },
    // tabBar配置项
    "tabBar": {
        // 修改tabBar选中时的文本颜色
        "selectedColor": "#27ba9b",
        "list": [
            {
                // 页面路径，不用写文件后缀
                "pagePath": "pages/index/index",
                // 导航标题
                "text": "首页",
                // 默认状态的图标
                "iconPath": "static/tabs/home_default.png",
                // 选中状态下的图标（高亮图标）
                "selectedIconPath": "static/tabs/home_selected.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/tabs/user_default.png",
                "selectedIconPath": "static/tabs/user_selected.png"
            }
        ],
    },
    "uniIdRouter": {}
}

五、真机预览

• 
• 需要添加 appId，才能在真机上查看具体的效果；
• 如何添加 appId ？
  • 获取 appId：
    • 前往 小程序注册地址 (qq.com) 进行注册，注册完成之后，按下图操作；
    • ；
    • 复制 appId 粘贴即可；
  • 添加 appId：
    •