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

2022-11-14 17:10:06 浏览数 (1)

文章目录

  • 前言
  • 一、首页设计
    • 1.首页的业务逻辑
    • 2.涉及的接口数据
    • 3.关键技术
  • 二、首页相关代码
    • 1.⾃定义组件搜索框
    • 2.wx.request封装
    • 3.首页页面
    • 4.效果

前言

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

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

1、形象展示

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

2、搜索

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

3、推荐和活动

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

一、首页设计

1.首页的业务逻辑

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

2.涉及的接口数据

  1. 获取⾸⻚轮播图数据
代码语言：javascript复制
{
    "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. 获取⾸⻚分类菜单数据

代码语言：javascript复制
{
    "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. 获取⾸⻚ 楼层数据
代码语言：javascript复制
{
    "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
代码语言：javascript复制
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.⾃定义组件搜索框

代码语言：javascript复制
<view class="search_input">
  <navigator url="/pages/search/index" open-type="navigate"> 搜索 </navigator>
</view>
代码语言：javascript复制
.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封装

代码语言：javascript复制
// 同时发送异步代码的次数
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.首页页面

代码语言：javascript复制
// 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
      })
    })
  },
})
代码语言：javascript复制
<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>
代码语言：javascript复制
.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.效果

http 小程序 微信

0 人点赞