使用vue+uni-app开发天猫商城案例

随着微信app日渐成为人重要的生活工具，对的，生活工具！这样说一点也不过分，因为我们的日常生活已经依赖微信，包括日常的付款，社交，阅读，甚至购物。小程序应运而生也很快被大家所接受，因为小程序不用下载就可以使用，可是微信小程序有它自己的规范，我们可以去学习。可是很多时候，为了节省开发成本，最好就能只开发一个版本，然后编译成各种语言。感谢有vue.js 和 HBuilderX。今次利用HBuilderX和vue.js开发了一个天猫购物商城首页，供大家学习和参考。

先上效果图：

开发天猫商城首页排版有两个重点，文件的引入和v-for的使用。

组件是视图层的基本组成单元，所以根节点为 <template>，这个 <template> 下只能有一个根组件。我们整个天猫商城首页视图层都是在template标签完成。

现在来讲一下开发天猫商城首页的重点部分，之后再给项目代码。

【文件的引入】

Vue文件的引入需要使用import 关键词。

天猫商城例子我是用到uni-app组件，文件导入之后需要使用映入使用import 关键词引入到vue文件的js中。

例如：

import uniGrid from "@/components/uni-grid/uni-grid.vue"
import uniIcon from "@/components/uni-icon/uni-icon.vue"
export default {
        components: {uniIcon,uniGrid},
}

另外在项目里使用本地图片的时候，要引入图片到模版中。并且要给图片绑定变量。

例如：

Html部分：

<image class="main-img" :src="title.img" mode=""></image>

Js部分：

import img1 from "@/static/img-01.jpg"
import img2 from "@/static/img-02.jpg"
import img3 from "@/static/img-03.jpg"
import img4 from "@/static/img-04.jpg"

export default {
        
        
        data() {
            return {
                titles:[
                    {text:'限时抢购',img:img1},
                    {text:'天猫好物',img:img2},
                    {text:'聚划算',img:img3},
                    {text:'天猫闪购',img:img4}
                ]
}
}
}

【v-for的使用】

因为在实际开发项目时，很多都是格式一样，数据不一样，就想这个天猫商城首页的商品部分，排版格式都是一样的，只是图片标题和价格不一样，这时候我们可以使用v-for来便利数据，只需要在html模版部分添加样式和数据绑定的属性就可以。

例如：

// 猜你喜欢 
<view class="goods-content">
                <view class="goods-item" v-for='item in goods'>
                    <view class="img">
                        <image :src="item.img" mode=""></image>
                    </view>
                    <view class="goods-title">
                        {{item.title}}
                    </view>
                    <view class="footer">
                        <view class="price">
                            {{item.price}}
                        </view>
                        <view class="like">
                            看相似
                        </view>
                    </view>
                </view>
            </view>

在需要被遍历的元素的上一级，也就是父元素添加v-for属性，以便它的下一级都可以使用数组元素属性。

export default {
        data() {
            return {
                goods:[
                    {title:'迪士尼宝宝儿童帽潮薄款公主太阳帽',price:'￥52',img:goods1},
                    {title:'龙虎 清凉油 3g/盒 药品满88元包邮',price:'￥88',img:goods2},
                    {title:'风运动中长款修身连衣裙夏两件套装',price:'￥63',img:goods3},
                    {title:'华为荣耀v10/v20背夹充电宝9轻薄',price:'￥98',img:goods4}
                ]
}
}
}

【附上项目的完整代码】

