AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-08-20 193
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章提供了一个微信小程序购物商城首页的实现方法和源码，包括页面布局、数据结构、核心代码以及如何配置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;
}
文章标签：
小程序
JavaScript
数据格式
开发者
JSON
关键词：
微信小程序源码
微信源码
微信商城
微信小程序商城
微信商城源码
热爱技术的小郑
目录
相关文章
diygwcom
|
1月前
|
存储 移动开发 小程序
小程序界面设计软件源码生成器
小程序界面设计软件源码生成器
diygwcom
61 5
diygwcom
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
diygwcom
34 2
diygwcom
|
30天前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
diygwcom
22 0
diygwcom
|
1月前
|
数据可视化 小程序 Cloud Native
DIY可视化业界领先的可视化快速生成FinClip小程序源码
DIY可视化业界领先的可视化快速生成FinClip小程序源码
diygwcom
28 0
diygwcom
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
diygwcom
31 0
刘大猫.
|
1月前
|
JavaScript
vue尚品汇商城项目-day06【43.微信支付业务】
vue尚品汇商城项目-day06【43.微信支付业务】
刘大猫.
32 0
热爱技术的小郑
|
3月前
|
小程序 前端开发
微信小程序商城，微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考，该项目在Github上获得18.2k星，提供了详细的使用教程和前端页面实现，适合学习微信小程序开发和作为毕业设计项目。
热爱技术的小郑
147 0
微信小程序商城，微信小程序微店 【毕业设计参考项目】
1313310884104708
|
3月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
1313310884104708
55 0
邹荣乐
|
26天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
389 7
邹荣乐
|
26天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
453 1

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    微信小程序scroll-view组件设置 scroll-top无效问题解决
  • 3
    【微信小程序】页面tabBar切换、下拉刷新
  • 4
    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
  • 5
    微信小程序 安装依赖 vant
  • 6
    Java微信小程序开发_00_资源帖
  • 7
    微信小程序：获取不限制的小程序码后端Java实现
  • 8
    微信小程序把玩（三十五）Video API
  • 9
    微信小程序：阿里云OSS直传实践-PHP实现服务端签名
  • 10
    微信小程序云开发数据库操作二查询记录
  • 1
    认养模式小程序系统开发|成熟技术|项目案例
    46
  • 2
    微信小程序echart图片不显示 问题解决
    59
  • 3
    小程序和vue写法的区别
    53
  • 4
    小程序和页面生命周期详解
    52
  • 5
    小程序；vue；uniapp优缺点（各5条）
    134
  • 6
    UniApp与微信小程序介绍及区别
    571
  • 7
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    542
  • 8
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（一）
    281
  • 9
    轻松学会微信小程序开发（一）
    214
  • 10
    使用阿里云短信+微信短链接跳转微信小程序
    476

    • 相关课程

    更多
  • IoT小程序框架课程
  • 网盘与相册服务产品介绍
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定

    • 相关电子书

    更多
  • 《使用Serverless服务快速开发小程序》
  • 《云市场-小程序》
  • 数字乡村建设方案

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
    • 下一篇
    阿里云OSS设置跨域访问