二、基于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)搜索栏制作

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容