任务二工单1:首页展示界面研发

1.清空index.vue页面中内容

<template>
    <view class="container">
        <view>首页展示</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {  }
        }
    }
</script>

<style>
</style>

2.创建三个新的界面，主要为点餐配送界面menu、取餐信息界面take-foods、我的管理界面mine

1.png

2.png

3.png

4. 新建四大模块页面.png

3.引入静态资源images引入static文件下

5. 引入静态资源images.png

{
    "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "云鲤奶茶",
            "navigationStyle": "custom"
        }
    },
    {
        "path" : "pages/menu/menu",
        "style" : 
        {
            "navigationBarTitleText": "云鲤奶茶",
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#ffffff"
        }
    },
    {
        "path" : "pages/take-foods/take-foods",
        "style" : 
        {
            "navigationBarTitleText": "云鲤奶茶",
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#ffffff"
        }
    },
    {
        "path" : "pages/mine/mine",
        "style" : 
        {
            "navigationBarTitleText": "云鲤乐园",
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#ffffff"
        }
    }],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "app-plus": {
            "background": "#efeff4"
        }
    },
    "tabBar": {
        "color": "#919293",
        "selectedColor": "#97AF13",
        "backgroundColor": "#fff",
        "borderStyle": "black",
        "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "static/images/tabBar/index.png",
            "selectedIconPath": "static/images/tabBar/index_selected.png"
        }, {
            "pagePath": "pages/menu/menu",
            "text": "点餐",
            "iconPath": "static/images/tabBar/drink.png",
            "selectedIconPath": "static/images/tabBar/drink_selected.png"
        }, {
            "pagePath": "pages/take-foods/take-foods",
            "text": "取餐",
            "iconPath": "static/images/tabBar/take.png",
            "selectedIconPath": "static/images/tabBar/take_selected.png"
        }, {
            "pagePath": "pages/mine/mine",
            "text": "我的",
            "iconPath": "static/images/tabBar/mine.png",
            "selectedIconPath": "static/images/tabBar/mine_selected.png"
        }]
    }
}

5.对page.json中style、tabBar参数设置完成，运行项目至Chorme浏览器观察效果，如图表明成功

6.gif