<template>
     <view class="content" id="tmall">
         <!-- search -->
            <view class="uni-form-item uni-column header-search">
                <uni-icon class="search-icon" type="search" size="30"></uni-icon>
             <input class="uni-input header-input" confirm-type="search" placeholder="落地风扇" />
            </view>
            
            <!-- menu -->       
            <uni-grid :options="menu" column-num="5" show-border="false">
            </uni-grid>
            
            <!-- swiper -->
            <view class="uni-padding-wrap">
                <view class="page-section swiper">
                    <view class="page-section-spacing">
                        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
                            <swiper-item>
                                <view class="swiper-item">
                                    <image class='img-ad' src="//gw.alicdn.com/tps/i4/TB1ZgvOSxTpK1RjSZFMSuvG_VXa.jpg_790x10000Q75.jpg_.webp" mode=""></image>
                                </view>
                            </swiper-item>
                            <swiper-item>
                                <view class="swiper-item">
                                        <image class='img-ad' src="//gw.alicdn.com/tfs/TB1h3OGShjaK1RjSZFAXXbdLFXa-1035-390.jpg_790x10000Q75.jpg_.webp" mode=""></image>
                                </view>
                            </swiper-item>
                            <swiper-item>
                                <view class="swiper-item">
                                        <image class='img-ad' src="//gw.alicdn.com/imgextra/i2/26/O1CN01jrwKAz1C3woePAzH5_!!26-0-lubanu.jpg_790x10000Q75.jpg_.webp" mode=""></image>
                                </view>
                            </swiper-item>
                        </swiper>
                    </view>
                </view>
            </view>
        
            <!-- 优惠 -->
            <view class="main">
                <view class="main-item" v-for="title in titles">
                    <view>
                        <view class="title">{{title.text}}</view>
                    </view>
                    <view>
                        <image class="main-img" :src="title.img" mode=""></image>
                    </view>
                </view>
            </view>
            
            <!-- 热销单品 -->
            <view class="hot">
                <view class="hot-item hot_A" v-for="item in hottitle">
                    <view class="hot_title">
                        <view>{{item.titlea}}</view>
                        <view>{{item.titleb}}</view>
                        <view>{{item.titlec}}</view>
                    </view>
                    <image :src="item.image" mode=""></image>
                </view>
                
                <view class="hot-item" v-for="item in hots">
                    <view class="hot_title">
                        <view>{{item.titlea}}</view>
                        <view>{{item.titleb}}</view>
                        <view>{{item.titlec}}</view>
                    </view>
                    <image class="hot-img" :src="item.image" mode=""></image>
                </view>
            </view>
                    
            
            <!-- 猜你喜欢 -->
            <view class="goods-content">
                <view class="goods-item" v-for='item in goods'>
                    <view class="img">
                        <image :src="item.img" mode=""></image>
                    </view>
                    <view class="goods-title">
                        {{item.title}}
                    </view>
                    <view class="footer">
                        <view class="price">
                            {{item.price}}
                        </view>
                        <view class="like">
                            看相似
                        </view>
                    </view>
                </view>
            </view>
            
     </view>
</template>

<script>
    
    import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniIcon from "@/components/uni-icon/uni-icon.vue"
    
    import img1 from "@/static/img-01.jpg"
    import img2 from "@/static/img-02.jpg"
    import img3 from "@/static/img-03.jpg"
    import img4 from "@/static/img-04.jpg"
    
    import goods1 from "@/static/goods-01.webp.jpg"
    import goods2 from "@/static/goods-02.webp.jpg"
    import goods3 from "@/static/goods-03.webp.jpg"
    import goods4 from "@/static/goods-04.webp.jpg"
    

    export default {
        
        components: {uniIcon,uniGrid},
        data() {
            return {
                goods:[
                    {title:'迪士尼宝宝儿童帽潮薄款公主太阳帽',price:'￥52',img:goods1},
                    {title:'龙虎 清凉油 3g/盒 药品满88元包邮',price:'￥88',img:goods2},
                    {title:'风运动中长款修身连衣裙夏两件套装',price:'￥63',img:goods3},
                    {title:'华为荣耀v10/v20背夹充电宝9轻薄',price:'￥98',img:goods4}
                ],
                
                titles:[
                    {text:'限时抢购',img:img1},
                    {text:'天猫好物',img:img2},
                    {text:'聚划算',img:img3},
                    {text:'天猫闪购',img:img4}
                ],
                
                hots:[
                    {titlea:'人气榜',titleb:'品质优雅单鞋榜',titlec:'月销量22万',image:img1},
                    {titlea:'人气榜',titleb:'潮流时尚卫衣榜',titlec:'月销量22万',image:img3},
                    {titlea:'人气榜',titleb:'品质优雅单鞋榜',titlec:'月销量22万',image:img4},
                    {titlea:'人气榜',titleb:'潮流时尚卫衣榜',titlec:'月销量22万',image:img1}
            
                ],
                
                hottitle:[
                    {titlea:'人气榜',titleb:'潮流时尚卫衣榜',titlec:'月销量22万',image:img1},
                ],
            
                menu:[
                    {image:'//gw.alicdn.com/tfs/TB1ISdWSFXXXXbFXXXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',text:'圣诞树'},
                    {image:'//gw.alicdn.com/tfs/TB1wSoFa5qAXuNjy1XdXXaYcVXa-196-196.png?avatar=1_110x10000.jpg_.webp',text:'铃铛'},
                    {image:'//gw.alicdn.com/tfs/TB1Jc0fSFXXXXXTapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',text:'圣诞老人'},
                    {image:'//gw.alicdn.com/tfs/TB15lhOSFXXXXaKXpXXXXXXXXXX-147-147.png_110x10000.jpg_.webp',text:'礼物'},
                    {image:'//gw.alicdn.com/tfs/TB12CFXSFXXXXcpapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp',text:'帽子'}
                    ],
                    indicatorDots: true,
                    autoplay: true,
                    interval: 2000,
                    duration: 500,
            }
        },
        onLoad() {
        },
        methods: {
        changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
}
        }
    }
