1.在HBuild X中新建uni-app

2.從icon-font下載自己所需要的logo,復制到static目錄下

3.配置pages.json

{
    "pages": [
        //pages數(shù)組中第一項表示應用啟動頁栏尚，參考：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中寫啟動界面

<template>
    <view class="container ">
        <text class="title">主頁,{{ title }}</text>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: 'Hello'
        };
    },
    onLoad() {},
    methods: {}
};
</script>

<style>
.container {
    width: 95%;
    margin: 0 auto;
    text-align: center;
}
.title {
    font-size: 36upx;
    color: #8f8f94;
}
</style>

5.在pages目錄下新建目錄ucenter與index并列借宵，創(chuàng)建ucenter.vue和setting.vue崭篡，ucenter.vue中代碼如下

<template>
    <view class="content">
        <view>
            <text class="title">{{title}}的個人中心</text>
            <navigator url="setting" hover-class="navigator-hover">
                <button type="primary">個人設置<tton>
            </navigator>
        <view>
        <view>
</template>

<script>
    export default {
        data() {
            return {
                title: '26'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }
    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
    
</style>

6.運行結(jié)果到Chrome然后調(diào)試為手機瀏覽狀態(tài)，結(jié)果如下