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

简介: 这篇文章提供了一个微信小程序购物商城首页的实现方法和源码,包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。

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

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;
}
相关文章
|
4天前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
18 2
|
4天前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
11 0
|
8天前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
22 0
|
1月前
|
搜索推荐
2024微信个人名片在线生成HTML源码
微信个人名片卡片在线生成,这是一款微信个人名片生成网站源码,无第三方接口,本地直接生成可长期使用。 主要用于生成用户个性化的名片页面,包括头像、姓名、联系方式、个人介绍等信息。 在本地浏览器打开即可,源码是html的,也可上传到服务器上。
33 0
2024微信个人名片在线生成HTML源码
|
2月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
429 65
|
7天前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
39 7
ly~
|
18天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
57 6
|
2天前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
12 5
|
2天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
17 5