黑马优购小程序之首页模块开发(banner 分类导航楼层等)

系统管理员 2023-07-09 14:27 11阅读 0赞

### 文章目录 ###

*   *   *  1.1 效果图
         *  1.2 搜索框
         *   *  1.2.1 新建组件
             *  1.2.2 编写组件
             *  1.2.3 引用组件
             *  1.2.4 使用组件
             *  1.2.5 效果预览
         *  1.3 轮播图
         *   *  1.3.1 获取网络数据
             *  1.3.2 编写UI
         *  1.4 Promise请求
         *   *  1.4.1 新建请求\`index.js\`文件
             *  1.4.2 导入\`request\`
             *  1.4.3 替换请求
         *  1.5 分类导航
         *   *  1.5.1 声明分类导航数组
             *  1.5.2 构建网络请求
             *  1.5.3 编写UI
             *  1.5.4 效果图
         *  1.6 楼层
         *   *  1.6.1 声明楼层数组
             *  1.6.2 构建网络请求
             *  1.6.3 编写UI
             *  1.6.3 效果图
         *  1.7 小结

### 1.1 效果图 ###

首页实现效果图如下，并过了模块拆分，拆分为：

*  头部搜索
 *  轮播图
 *  导航
 *  楼层  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]

### 1.2 搜索框 ###

搜索框在项目内好几处都会使用到，因此，将其封装为组件。

#### 1.2.1 新建组件 ####

在`components`目录下新建`SearchInput`文件夹，并通过小程序开发工具，新建组件`SearchInput`。

#### 1.2.2 编写组件 ####

在`SearchInput.wxml`中编写页面，此处点击跳转搜索页面，代码如下：

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

此处，使用`less`编写样式，其会自动编译为`wxss`。  
新建`SearchInput.less`，根据UI效果，样式代码如下：

.search_input{ 
        height: 90rpx;
        padding: 15rpx;
        background-color: var(--themeColor);
        navigator{ 
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            border-radius: 15rpx;
            color: #666;
        }
    }

#### 1.2.3 引用组件 ####

在`index/index.json`中，配置引入组件，代码如下：

{ 
      "usingComponents": { 
        "SearchInput":"../../components/SearchInput/SearchInput"
      },
      "navigationBarTitleText": "优购首页"
    }

#### 1.2.4 使用组件 ####

在`index/index.wxml`中使用声明的组件，代码如下：

<SearchInput></SearchInput>

#### 1.2.5 效果预览 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]

### 1.3 轮播图 ###

> 轮播图需要使用到小程序提供的`swiper`和`swiper-item`组件。

#### 1.3.1 获取网络数据 ####

在首页启动的时候就应该获取轮播图数据，so，在`index/index.js`中`Page`对象的`onLoad`方法中请求数据接口，并把轮播图`list`赋值给声明的`swiperList`，代码如下：

/** * 页面的初始数据 */
      data: { 
        swiperList: []
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        var reqTask = wx.request({ 
          url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
          success: (result) => { 
            console.log(result)
            this.setData({ 
              swiperList: result.data.message
            })
          }
        });
      },

此时，报错如下：![在这里插入图片描述][20200229112416454.png]  
稳住，不要慌，[点我查看一站式解决方案][Link 1]。

#### 1.3.2 编写UI ####

在`index/index.wxml`中编写轮播图，代码如下：

<view class="index_swiper">
        <swiper indicator-dots="{ {true}}" autoplay="true" circular="{ {true}}" interval="2000">
            <swiper-item wx:for="{ { swiperList }}" wx:key="goods_id">
                <navigator>
                    <image src="{ {item.image_src}}" />
                </navigator>
            </swiper-item>
        </swiper>
    </view>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 2]  
很明显，太丑陋了，完全不符合预期，那么接着来美化下吧。

首先为什么会这么显示呢，原因有二：

*  `swiper`存在默认的宽度和高度，分别为100%和150px
 *  `image`存在默认的宽度和高度，分别为320px和240px

知道了原因，那接下来就开始优化了：

*  让图片的高度自适应，宽度为100%
 *  给`image`标签设置`mode`属性为`widthFix`，让图片的标签宽高和图片标签的内容宽高都等比例发生变化
 *  确认原图宽高，此处为750 \* 340
 *  让`swiper`标签的高度和图片的高度一样

修改后的`index/index.wxml`如下：

<view class="index_swiper">
    
        <swiper indicator-dots="{ {true}}" autoplay="true" circular="{ {true}}" interval="2000">
            <swiper-item wx:for="{ { swiperList }}" wx:key="goods_id">
                <navigator>
                    <image mode="widthFix" src="{ {item.image_src}}" />
                </navigator>
            </swiper-item>
        </swiper>
    </view>

修改后的`index/index.less`，内容如下：

.index_swiper{ 
        swiper{ 
            height: 340rpx;
            image{ 
                width: 100%;
            }
        }
    }

最终效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 3]  
有木有爽歪了~

### 1.4 Promise请求 ###

> 上文中，使用小程序提供的原生API做的网络请求，当依赖请求非常多时，就会造成函数嵌套回调混乱，so，在这先将请求封装为`promise`形式。

#### 1.4.1 新建请求`index.js`文件 ####

在`request`文件夹中，新建`index.js`，代码如下：

export const request=(params)=>{ 
        return new Promise((resolve,reject)=>{ 
            wx.request({ 
                ...params,
                success: (result)=>{ 
                    resolve(result);
                },
                fail: (error)=>{ 
                    reject(error);
                }
            });
        })
    }

#### 1.4.2 导入`request` ####

在`index/index.js`中导入上文创建的`request`对象，代码如下：

import {  request } from "../../request/index.js"

#### 1.4.3 替换请求 ####

onLoad: function (options) { 
        request({ 
          url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
        }).then(result => { 
          console.log(result)
          this.setData({ 
            swiperList: result.data.message
          })
        })
      },

是不是清爽多了，保存一下，看看效果吧~

### 1.5 分类导航 ###

#### 1.5.1 声明分类导航数组 ####

在`index/index.js`中，声明分类数组，如下：

data: { 
        // 轮播图数组
        swiperList: [],
        // 分类导航数组
        cateList:[]
      },

#### 1.5.2 构建网络请求 ####

在`index/index.js`中，添加`getCateList`函数，并在`onLoad`方法中引用。

// 获取分类导航数据
       getCateList() { 
        request({ 
          url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'
        }).then(result => { 
          console.log(result)
          this.setData({ 
            cateList: result.data.message
          })
        })
      },

/** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        this.getSwiperList();
        this.getCateList();
      },

#### 1.5.3 编写UI ####

在`index/index.wxml`中，编写分类导航，代码如下：

<view class="index_cate">
        <navigator wx:for="{ {cateList}}" wx:key="name">
            <image src="{ {item.image_src}}" mode="widthFix" />
        </navigator>
    </view>

在`index/index.less`中，添加样式文件，如下：

.index_cate{ 
        display: flex;
        navigator{ 
            padding: 20rpx;
            flex: 1;
            image{ 
                width: 100%;
            }
        }
    }

#### 1.5.4 效果图 ####

最终效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 4]

### 1.6 楼层 ###

#### 1.6.1 声明楼层数组 ####

在`index/index.js`中，声明分类数组，如下：

data: { 
        // 轮播图数组
        swiperList: [],
        // 分类导航数组
        cateList:[],
        // 楼层数组
        floorList:[]
      },

#### 1.6.2 构建网络请求 ####

在`index/index.js`中，添加`getFloorList`函数，并在`onLoad`方法中引用。

// 获取楼层数据
       getFloorList() { 
        request({ 
          url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'
        }).then(result => { 
          console.log(result)
          this.setData({ 
            floorList: result.data.message
          })
        })
      },

/** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        this.getSwiperList();
        this.getCateList();
        this.getFloorList();
      },

#### 1.6.3 编写UI ####

在`index/index.wxml`中，编写楼层布局，此处牵扯两个`for`循环，外层为`楼层标题`，内层为`产品列表`，详见接口数据。

在`index/index.less`文件中，编写样式，代码如下：

.index_floor { 
    
        .floor_group { 
            .floor_title { 
                padding: 10rpx 0;
    
                image { 
                    width: 100%;
                }
            }
    
            .floor_list { 
                // 清除浮动
                overflow: hidden;
    
                navigator { 
                    float: left;
                    width: 33.33%;
    
                    /* 后四个超链接 */
                    &:nth-last-child(-n+4) { 
                        /* 原图的宽高 232 *386 */
                        // 232 / 386 = 33.33vw / height
                        // 第一张图片的高度 height:33.33vw * 386 / 232
                        // 后四张图片高度为 33.33vw * 386 / 232 /2;
                        height            : 33.33vw * 386 / 232 /2;
    
                        border-left: 10rpx solid #fff;
                    }
    
                    /* 2 3 两个超链接 */
                    &:nth-child(2),
                    &:nth-child(3) { 
                        border-bottom: 10rpx solid #fff;
                    }
    
                    image { 
                        width : 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

#### 1.6.3 效果图 ####

最终首页效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 5]

### 1.7 小结 ###

至此，首页模块基本搭建完成。需要注意的点如下：

*  `swiper`和`image`结合使用
 *  楼层布局的计算和排列
 *  `wx:for`的使用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200229105849262.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200229110827792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[20200229112416454.png]: https://img-blog.csdnimg.cn/20200229112416454.png
[Link 1]: https://blog.csdn.net/u010358168/article/details/86179410
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200229114531388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200229122012170.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200229164756288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200229164915301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70