前言

对于小程序电商首页设计是很重要的，因为顾客打开小程序第一个看到的页面都是首页，首页的设计即要能吸引顾客，也要展现重要的推广商品。

首页的设计主要分为以下几个部分：

1、形象展示

产品品牌是区别产品的重要标志之一，当顾客进入首页感受到这些差异并能够与其他首页有所区别，从而形成认知上的区分和对品牌的信任感。

2、搜索

用户使用搜索栏快速找到心仪的商品，快速定位目标。顾客从某一款商品页面进入首页时，意味着顾客可能有其他商品的消费需求，当顾客有明确的购买目的时，首页需要有搜索导购功能，帮助顾客快速方便地找到所需的商品。

3、推荐和活动

当顾客无明确购买需求时，需要一些推荐和活动来激发顾客的潜在购买需求，例如：新商品的推荐、促销打折、搭配减价。如果店铺正在做这些活动，就需要在首页的明显位置进行展示，以吸引客户下单。

一、首页设计

1.首页的业务逻辑

1. 使⽤tabbar 实现底部导航功能
2. 使⽤⾃定义组件的⽅式 实现 头部搜索框
3. 加载 轮播图 数据
4. 加载 导航 数据
5. 加载 楼层 数据

2.涉及的接口数据

1. 获取⾸⻚轮播图数据

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

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

3. 获取⾸⻚ 楼层数据

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

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

• es6的 promise
• ⼩程序 swiper 组件
• ⾃定义组件搜索框

二、首页相关代码

1.⾃定义组件搜索框

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

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

2.wx.request封装

// 同时发送异步代码的次数
let ajaxTimes=0;
export const request=(params)=>{// 判断 url中是否带有 /my/ 请求的是私有的路径 带上header tokenlet header={...params.header};if(params.url.includes("/my/")){// 拼接header 带上tokenheader["Authorization"]=wx.getStorageSync("token");}ajaxTimes++;// 显示加载中 效果wx.showLoading({title: "加载中",mask: true});// 定义公共的urlconst 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();}}});})
}

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})})},
})

<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-itemwx: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>

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

4.效果