二、基于uniApp+uView 的商城项目开发实战

1、项目页面基本配置（pages.json 文件的 配置）

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

常用配置项

属性 类型 必填 描述 平台兼容
globalStyle Object 否 设置默认页面的窗口表现
pages Object Array 是 设置页面路径及窗口表现
tabBar Object 否 设置底部 tab 的表现

更多请参考官网详解：
https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle

主要在pages.json 中配置了pages 、 globalStyle 、 tabBar 三项。预览效果如下：

基本配置后预览效果图

pages.json 代码如下：

{
    //单页配置
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    // pages内个性化定义页面配置，最上面为首页
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "励志大学堂"
            }
        },
        
        {
            "path" : "pages/cates/cates",
            "style" : 
            {
                "navigationBarTitleText" : "分类",
                "enablePullDownRefresh" : false
            }
        },
        {
            "path" : "pages/cars/cars",
            "style" : 
            {
                "navigationBarTitleText" : "购物车",
                "enablePullDownRefresh" : false
            }
        },
        {
            "path" : "pages/mine/mine",
            "style" : 
            {
                "navigationBarTitleText" : "个人中心",
                "enablePullDownRefresh" : false
            }
        }
    ],
    //全局页面配置
    "globalStyle": { //项目全局样式，如果某个页面没有单独定义样式，则默认使用全局样式
        "navigationBarTextStyle": "white",  //默认 页面标题颜色，只能设置 黑色或者白色
        "navigationBarTitleText": "大学堂",//默认页面标题内容
        "navigationBarBackgroundColor": "#ff4400",  //默认页面标题背景颜色
        "backgroundColor": "#F8F8F8",
        //"navigationStyle":"custom" //默认default  为custom时，页面顶部标题不显示
        "titleImage":"static/logo4.png"  //顶部标题图片替换文字 ，当设置图片后 ‘navigationBarTitleText’失效
    },
    "tabBar": {
        "color": "#333",  //页面名称默认文本颜色
        "selectedColor": "#ff4400", //被选中时 页面名称文本 颜色
        "list": [ //list数组内包含 底部导航对象
            {
                "pagePath": "pages/index/index", //页面路径 不要加 ‘ ./ ’
                "text": "首页", //页面名称 文字
                "iconPath": "../static/tabbar-index.png",  //页面图标路径
                "selectedIconPath": "../static/tabbar-index-active.png"  //活动时 页面图标路径
            },
            {
                "pagePath": "pages/cates/cates",
                "text": "首页",
                "iconPath": "../static/tabbar-cate.png",
                "selectedIconPath": "../static/tabbar-cate-active.png"
            },
            {
                "pagePath": "pages/cars/cars",
                "text": "首页",
                "iconPath": "../static/tabbar-car.png",
                "selectedIconPath": "../static/tabbar-car-active.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "首页",
                "iconPath": "../static/tabbar-mine.png",
                "selectedIconPath": "../static/tabbar-mine-active.png"
            }
        ]
    },
    "uniIdRouter": {}
}

2、首页制作

（1）搜索栏制作

UI框架：uView 2.0组件
组件名称：Search 搜索
参考官网教程及代码：https://www.uviewui.com/components/search.html

<template>
    <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
</template>

<script>
    export default {
        data() {
            return {
                keyword: '遥看瀑布挂前川'
            }
        }
    }
</script>

index.vue代码如下：

<template>
    <view class="content">
        <view class="search">
            <u-search 
            searchIconColor="#ff4400"
            searchIconSize="30"
            shape="round" 
            placeholder="请输入搜索内容" 
            margin="20rpx"
            height="72rpx"
            :showAction="false"
            @clickIcon = "mySearch"
            v-model="keywords"></u-search>
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keywords:''
            }
        },
        
        methods: {
            mySearch(){
                console.log("搜索内容是："+ this.keywords)
                
            }
        }
    }
</script>

<style lang="scss">
    .content {
        
        .search{
            width: 100%;
        }   
    }

</style>

（2）轮播图制作

UI框架：uView 2.0组件
组件名称：轮播图
参考官网网址：https://www.uviewui.com/components/swiper.html
基本使用
通过list参数传入轮播图列表值，该值为一个数组，键值为图片路径，例如：

<template>
    <u-swiper
            :list="list1"
            @change="change"
            @click="click"
    ></u-swiper>
</template>

<script>
    export default {
        data() {
            return {
                list1: [
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                ]
            }
        }
    }
</script>

本例通过在线获取服务器轮播图资源渲染到页面。

<template>
    <view class="content">
        <view class="search">
            <u-search 
            searchIconColor="#ff4400"
            searchIconSize="30"
            shape="round" 
            placeholder="请输入搜索内容" 
            margin="20rpx"
            height="72rpx"
            :showAction="false"
            @clickIcon = "mySearch"
            v-model="keywords"></u-search>
        </view>
        
        <!--轮播图 banner_list -->
        <view>
            <u-swiper 
            class="u-swiper" 
            indicator 
            indicatorActiveColor="red"
            indicatorInactiveColor="#ddd"
            indicatorMode="dot"
            :height="160" 
            interval="2000"
            :list="banner_list"></u-swiper>
        </view>
        <view>123</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keywords:'',
                banner_list:[]  //轮播图数据-初始化
            }
        },
        mounted() {
            this.getBannerData(); //页面加载完成后，获取轮播图数据
        },
        
        methods: {
            mySearch(){
                console.log("搜索内容是："+ this.keywords)
                
            },
            getBannerData(){
                uni.request({
                    url: 'http://139.196.29.250:8080/wx/home/index', //index页面数据 api
                    method: 'GET',
                    success: ({data}) => {
                        // console.log(data);
                        this.banner_list = data.data.banner;
                        this.banner_list= data.data.banner;
                        console.log(this.banner_list)
                    },
                    fail: () => {},
                    complete: () => {}
                });
            }
        }
    }
