uni-app开发攻略(一) 底部导航栏

搭建环境

开发者需分别安装如下工具：

• HBuilderX：内置uni-app编译器及项目模板，最新版本下载地址

• 微信开发者工具：编译调试小程序所用，最新版本下载地址

• ├─ components ··················· uni-app组件目录

• └──comp-a.vue ··················· 可复用的a组件

• ├── pages ······················· 业务页面文件存放目录

• ├─ index ······················ 使用到的字体文件

• └── index.vue ····················· index页面

• ├─ list ······················· 使用到的图片文件

• └── list.vue ····················· list页面

• ├─ static ··· 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此

• ├─ main.js ······················· Vue初始化入口文件

• ├─ App.vue ··· 应用配置，用来配置App全局样式以及监听

• ├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息 └─ pages.json····· 配置页面路由、导航条、选项卡等页面类信息

创建项目目录：(自定义项目名称)

默认选择unapp 默认模版即可

配置pages.json文件

{
    "pages": [ //pages数组中第一项表示应用启动页
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationBarBackgroundColor": "#eee"
            }
        },
        {
            "path": "pages/find/find",
            "style": {
                "navigationBarTitleText": "发现",
                "navigationBarBackgroundColor": "#eee"
            }
        },
        {
            "path": "pages/nav/nav",
            "style": {
                "navigationBarTitleText": "导航",
                "navigationBarBackgroundColor": "#eee"
            }
        },
        {
            "path": "pages/person/person",
            "style": {
                "navigationBarTitleText": "我的",
                "navigationBarBackgroundColor": "#eee"
            }
        }
    ],

    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#FF0000",
        "backgroundColor": "#F8F8F8"
    },

    "tabBar": {
        "color": "#cdcdcd",
        "selectedColor": "#39cffc",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "static/icon/index.png",
                "selectedIconPath": "static/icon/indexsl.png",
                "text": "首页"
            }, {
                "pagePath": "pages/find/find",
                "iconPath": "static/icon/find.png",
                "selectedIconPath": "static/icon/findsl.png",
                "text": "发现"
            },
            {
                "pagePath": "pages/nav/nav",
                "iconPath": "static/icon/nav.png",
                "selectedIconPath": "static/icon/navsl.png",
                "text": "导航"
            }, {
                "pagePath": "pages/person/person",
                "iconPath": "static/icon/person.png",
                "selectedIconPath": "static/icon/personsl.png",
                "text": "我的"
            }
        ]
    },

    "condition": { //模式配置，仅开发期间生效
        "current": 1, //当前激活的模式（list 的索引项）
        "list": [{
                "name": "首页", //模式名称
                "path": "pages/index/index", //启动页面，必选
                "query": "" //启动参数，在页面的onLoad函数里面得到。uid=100&t=1535987051
            },
            {
                "name": "发现", //模式名称
                "path": "pages/find/find", //启动页面，必选
                "query": "" //启动参数，在页面的onLoad函数里面得到。
            },
            {
                "name": "导航", //模式名称
                "path": "pages/nav/nav", //启动页面，必选
                "query": "" //启动参数，在页面的onLoad函数里面得到。uid=100&t=1535987051
            },
            {
                "name": "我的", //模式名称
                "path": "pages/person/person", //启动页面，必选
                "query": "" //启动参数，在页面的onLoad函数里面得到。
            }
        ]
    }
}