Day 10 多端开发uni-app起步

1、在Hbulider新建一个uni-app项目

新建项目

2、项目结构如图所示

项目初始结构

3、在pages文件下新建一个ucenter目录，然后新建ucenter和setting的两个页面，然后前往阿里巴巴矢量图标库：https://www.iconfont.cn/，找几张如图所示几张图标放置在static文件夹下。

项目结构如图

4、配置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/friends/friends",
                "iconPath": "img/center.png",
                "selectedIconPath": "static/center-active.png",
                "text": "朋友"
            }

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

5、编写一下index.vue和ucenter.vue内容

• index.vue

• ucenter.vue

• pages.json

{
    "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": "white",
        "navigationBarBackgroundColor": "#2F85FC",
        "backgroundColor": "#FFFFFF"
    }
}

6、启动安卓模拟器，选择真机运行

选择模拟器

底边通知栏

7、运行结果

主页

个人中心

• uni-app官网：https://uniapp.dcloud.io/