微信小程序制作购物商城首页【内包含源码】-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序制作购物商城首页【内包含源码】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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) {


    },




})

4.2 index.json

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

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

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>

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%;
}

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"
            }
        ]
    }
}

6、搜索框组件

微信小程序制作购物商城首页【内包含源码】,微信小程序实战项目,微信小程序,小程序
这里的js和json文件没用到，默认代码就行。如果不知道组件怎样创建，可以搜索以下，很容易实现。给出主要的布局和样式文章来源地址https://www.toymoban.com/news/detail-529107.html

6.1 SearchInput.wxml

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

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

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;
}