8、多端开发之uni-app起步

1.新建first-uni-app项目

1.png

项目初始目录

2.png

2.调整项目结构

3.png

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.vue

5.ucenter.vue

6.启动雷电模拟器或真机运行

控制台显示

4.png

运行结果

5.png

点我的可以跳转到我的界面

6.png

点设置可以跳转到设置界面

7.png

注

uni-app官网：https://uniapp.dcloud.io/
阿里巴巴矢量图标库：https://www.iconfont.cn/