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

小程序 0

1、实现效果

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

在这里插入图片描述

2、开发者工具效果图

在这里插入图片描述

3、项目的目录结构

在这里插入图片描述

4、首页核心代码

4.1 index.js

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

// index.jsimport { 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文件没用到，默认代码就行。如果不知道组件怎样创建，可以搜索以下，很容易实现。给出主要的布局和样式

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

也许您对下面的内容还感兴趣：