</script>

<style lang="scss">
    .content {
        
        .search{
            width: 100%;
        }

        .u-swiper{
    
        }
    }
</style>

针对上面代码中uView组件相关属性解释如下图所示：


uView组件轮播图常用属性解释

（3）宫格图片导航制作

UI框架：uView 2.0组件
组件名称：Grid宫格组件
参考官网网址：https://www.uviewui.com/components/grid.html
基本使用
通过list参数传入轮播图列表值，该值为一个数组，键值为图片路径，例如

Grid Props

参数 说明 类型 默认值 可选值
col 宫格的列数 String Number 3 -
border 是否显示宫格的边框 Boolean true false
align 宫格的对齐方式，用于控制只有一两个宫格时的对齐场景 String left center / right

Grid-item Props

参数 说明 类型 默认值 可选值
name 宫格的name String Number - -
bgColor 宫格的背景颜色 String transparent(背景透明) -

Grid Event

注意：请在<u-grid></u-grid>上监听此事件

事件名 说明 回调参数
click 点击宫格触发 name

Grid-item Event

注意：请在<u-grid-item></u-grid-item>上监听此事件

事件名 说明 回调参数
click 点击宫格触发 name

预览效果图如下：

宫格图片导航效果图
项目目录

index.vue代码如下：

<template>
    <view class="content">
        <view class="search">
            <u-search 
            searchIconColor="#ff4400"
            searchIconSize="30"
            shape="round" 
            placeholder="请输入搜索内容" 
            margin="20rpx"
            height="72rpx"
            :showAction="false"
            @clickIcon = "mySearch"
            v-model="keywords"></u-search>
        </view>
        
        <!--轮播图 banner_list -->
        <view>
            <u-swiper 
            class="u-swiper" 
            indicator 
            indicatorActiveColor="red"
            indicatorInactiveColor="#ddd"
            indicatorMode="dot"
            :height="160" 
            interval="2000"
            :list="banner_list"></u-swiper>
        </view>
        
        <!-- 宫格 图片导航 -->
        <view>
                <u-grid
                        :border="false"
                        col="5"
                >
                    <u-grid-item
                        class="u-grid-item"
                        v-for="(listItem,listIndex) in imgNavList"
                        :key="listIndex"
                        @click="gridClick"
                    >
                         <u-icon
                            :customStyle="{paddingTop:20+'rpx'}"
                            :name="listItem.iconUrl"
                            :size="40"
                         ></u-icon>
                        <text class="grid-text"> {{listItem.name}}</text>
                    </u-grid-item>
                </u-grid>
                <u-toast ref="uToast" />
            </view>
             <u-toast class="u-toast"   ref="uToast" /> <!-- 提示信息 -->
    </view>
</template>

<script>

    export default {
        data() {
            return {
                keywords:'',
                banner_list:[]  ,//轮播图数据-初始化
                imgNavList:[]   //宫格图片导航数据-初始化
            }
        },
        mounted() {
            this.getBannerData(); //页面加载完成后，获取轮播图数据
        },
        
        methods: {
            mySearch(){
                console.log("搜索内容是："+ this.keywords)
                
            },
            
            getBannerData(){
                uni.request({
                    url: 'http://139.196.29.250:8080/wx/home/index', //index页面数据 api
                    method: 'GET',
                    success: ({data}) => {
                        // console.log(data);
                        //banner 
                        this.banner_list = data.data.banner;
                        this.banner_list= data.data.banner;
                        // console.log(this.banner_list)
                        
                        //宫格 图片导航
                        console.log(data)
                        this.imgNavList = data.data.channel
                    },
                    fail: () => {},
                    complete: () => {}
                });
            },
            // 宫格 图片导航 鼠标单击响应
            gridClick(e){
                
                console.log(e)
                switch (e){
                    case 0: //居家
                        console.log(this.$router)
                        // this.$router.push('/pages/case_nav/case_jvjia/case_jvjia');  小程序页面报错
                        uni.navigateTo({  //跳转指定页面
                            url: '/pages/case_nav/case_jvjia/case_jvjia'
                        });
                        break;
                    case 1: //餐厨
                        uni.navigateTo({  //跳转指定页面
                            url: '/pages/case_nav/canchu/canchu'
                        });
                        break;
                    case 2: //饮食
                        uni.navigateTo({  //跳转指定页面
                            url: '/pages/case_nav/yinshi/yinshi'
                        });
                        break;
                    case 3: //配件
                        uni.navigateTo({  //跳转指定页面
                            url: '/pages/case_nav/peijian/peijian'
                        });
                        break;
                    case 4: //服装
                        uni.navigateTo({  //跳转指定页面
                            url: '/pages/case_nav/fuzhuang/fuzhuang'
                        });
                        break;
                    default: //其他
                         this.$refs.uToast.success(`点击了第${e+1}个`);
                        break;
                }
                
            }
    
        }
    }
</script>

<style lang="scss">
    .content {
        
        .search{
            width: 100%;
        }

        .u-swiper{
            
        }
        .u-grid-item{
            margin-top: 20rpx;
            
            .grid-text{
                font-size: 24rpx;
                margin-top: 20rpx;
                color: #333;
            }
        }
        .u-toast{
            background-color: red !important;
        }
    }
</style>

（4）商品列表栏制作

（5）搜索栏制作

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容