微信小程序项目（南师中北生活圈）（二）首页实现

客官°小女子只卖身不卖艺 2022-12-10 11:27 68阅读 0赞

## 完成首页界面的搭建 ##

> 首页界面包含了搜索框、轮播图、导航、楼层。

### 1、搜索框的实现 ###

> 页面需要使用自定义组件时，多个页面会使用到搜索功能，看起来是个输入框，本质是一个导航标签，以超链接的形式。

components中新建文件夹SearchInput  
新建4个文件，可通过新建Component直接新建  
在首页中引入组件（三步骤）  
1、新增组件  
2、申明引用（使用页面的index.json文件，引用SearchInput.js路径）

> 这边使用的是相对路径，usingComponents表示要引用的组件是什么！

{ 
      "usingComponents": { 
        "SearchInput":"../../components/SearchInput/SearchInput"
      },
      "navigationBarTitleText": "南师中北生活圈"
    }

3、页面中使用标签，在index.wxml中实现

<view class="pyg_index">
    
    <SearchInput></SearchInput>
    
    </view>
    }

进去组件代码SearchInput.wxml

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

SearchInput.wxss中编辑样式，加效果

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

效果图如下所示：

> 点击搜索框会跳转到pages中search，即搜索中心页面。  
> 即 url="/pages/search/index" open-type=“navigate”

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

### 2、轮播图的实现 ###

> #### 分为两个部分 ####
> 
> 1、获取轮播图接口数据  
> 接口路径 https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata  
> 请求方式Get  
> 2、把数据跟标签相结合

#### 2.1、在pages/index/index.js进行操作 ####

> swiperList:\[ \]  
> 发送异步请求，请求成功后进行赋值，在以页面上渲染。  
> url  
> 要请求数据的地址  
> success  
> 成功之后的回调函数

Page({ 
      /** 页面的初始数据*/
      data: { 
        //轮播图数组
        swiperList:[]
      },
      /**生命周期函数--监听页面加载*/
      onLoad: function (options) { 
        //1 发送异步请求获取轮播图数据
          wx.request({ 
            url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
            success: (result)=>{ 
              this.setData({ 
                swiperList:result.data.message
              })
            }
          });
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       *  onReady: function () { 
      },
       */
    
    })

**这时候回到AppData中查看是否接收到数据，如下图所示：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 1]  
如果没有现实数据，如下两种操作方法  
1、在详情=>本地设置中=>勾选不效应合法域名，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 2]  
2、登录微信公众平台=>开发=>开发设置中=>添加服务器域名，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 3]

#### 2.2、将轮播图中的数据变成页面标签渲染出来 ####

> 打开首页的页面标签文件，pages/index/index.wxml

wx:for="\{ \{swiperList\}\}"  
循环获取的数据数组  
wx:key=“goods\_id”  
绑定id  
src="\{ \{item.image\_src\}\}"  
指定渲染的图片路径  
autoplay indicator-dots circular  
分别是自动轮播、显示面板指示点、循环轮播

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

> 调整图片的样式，设置图片的为主大小等，打开index.wxss文件

/* pages/index/index.wxss */
    .index_swiper swiper { 
      width: 750rpx;
      height: 340rpx;
    }
    .index_swiper swiper image { 
      width: 100%;
    }

**效果如下图所示：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 4]

#### 2.3、将原生的请求修改为promise的方式 ####

> 对上方发送请求的代码进行优化pages/index/index.js，优化手段可通过es6的promise来解决这个问题。

**首先，先在request文件夹中新建index.js文件用来出来请求。**  
resolve  
成功时候执行的回调函数  
reject  
失败执行的回调函数

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

**然后，首页引入用来发送请求的**  
import \{request\} from “…/…/request/index.js”;

> request(\{url: ‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata’\})将解构到…params

