uni-app 是一個使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架岗照，開發(fā)者編寫一套代碼亭病，可編譯到iOS、Android整袁、H5坐昙、小程序等多個平臺。

項目準(zhǔn)備

在 HBuilderX 中新建 uni-app

調(diào)整如下的目錄結(jié)構(gòu)

代碼編寫

配置 pages.json 文件

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

填充 index.vue 內(nèi)容

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

填充 ucenter.vue 內(nèi)容

<template>
    <view class="container">
        <text>{{ name }}的個人中心</text>
        <navigator url="../ucenter/setting" hover-class="navigator-hover">
            <button type="default">設(shè)置</button>
        </navigator>
    </view>
</template>

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

<style>
.container {
    width: 95%;
    margin: 0 auto;
    text-align: center;
}
</style>

選擇啟動模式

可以選擇模擬器逆趣，真機模擬蝶溶，這里我們使用瀏覽器進行模擬。

image