day04 uni-app起步

1.在HBuild X中新建uni-app

2.从icon-font下载自己所需要的logo,复制到static目录下

3.配置pages.json

{
    "pages": [
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "主页"
            }
        },
        {
            "path": "pages/ucenter/ucenter",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/ucenter/setting",
            "style": {
                "navigationBarTitleText": "个人设置"
            }
        }
    ],
    "tabBar": {
        "color": "#000000",
        "selectedColor": "#2F85FC",
        "backgroundColor": "#FFFFFF",
        "borderStyle": "black",
        "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "static/home.png",
                "selectedIconPath": "static/home-active.png",
                "text": "主页"
            },
            {
                "pagePath": "pages/ucenter/ucenter",
                "iconPath": "static/center.png",
                "selectedIconPath": "static/center-active.png",
                "text": "我的"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

4.在index中写启动界面

5.在pages目录下新建目录ucenter与index并列，创建ucenter.vue和setting.vue，ucenter.vue中代码如下

6.运行结果到Chrome然后调试为手机浏览状态，结果如下