//0 引入  用来发送请求的  方法  一定要把路径补全
    import { request} from "../../request/index.js";
    Page({ 
      /** 页面的初始数据*/
      data: { 
        //轮播图数组
        swiperList:[]
      },
      /**生命周期函数--监听页面加载*/
      onLoad: function (options) { 
        //1 发送异步请求获取轮播图数据  优化手段可通过es6的promise来解决这个问题
          request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
            .then(result=>{ 
              this.setData({ 
                swiperList:result.data.message
              })
          })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       *  onReady: function () { 
      },
       */
    
    })

### 3、分类导航模块 ###

> 分成4部分，分类、秒杀拍、超市购、易充值。  
> 接口路径https://api-hmugo-web.itheima.net/api/public/v1/home/catitems

为了便于代码的方便查阅，这边将上方代码的获取轮播数据变成调用的方式。

// pages/index/index.js
    import { request} from "../../request/index.js";
    Page({ 
      data: { 
        //轮播图数组
        swiperList:[],
      onLoad: function (options) { 
          this.getSwiperList();
      },
      //获取  轮播图数据
      getSwiperList(){ 
        request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
            .then(result=>{ 
              this.setData({ 
                swiperList:result.data.message
              })
          })
      },
    })

跟获取轮播图的方法一致，这边我们将获取分类导航数据。

// pages/index/index.js
    import { request} from "../../request/index.js";
    Page({ 
    
      data: { 
        //轮播图数组
        swiperList:[],
        //导航数组
        cateList:[]
      },
      onLoad: function (options) { 
          this.getSwiperList();
          this.getCateList();
      },
      //获取  轮播图数据
      getSwiperList(){ 
        request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
            .then(result=>{ 
              this.setData({ 
                swiperList:result.data.message
              })
          })
      },
      //获取  分类导航数据
      getCateList(){ 
        request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
            .then(result=>{ 
              this.setData({ 
                cateList:result.data.message
              })
          })
      }
    })

**回到AppData中查看是否接收到数据，如下图所示：**  
会显示4个数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 5]

#### 将分类导航中的数据变成页面标签渲染出来 ####

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

#### 在wxss中调整好样式 ####

/* pages/index/index.wxss */
    .index_cate{ 
      display: flex;
    }
    .index_cate navigator{ 
      flex: 1;
      padding: 20rpx;
    }
    .index_cate image{ 
      width: 100%;
    }

**效果如下图所示：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 6]

### 4、楼层模块 ###

> 分成3部分，时尚女装、勇往直前、清新气质。  
> 数据接口路径https://api-hmugo-web.itheima.net/api/public/v1/home/floordata  
> 分为两类循环，三部分以及商品列表的循环。

跟之前一样，这边我们将获取楼层的数据。

// pages/index/index.js
    import { request} from "../../request/index.js";
    Page({ 
      data: { 
        //轮播图数组
        swiperList:[],
        //导航数组
        cateList:[],
        //楼层数据
        floorList:[]
      },
      onLoad: function (options) { 
          this.getSwiperList();
          this.getCateList();
          this.getFloorList();
      },
      //获取  轮播图数据
      getSwiperList(){ 
        request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
            .then(result=>{ 
              this.setData({ 
                swiperList:result.data.message
              })
          })
      },
      //获取  分类导航数据
      getCateList(){ 
        request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
            .then(result=>{ 
              this.setData({ 
                cateList:result.data.message
              })
          })
      },
      //获取  楼层数据
      getFloorList(){ 
        request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'})
            .then(result=>{ 
              this.setData({ 
                floorList:result.data.message
              })
          })
      }
    })

**回到AppData中查看是否接收到数据，如下图所示：**  
会显示3个数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 7]

#### 将楼层导航中的数据变成页面标签渲染出来 ####

> 分为两块循环，即标题和内容。

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

#### 在wxss中调整好样式 ####

/* pages/index/index.wxss */
    .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: 32.33%;
      /* 后四个超链接 */
      /* 2 3 两个超链接 */
    }
    .index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) { 
      /* 原图的宽高 232 *386 */
      height: 26.4vw;
      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%;
    }

**效果如下图所示：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 8]

# 仅供学习参考使用！！！ #

# 不足之处，请指出，蟹蟹！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cbb554b33b32476191e9d1b0b6ff7fe6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/46ef42f4587e438a89ac51b66c9f474c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/c53f11b8fa9a4522b57d7ae8149e6f36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/13db5174001148d0ba2fa0ddb3f3ba6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/701792b9f6d24e92826289a08984143b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/cdbf01ba8643409495b806f43c18e160.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/41057424b91c459b93515cbccf28d0a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/fbc748cfbdee4b2db977c138c9b942bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/6b221c8089e64ce7aa836664d54f55eb.png