1.新建first-uni-app項目

1.png

項目初始目錄

2.png

2.調(diào)整項目結(jié)構(gòu)

3.png

3.配置pages.json

{
    "pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "主頁"
            }
        },
        {
            "path": "pages/ucenter/ucenter",
            "style": {
                "navigationBarTitleText": "主頁"
            }
        },
        {
            "path": "pages/ucenter/setting",
            "style": {
                "navigationBarTitleText": "個人設(shè)置"
            }
        }
        
    ],
    "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

<template>
    <view class="content">
        <view>
            <text class="title">{{title}}</text>
        </view>
    </view>
</template>

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

        },
        methods: {

        }
    }
</script>

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

5.ucenter.vue

<template>
    <view class="content">
        <view>
            <text class="title">{{name}}</text>
            <!-- 超鏈接 -->
            <navigator url="setting" hover-class="navigator-hover">
                <button type="primary">個人設(shè)置</button>
            </navigator>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name: '王欣雅'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400upx;
    }

    .title {
        font-size: 36upx;
        color: #8f8f94;
    }
</style>

6.啟動雷電模擬器或真機運行

控制臺顯示

4.png

運行結(jié)果

5.png

6.png

點設(shè)置可以跳轉(zhuǎn)到設(shè)置界面

7.png

注

uni-app官網(wǎng)：https://uniapp.dcloud.io/
阿里巴巴矢量圖標庫：https://www.iconfont.cn/