devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序制作 购物商城首页 【内包含源码】_微信小程序购物商城源码

作者：知新_RL | 2024-06-20 15:12:35

赞

踩

微信小程序购物商城源码

1、实现效果

       手机效果预览，这里的首页使用到了轮播图。页面图片数据可以替换成自己的数据。

在这里插入图片描述

2、开发者工具效果图

在这里插入图片描述

3、项目的目录结构

在这里插入图片描述

4、首页核心代码

4.1 index.js

这里用来存放数据，页面的数据。目前是假数据，也可以调用接口接收真实数据

// index.js

import { request } from '../../request/index'

Page({
    data: {
        //轮播图数组
        swiperList: [
            {
                id: 0,
                name: "https://img.alicdn.com/imgextra/i3/O1CN01Sf6dER1zbJ3uVQ0lE_!!6000000006732-0-tps-846-472.jpg",
                navigator_url: "/pages/goods_detail/index?goods_id=1"
            },
            {
                id: 1,
                name: "https://gw.alicdn.com/imgextra/i4/O1CN01a71ilU1T2RCTvUXDY_!!6000000002324-0-tps-846-472.jpg",
                navigator_url: "/pages/goods_detail/index?goods_id=2"
            }, {
                id: 2,
                name: "https://img.alicdn.com/imgextra/i2/O1CN01XZC8Dd1IUs179sweg_!!6000000000897-2-tps-846-472.png",
                navigator_url: "/pages/goods_detail/index?goods_id=0"
            }

        ],

        //导航栏数组
        CateList: [
            {
                id: 0,
                name: "分类",
                image_src: "https://gw.alicdn.com/tfs/TB1WgOmesieb18jSZFvXXaI3FXa-183-144.png_q90.jpg_.webp?getAvatar=1"
            },
            {
                id: 1,
                name: "秒杀拍",
                image_src: "https://gw.alicdn.com/imgextra/i2/O1CN01ZOR1cv1yjGFORGh1V_!!6000000006614-2-tps-183-144.png_q90.jpg_.webp"
            },
            {
                id: 2,
                name: "超市购",
                image_src: "https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg_.webp"
            },
            {
                id: 3,
                name: "母婴品",
                image_src: "https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg_.webp"
            },

        ],

        //楼层数组
        FloorList: [
            {
                id: 0,
                name: "时尚女装",
                image_src: "",
                product_list: [
                    {
                        id: 0,
                        name: "优质服饰",
                        image_src: "https://gw.alicdn.com/bao/uploaded/i1/2208236021609/O1CN01DLYP6c1Nky6nD9aC5_!!2208236021609.jpg_300x300q90.jpg_.webp",
                    },
                    {
                        id: 1,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i3/1091712316/O1CN01SMxNDz1Sym8OPi9T4_!!1091712316.jpg",
                    },
                    {
                        id: 2,
                        name: "优质服饰",
                        image_src: "https://gw.alicdn.com/bao/uploaded/i2/2208175348975/O1CN01SLmyfQ2GAbWEbpOTM_!!2208175348975.jpg_300x300q90.jpg_.webp",
                    },
                    {
                        id: 3,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i4/3058655500/O1CN01MgaswB1qV3D8RiENd_!!3058655500.jpg",
                    },
                    {
                        id: 4,
                        name: "优质服饰",
                        image_src: "https://gw.alicdn.com/bao/uploaded/i1/2201235902250/O1CN01GLrvxY1SUXzJwEd7O_!!0-item_pic.jpg_300x300q90.jpg_.webp",
                    }
                ]

            },
            {
                id: 1,
                name: "时尚男装",
                image_src: "",
                product_list: [
                    {
                        id: 0,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i1/1093544511/O1CN017a1nJ01jC5P4QiIgz_!!1093544511.jpg",
                    },
                    {
                        id: 1,
                        name: "优质服饰",
                        image_src: "https://gw.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded/O1CN01mrx8Cz1xQeiSkAXRG_!!3656526438.jpg_300x300q90.jpg_.webp",
                    },
                    {
                        id: 2,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i3/1646032534/O1CN01NyzUbM1UacSALB0cb_!!1646032534.jpg",
                    },
                    {
                        id: 3,
                        name: "优质服饰",
                        image_src: "https://gw.alicdn.com/bao/uploaded/i1/97015806/O1CN01leYCHh1slCPHIKqzV_!!0-saturn_solar.jpg_300x300q90.jpg_.webp",
                    },
                    {
                        id: 4,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i1/1646032534/O1CN01AEmh1a1UacSFyZ12W_!!1646032534.jpg",
                    }
                ]

            },
            {
                id: 2,
                name: "时尚儿童装",
                image_src: "",
                product_list: [
                    {
                        id: 0,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i2/3862752450/O1CN01HvjRZK1Ty9CVnJh9K_!!3862752450.jpg",
                    },
                    {
                        id: 1,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i3/3862752450/O1CN01OnmqV11Ty9CYf5IjF_!!3862752450.jpg",
                    },
                    {
                        id: 2,
                        name: "优质服饰",
                        image_src: "https://gw.alicdn.com/imgextra/i4/1710394567/O1CN01mBkcxl1jbjdmcOkZ5_!!1710394567.jpg_110x10000Q75.jpg_.webp",
                    },
                    {
                        id: 3,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i1/2336264327/O1CN01bBny6N1hpobvL5Up0_!!2336264327.jpg",
                    },
                    {
                        id: 4,
                        name: "优质服饰",
                        image_src: "https://img.alicdn.com/imgextra/i2/2268125690/O1CN01K81koK1ru4SZhsQd9_!!2268125690.jpg",
                    }
                ]

            },


        ]
    },

    //页面开始加载 就会触发
    onload: function (options) {


    },




})


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167

