-
【愚公系列】2022年10月 微信小程序-优购电商项目-首页设计
前言
对于小程序电商首页设计是很重要的，因为顾客打开小程序第一个看到的页面都是首页，首页的设计即要能吸引顾客，也要展现重要的推广商品。
首页的设计主要分为以下几个部分：
1、形象展示
产品品牌是区别产品的重要标志之一，当顾客进入首页感受到这些差异并能够与其他首页有所区别，从而形成认知上的区分和对品牌的信任感。
2、搜索
用户使用搜索栏快速找到心仪的商品，快速定位目标。顾客从某一款商品页面进入首页时，意味着顾客可能有其他商品的消费需求，当顾客有明确的购买目的时，首页需要有搜索导购功能，帮助顾客快速方便地找到所需的商品。
3、推荐和活动
当顾客无明确购买需求时，需要一些推荐和活动来激发顾客的潜在购买需求，例如：新商品的推荐、促销打折、搭配减价。如果店铺正在做这些活动，就需要在首页的明显位置进行展示，以吸引客户下单。
一、首页设计
1.首页的业务逻辑
- 使⽤tabbar 实现底部导航功能
- 使⽤⾃定义组件的⽅式 实现 头部搜索框
- 加载 轮播图 数据
- 加载 导航 数据
- 加载 楼层 数据
2.涉及的接口数据
- 获取⾸⻚轮播图数据
{ "message": [ { "image_src": "http://210.21.98.31:6005/pyg/banner1.png", "open_type": "navigate", "goods_id": 129, "navigator_url": "/pages/goods_detail/main?goods_id=129" }, { "image_src": "http://210.21.98.31:6005/pyg/banner2.png", "open_type": "navigate", "goods_id": 395, "navigator_url": "/pages/goods_detail/main?goods_id=395" }, { "image_src": "http://210.21.98.31:6005/pyg/banner3.png", "open_type": "navigate", "goods_id": 38, "navigator_url": "/pages/goods_detail/main?goods_id=38" } ], "meta": { "msg": "获取成功", "status": 200 } }- 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
2. 获取⾸⻚分类菜单数据{ "message": [ { "name": "分类", "image_src": "http://210.21.98.31:6005/pyg/icon_index_nav_4@2x.png", "open_type": "switchTab", "navigator_url": "/pages/category/main" }, { "name": "秒杀拍", "image_src": "http://210.21.98.31:6005/pyg/icon_index_nav_3@2x.png" }, { "name": "超市购", "image_src": "http://210.21.98.31:6005/pyg/icon_index_nav_2@2x.png" }, { "name": "母婴品", "image_src": "http://210.21.98.31:6005/pyg/icon_index_nav_1@2x.png" } ], "meta": { "msg": "获取成功", "status": 200 } }- 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
- 获取⾸⻚ 楼层数据
{ "message": [ { "floor_title": { "name": "时尚女装", "image_src": "http://210.21.98.31:6005/pyg/pic_floor01_title.png" }, "product_list": [ { "name": "优质服饰", "image_src": "http://210.21.98.31:6005/pyg/pic_floor01_1@2x.png", "image_width": "232", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=服饰" }, { "name": "春季热门", "image_src": "http://210.21.98.31:6005/pyg/pic_floor01_2@2x.png", "image_width": "233", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=热" }, { "name": "爆款清仓", "image_src": "http://210.21.98.31:6005/pyg/pic_floor01_3@2x.png", "image_width": "233", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=爆款" }, { "name": "倒春寒", "image_src": "http://210.21.98.31:6005/pyg/pic_floor01_4@2x.png", "image_width": "233", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=春季" }, { "name": "怦然心动", "image_src": "http://210.21.98.31:6005/pyg/pic_floor01_5@2x.png", "image_width": "233", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=心动" } ] }, { "floor_title": { "name": "户外活动", "image_src": "http://210.21.98.31:6005/pyg/pic_floor02_title.png" }, "product_list": [ { "name": "勇往直前", "image_src": "http://210.21.98.31:6005/pyg/pic_floor02_1@2x.png", "image_width": "232", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=户外" }, { "name": "户外登山包", "image_src": "http://210.21.98.31:6005/pyg/pic_floor02_2@2x.png", "image_width": "273", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=登山包" }, { "name": "超强手套", "image_src": "http://210.21.98.31:6005/pyg/pic_floor02_3@2x.png", "image_width": "193", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=手套" }, { "name": "户外运动鞋", "image_src": "http://210.21.98.31:6005/pyg/pic_floor02_4@2x.png", "image_width": "193", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=运动鞋" }, { "name": "冲锋衣系列", "image_src": "http://210.21.98.31:6005/pyg/pic_floor02_5@2x.png", "image_width": "273", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=冲锋衣" } ] }, { "floor_title": { "name": "箱包配饰", "image_src": "http://210.21.98.31:6005/pyg/pic_floor03_title.png" }, "product_list": [ { "name": "清新气质", "image_src": "http://210.21.98.31:6005/pyg/pic_floor03_1@2x.png", "image_width": "232", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=饰品" }, { "name": "复古胸针", "image_src": "http://210.21.98.31:6005/pyg/pic_floor03_2@2x.png", "image_width": "263", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=胸针" }, { "name": "韩版手链", "image_src": "http://210.21.98.31:6005/pyg/pic_floor03_3@2x.png", "image_width": "203", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=手链" }, { "name": "水晶项链", "image_src": "http://210.21.98.31:6005/pyg/pic_floor03_4@2x.png", "image_width": "193", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=水晶项链" }, { "name": "情侣表", "image_src": "http://210.21.98.31:6005/pyg/pic_floor03_5@2x.png", "image_width": "273", "open_type": "navigate", "navigator_url": "/pages/goods_list?query=情侣表" } ] } ], "meta": { "msg": "获取成功", "status": 200 } }- 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
3.关键技术
- ⼩程序内置 request API
https://api.zbztb.cn/api/public/v1/home/swiperdata https://api.zbztb.cn/api/public/v1/home/catitems https://api.zbztb.cn/api/public/v1/home/floordata- 1
- 2
- 3
- es6的 promise
- ⼩程序 swiper 组件
- ⾃定义组件搜索框
二、首页相关代码
1.⾃定义组件搜索框
<view class="search_input"> <navigator url="/pages/search/index" open-type="navigate"> 搜索 </navigator> </view>- 1
- 2
- 3
.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
2.wx.request封装
// 同时发送异步代码的次数 let ajaxTimes=0; export const request=(params)=>{ // 判断 url中是否带有 /my/ 请求的是私有的路径 带上header token let header={...params.header}; if(params.url.includes("/my/")){ // 拼接header 带上token header["Authorization"]=wx.getStorageSync("token"); } ajaxTimes++; // 显示加载中 效果 wx.showLoading({ title: "加载中", mask: true }); // 定义公共的url const baseUrl="https://api.zbztb.cn/api/public/v1"; return new Promise((resolve,reject)=>{ wx.request({ ...params, header:header, url:baseUrl+params.url, success:(result)=>{ resolve(result.data.message); }, fail:(err)=>{ reject(err); }, complete:()=>{ ajaxTimes--; if(ajaxTimes===0){ // 关闭正在等待的图标 wx.hideLoading(); } } }); }) }- 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
3.首页页面
// 0 引入 用来发送请求的 方法 一定要把路径补全 import { request } from "../../request/index.js"; Page({ data: { // 轮播图数组 swiperList: [], // 导航 数组 catesList:[], // 楼层数据 floorList:[] }, // 页面开始加载 就会触发 onLoad: function (options) { // 1 发送异步请求获取轮播图数据 优化的手段可以通过es6的 promise来解决这个问题 // wx.request({ // url: 'https://api.zbztb.cn/api/public/v1/home/swiperdata', // success: (result) => { // this.setData({ // swiperList: result.data.message // }) // } // }); this.getSwiperList(); this.getCateList(); this.getFloorList(); }, // 获取轮播图数据 getSwiperList(){ request({ url: "/home/swiperdata" }) .then(result => { this.setData({ swiperList: result }) }) }, // 获取 分类导航数据 getCateList(){ request({ url: "/home/catitems" }) .then(result => { this.setData({ catesList: result }) }) }, // 获取 楼层数据 getFloorList(){ request({ url: "/home/floordata" }) .then(result => { this.setData({ floorList: result }) }) }, })- 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
<view class="pyg_index"> <!-- 搜索框 开始 --> <SearchInput></SearchInput> <!-- 搜索框 结束 --> <!-- 轮播图 开始 --> <view class="index_swiper"> <!-- 1 swiper标签存在默认的宽度和高度 100% * 150px 2 image标签也存在默认的宽度和高度 320px * 240px 3 设计图片和轮播图 1 先看一下原图的宽高 750 * 340 2 让图片的高度自适应 宽度 等于100% 3 让swiper标签的高度 变成和图片的高一样即可 4 图片标签 mode属性 渲染模式 widthFix 让图片的标签宽高 和 图片标签的内容的宽高都等比例的发生变化 --> <swiper autoplay indicator-dots circular> <swiper-item wx:for="{{swiperList}}" wx:key="goods_id" > <navigator url="{{item.navigator_url}}"> <image mode="widthFix" src="{{item.image_src}}"></image> </navigator> </swiper-item> </swiper> </view> <!-- 轮播图 结束 --> <!-- 导航 开始 --> <view class="index_cate"> <navigator wx:for="{{catesList}}" wx:key="name" url="/pages/category/index" open-type="switchTab" > <image mode="widthFix" src="{{item.image_src}}" ></image> </navigator> </view> <!-- 导航 结束 --> <!-- 楼层 开始 --> <view class="index_floor"> <view class="floor_group" wx:for="{{floorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="floor_title" > <!-- 标题 --> <view class="floor_title"> <image mode="widthFix" src="{{item1.floor_title.image_src}}"></image> </view> <!-- 内容 --> <view class="floor_list"> <navigator wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="name" url="{{item2.navigator_url}}" > <image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image> </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
- 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
.index_swiper swiper { width: 750rpx; height: 340rpx; } .index_swiper swiper image { width: 100%; } .index_cate { display: flex; } .index_cate navigator { padding: 20rpx; flex: 1; } .index_cate navigator image { width: 100%; } .index_floor .floor_group .floor_title { 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%; /* 后四个超链接 */ /* 2 3 两个超链接 */ } .index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) { /* 原图的宽高 232 *386 */ height: 27.72711207vw; border-left: 10rpx solid #fff; } .index_floor .floor_group .floor_list navigator:nth-child(2), .index_floor .floor_group .floor_list navigator:nth-child(3) { border-bottom: 10rpx solid #fff; } .index_floor .floor_group .floor_list navigator image { width: 100%; height: 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
4.效果
-
相关阅读:
Python 多进程编程《*》：shared_memory 模块
elementPlus表格组件el-table实现只能同时选择一行，全选按第一行处理
（定时器/计数器）&中断系统（详解与使用）
大数据生态圈及分布式文件系统HDFS实践part2
Python自动化框架 【pytest 框架介绍】
使用关键字interface来声明使用接口-PHP8知识详解
手把手教你在windows上安装mysql8.0最新版本数据库，保姆级教学
有了这几个webp转换工具，快速完成图片转换工作
腾讯技术总监的转行感悟
StoneDB 亮相中国信通院OSCAR开源产业大会，石原子科技正式加入科技制造开源社区！
- 原文地址：https://blog.csdn.net/aa2528877987/article/details/127652554