uni-app学习笔记-手动配置底部导航（二）
- 2019 年 12 月 11 日
- 筆記
公司开发需要，打算花几天的时间，使用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，导航做好了，接下来就是完善每一个页面 里面的具体内容啦：