</script>

<style>
    body{
        background-color: #F1F1F1;
    }
        
    .header-search{
            background-color: rgb(255, 0, 54);
            padding: 6px;
        }
        
        .header-search .header-input{
            padding: 6px;
            background-color: #ffffff;
            border-radius: 5px;
            padding-left: 30px;
        }
        
        .header-search .search-icon{
            position: absolute;
            color: #C8C7CC;
        }
        
        .swiper{
            height: 120px;
        }
        
        .page-section.swiper{
            padding: 0 10px;
            
        }
        
        .img-ad{
            height: 120px;
            width: 100%;
        }
        
        .main{
            padding: 20px 10px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-row-gap: 8px;
            grid-column-gap: 8px;
            grid-auto-rows: 150px; 
        }
        
        .main-item{
            border-radius: 5px;
            overflow: hidden;
        }
        
        .main-item .title{
            font-size: 18px;
            font-weight: 600;
            padding-left: 10px;
            padding-top: 10px;
            position: absolute;
            z-index: 99;
        }
        
        .hot{
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            grid-auto-rows: 80px; 
            grid-row-gap: 8px;
            grid-column-gap: 8px;
            padding: 0 10px;
        }
        
        .hot .hot-item{
            background-color: #C8C7CC;
            overflow: hidden;
            
        }
        
        .hot .hot-item .hot_title{
            font-size: 12px;
            position: absolute;
            padding-top:20px;
            padding-left:10px;
            
        }
        
        .hot .hot-item >*{
            width: 100%;
            height: auto;
        }
        
        
        .hot .hot_A{
             grid-column-start: 1;
             grid-column-end: 3;
        }
        
        .goods-content{
            padding: 20px 10px;
            display: grid;
            grid-template-columns: repeat(2, 1fr); 
            grid-row-gap: 8px;
            grid-column-gap: 8px;
            
        }
        
        .goods-content .goods-item{
            display: flex;
            flex-direction: column;
            background-color: #FFFFFF;
            overflow: hidden;
        }
        
        .goods-content .img{
            padding: 10px;
            overflow: hidden;
            height: 120px;
        }
        
        .goods-content .goods-item .goods-title{
            padding: 10px;
            font-size: 14px;
            color: #333333;
        }
        
        .goods-content .goods-item .footer{
            padding: 10px;
            display: flex;
            justify-content: space-between;
            
        }
        .goods-content .goods-item .footer .price{
            color: rgb(255, 0, 0);
            font-weight: 600;
        }
        
        
        .goods-content .goods-item .footer .like{
            padding: 3px 5px;
            border: 10px;
            background-color: rgb(255, 230, 235);
            color: rgb(255, 0, 0);
            border-radius: 10px;
            font-size: 14px;
        }
</style>