公司开发需要，打算花几天的时间，使用uni-app做一个考勤打卡app，功能很简单，使用上下班打卡，具体的考勤时间显示，当天考勤缺勤的人数统计，以及登录界面，个人信息头像显示界面。

前面以及对于uni-app的编辑器下载安装，以及新建一个项目的模板作了说明了，今天就先手动配置一下底部导航，模块不多，四个就够了。

1：新建一个空白项目
文件，新建，项目，新建一个uni-app

选择运行，在浏览器运行，现在已经创建空白模板了，开始写项目

2：配置一下底部导航
当然可以选择新建模板就带有底部导航的模板，也可以自己手动配置，这里说一下手动配置对的步骤：

在pages里面新建4个页面

3：打开pages.json

写入新建的4个页面的路径

并且加上图标的路径

pages.json如下：

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/tabbar/tabbar-1/tabbar-1",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/tabbar/tabbar-2/tabbar-2",
            "style": {}
        },
        {
            "path": "pages/tabbar/tabbar-3/tabbar-3",
            "style": {}
        },
        {
            "path": "pages/tabbar/tabbar-4/tabbar-4",
            "style": {}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "borderStyle": "black",
    //  "backgroundColor": "#333",
        "color": "#8F8F94",
        "selectedColor": "#f33e54",
        "list": [{
                "pagePath": "pages/tabbar/tabbar-1/tabbar-1",
                "iconPath": "static/img/tabbar/home.png",
                "selectedIconPath": "static/img/tabbar/homeactive.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/tabbar/tabbar-2/tabbar-2",
                "iconPath": "static/img/tabbar/guanzhu.png",
                "selectedIconPath": "static/img/tabbar/guanzhuactive.png",
                "text": "关注"
            },
            {
                "pagePath": "pages/tabbar/tabbar-3/tabbar-3",
                "iconPath": "static/img/tabbar/news.png",
                "selectedIconPath": "static/img/tabbar/newsactive.png",
                "text": "消息"
            },
            {
                "pagePath": "pages/tabbar/tabbar-4/tabbar-4",
                "iconPath": "static/img/tabbar/me.png",
                "selectedIconPath": "static/img/tabbar/meactive.png",
                "text": "我的"
            }
        ]
    }
}

ok，导航做好了，接下来就是完善每一个页面 里面的具体内容啦：