微信小程序电商实战（-）商城首页

首先在app.json中配置页面和底部tabbar

{
    "pages":[
        "pages/index/index",
        "pages/kind/kind",
        "pages/car/car",
        "pages/my/my" 
    ],
    "window":{
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#50a7e4",
        "navigationBarTitleText": "首页",
        "navigationBarTextStyle": "#fff",
        "enablePullDownRefresh": "true"
    },
    "tabBar": {
        "color": "#666",
        "selectedColor": "#41a5e5",
        "fontSize": "28rpx",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "pages/images/home.png",
                "selectedIconPath": "pages/images/home_in.png"
            }, 
            {
                "pagePath": "pages/kind/kind",
                "text": "分类",
                "iconPath": "pages/images/kind.png",
                "selectedIconPath": "pages/images/kind_in.png"
            }, 
            {
                "pagePath": "pages/car/car",
                "text": "购物车",
                "iconPath": "pages/images/car.png",
                "selectedIconPath": "pages/images/car_in.png"
            }, 
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "pages/images/mine.png",
                "selectedIconPath": "pages/images/mine_in.png"
            }
        ]
    },
    "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
    },
    "debug": true
}

正式开始写代码了，首先是index.wxml

<scroll-view scroll-y="true">
    <!-- 轮播图部分开始  -->
    <view class="banner">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="rgba(228,228,228,1)" indicator-active-color="#FECA49">
            <block wx:for="{{imgUrls}}">
                <swiper-item>
                    <image src="{{item}}" class="slide-image" width="355" height="200" />
                </swiper-item>
            </block>
        </swiper>
    </view>
    <!-- 轮播图部分结束 -->
    <!-- 搜索部分开始 -->
    <view class="search" bindtap='search'>
        <image src="../images/search.png"></image>
        <text>搜索商品</text>
    </view>
    <!-- 搜索部分结束 -->
    <!-- 特价列表开始 -->
    <view class="specialPrice">
        <view class="title">今日特价</view>
        <block wx:for="{{goodsList}}">
            <view class="goodsList">
                <image class="goodsPic" src='{{item.imgUrl}}' bindtap='goToDetail'></image>
                <view class="goodsInfo">
                    <view class="goodsTitle ellipsis2">{{item.title}}</view>
                    <view class="price">
                        <text class="fl newPrice">￥{{item.newPrice}}</text>
                        <text class="fl oldPrice">￥{{item.oldPrice}}</text>
                        <view>
                            <image class="fr car1" src='../images/car1.png' bindtap='showCar' data-id="{{item.id}}"></image>
                        </view>
                    </view>
                </view>
            </view>
        </block>
    </view>
    <!-- 特价列表结束 -->
</scroll-view>

接着index.wxss

.banner {
    width: 100%;
}

swiper {
    height: 240rpx;
}

image {
    width: 100%;
    display: block;
}

.kindList {
    padding-top: 20rpx;
    background: #fff;
}

.kindList .flex-item {
    float: left;
    width: 25%;
    text-align: center;
}

.flex-item image {
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto;
}

.imageGroup image {
    width: 100px;
    height: 100px;
}

.flex-item text {
    text-align: center;
    padding: 10rpx 0 20rpx;
    display: block;
    font-size: 28rpx;
}

.search {
    display: -webkit-flex;
    display: flex;
    align-items: center;
    width: 86%;
    padding: 12rpx 0;
    margin: 30rpx auto;
    border: 1px solid #d8d8d8;
    border-radius: 16rpx;
    background: #fff;
    color: #999;
}

.search image {
    width: 40rpx;
    height: 40rpx;
    margin: 0 10rpx;
}

.specialPrice {
    padding: 0 30rpx;
}

.title {
    margin: 20rpx 0;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 10rpx;
    font-size: 36rpx;
    font-weight: bold;
}

.goodsList {
    padding: 20rpx;
    border-bottom: 1px solid #d8d8d8;
    display: -webkit-flex;
    display: flex;
}

.goodsList:last-child {
    border-bottom: none;
}

.goodsList .goodsPic {
    width: 180rpx;
    height: 180rpx;
    border: 1px solid #d8d8d8;
}

.goodsInfo {
    padding: 0 20rpx;
    position: relative;
    flex: 1;
}

.goodsTitle {
    font-size: 32rpx;
    font-family: '微软雅黑';
}

.price {
    position: absolute;
    left: 20rpx;
    bottom: 0;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    align-items: flex-end;
}

.price .newPrice {
    font-size: 36rpx;
    margin-top: 10rpx;
    margin-right: 10rpx;
}

.price .oldPrice {
    text-decoration: line-through;
    color: #d8d8d8;
    font-size: 28rpx;
    margin-top: 20rpx;
    align-items: -webkit-flex-end;
}

.price view {
    flex: 1;
}

.car1 {
    width: 56rpx;
    height: 56rpx;
    background: #50a7e4;
    border-radius: 50%;
}

最后是index.js

//index.js
//获取应用实例
var app = getApp()
Page({
    data: {
        hidden: true,
        count: '1',
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        indicatorDots: true,
        autoplay: false,
        interval: 5000,
        duration: 1000,
        goodsList: [
            {
                id: 132,
                imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/858568558/TB2JQ.tbnAKL1JjSZFCXXXFspXa_!!858568558.jpg_b.jpg',
                title: '特仑苏整箱装特仑苏整箱装',
                oldPrice: 56,
                newPrice: 40
            },
            {
                id: 122,
                imgUrl: 'https://img.alicdn.com/bao/uploaded/i4/725677994/TB1nWgGaHsTMeJjy1zeXXcOCVXa_!!2-item_pic.png_b.jpg',
                title: '卫龙辣条100g装',
                oldPrice: 4,
                newPrice: 3
            },
            {
                id: 302,
                imgUrl: 'https://img.alicdn.com/bao/uploaded/i3/494858290/TB1.jYocxHI8KJjy1zbXXaxdpXa_!!0-item_pic.jpg_b.jpg',
                title: '洁丽雅纯棉毛巾',
                oldPrice: 9.9,
                newPrice: 8.8
            },
            {
                id: 498,
                imgUrl: 'https://img.alicdn.com/bao/uploaded/i1/858568558/TB2JQ.tbnAKL1JjSZFCXXXFspXa_!!858568558.jpg_b.jpg',
                title: '特仑苏整箱装特仑苏整箱装',
                oldPrice: 56,
                newPrice: 40
            },
            {
                id: 588,
                imgUrl: 'https://img.alicdn.com/bao/uploaded/i4/725677994/TB1nWgGaHsTMeJjy1zeXXcOCVXa_!!2-item_pic.png_b.jpg',
                title: '卫龙辣条100g装',
                oldPrice: 4,
                newPrice: 3
            },
            {

                id: 600,
                imgUrl: 'https://img.alicdn.com/bao/uploaded/i3/494858290/TB1.jYocxHI8KJjy1zbXXaxdpXa_!!0-item_pic.jpg_b.jpg',
                title: '洁丽雅纯棉毛巾',
                oldPrice: 9.9,
                newPrice: 8.8
            }
        ]
    },
    onLoad: function () {
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function (userInfo) {
            //更新数据
            that.setData({
                userInfo: userInfo
            })
        })
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    height: res.windowHeight + 'px'
                });
            }
        })
    },
    search: function (e) {
        wx.navigateTo({
            url: '/pages/search/search'
        })
    }
})

到这里，一个精美的微信小程序商城首页就呈现给大家了，如果发现有什么问题，可以留言交流。

后续会慢慢更新一个完整的项目。如果您看了觉得对您有帮助，请支持一下，谢谢