【愚公系列】2022年11月微信小程序-优购电商项目-首页设计

愚公搬代码

发布于 2022-11-14 17:10:06

4240

发布于 2022-11-14 17:10:06

文章被收录于专栏：历史专栏历史专栏

文章目录

前言

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

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

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

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

获取⾸⻚楼层数据

{
    "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 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();
      }
     }
    });
  })
}

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

.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.效果

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-11-02，如有侵权请联系 cloudcommunity@tencent.com 删除

http

小程序

微信

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

http

小程序

微信

登录后参与评论

0 条评论

热度

【愚公系列】2022年11月微信小程序-优购电商项目-首页设计

【愚公系列】2022年11月微信小程序-优购电商项目-首页设计

文章目录

前言

一、首页设计

1.首页的业务逻辑

2.涉及的接口数据

3.关键技术

二、首页相关代码

1.⾃定义组件搜索框

2.wx.request封装

3.首页页面

4.效果

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计

【愚公系列】2022年11月 微信小程序-优购电商项目-首页设计

文章目录

前言

一、首页设计

1.首页的业务逻辑

2.涉及的接口数据

3.关键技术

二、首页相关代码

1.⾃定义组件搜索框

2.wx.request封装

3.首页页面

4.效果

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

【愚公系列】2022年11月微信小程序-优购电商项目-首页设计

【愚公系列】2022年11月微信小程序-优购电商项目-首页设计