小程序商城实战开发案例教程

首先在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'
        })
    }})

复制代码

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


来源:春哥技术博客,欢迎分享,(春哥微信号:taike668)
上一篇:微擎二次开发教程之数据库基本操作PDO      下一篇:网页分享到微信朋友圈带有缩略图和简