4.2 index.json

这里调用到了搜索框的组件，博客下方给出搜索框的相关代码

{
  "usingComponents": {
    "SearchInput": "../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "商品首页"
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

4.3 index.wxml

<!-- index.wxml -->
<view class="pyg_index">
    <!-- 搜索框 开始 -->
    <SearchInput></SearchInput>
    <!-- 搜索框 结束 -->
    <!-- 轮播图 开始 -->
    <view class="index_swiper">
        <swiper autoplay indicator-dots circular>
            <swiper-item wx:for="{{swiperList}}" wx:key="id">
                <navigator>
                    <image mode="widthFix" src="{{item.name}}"></image>
                </navigator>
            </swiper-item>
        </swiper>
    </view>
    <!-- 轮播图 结束 -->
    <!-- 导航 开始 -->
    <view class="index_cate">
        <navigator open-type="switchTab" wx:for="{{CateList}}" wx:key="id">
            <image mode="widthFix" src="{{item.image_src}}" />
            <text>{{item.name}}</text>
        </navigator>
    </view>
    <!-- 导航 结束 -->
    <!-- 楼层 开始 -->
    <view class="index_floor">
        <view class="floor_group" wx:for="{{FloorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="id">
            <!-- 标题 -->
            <view class="floor_title">{{item1.name}}</view>
            <!-- 内容 -->
            <view class="floor_list">
                <navigator wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="id">
                    <image mode="{{index2 ===0 ? 'heightFix':'scaleToFill'}}" src="{{item2.image_src}}" />
                </navigator>
            </view>
        </view>
    </view>
    <!-- 楼层 结束 -->
</view>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

4.4 index.wxss

/**index.wxss**/
.index_swiper swiper {
  width: 100%;
  height: calc(100vm*352/1152);
}

.index_swiper image {
  width: 100%;
}

.index_cate {
  display: flex;
}

.index_cate navigator {
  padding: 20rpx;
  flex: 1;
  text-align: center;
}

.index_cate navigator image {
  width: 100%;
}

.index_floor .floor_group .floor_title {
  font-size: 34rpx;
  padding: 10rpx 0;
}

.index_floor .floor_group .floor_title image {
  width: 100%;
}

.index_floor .floor_group .floor_list {
  overflow: hidden;
}

.index_floor .floor_group .floor_list navigator {
  float: left;
  width: 33.33%;
  /* 后四个超链接 */
  /* 四 五 两个超链接 */
}

.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
  /* 
    原图的宽高 225 * 300
    225 / 300 = 33.33vm / height
    第一张图片高度 height:33.33 vm * 300 / 225
 */
  height: 120px;
  border-left: 10rpx solid #fff;
}

.index_floor .floor_group .floor_list navigator:nth-child(4),
.index_floor .floor_group .floor_list navigator:nth-child(5) {
  border-top: 5rpx solid #fff;
}

.index_floor .floor_group .floor_list navigator image {
  width: 100%;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

5、配置tabBar效果

app.json文件中

{
    "pages": [
        "pages/index/index",
        "pages/category/index",
        "pages/cart/index",
        "pages/user/index"
    ],
    "requiredPrivateInfos": [
        "choosePoi",
        "chooseAddress"
    ],
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用来进行接口调试"
        }
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#eb4450",
        "navigationBarTitleText": "小郑优购",
        "navigationBarTextStyle": "white"
    },
    "sitemapLocation": "sitemap.json",
    "tabBar": {
        "color": "#999",
        "selectedColor": "#ff2d4a",
        "backgroundColor": "#fafafa",
        "position": "bottom",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "icons/home.png",
                "selectedIconPath": "icons/home_after.png"
            },
            {
                "pagePath": "pages/category/index",
                "text": "分类",
                "iconPath": "icons/cateory.png",
                "selectedIconPath": "icons/category_after.png"
            },
            {
                "pagePath": "pages/cart/index",
                "text": "购物车",
                "iconPath": "icons/cart.png",
                "selectedIconPath": "icons/cart_after.png"
            },
            {
                "pagePath": "pages/user/index",
                "text": "我的",
                "iconPath": "icons/info.png",
                "selectedIconPath": "icons/info_after.png"
            }
        ]
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

6、搜索框组件

在这里插入图片描述
这里的js和json文件没用到，默认代码就行。如果不知道组件怎样创建，可以搜索以下，很容易实现。给出主要的布局和样式

6.1 SearchInput.wxml

<!--components/SearchInput/SearchInput.wxml-->

<view class="search_input">
    <navigator url="/pages/search/index" open-type="navigate">
        搜索
    </navigator>
</view>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

6.2 SearchInput.wxss

/* components/SearchInput/SearchInput.wxss */
.search_input {
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);
}
.search_input navigator {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border-radius: 15rpx;
  color: #666;
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/740200
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号