微信小程序Day2（上）

今天又开始学习了。
现在进行导航图标的设置。

在// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperData: [],  //存放轮播图数据
    catitemsData:[] //存放导航图标数据

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //调用函数，this指向最大的函数Page
    this.getSwiperData();
    this.getCatitems();
  },
  //获取轮播图数据的函数
  getSwiperData:function (){
   //发送网络请求
   wx.request({
     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
     success : (res) =>{
       console.log("请求成功==》",res)
       //数据更新，响应式更新页面数据
       this.setData({
         swiperData:res.data.message
       })
       console.log(this.data.swiperData)
     },
     fail : (err) =>{
       console.log("请求失败==》",err)
     }

   })

  },
  //获取导航图标函数
  getCatitems(){
     //发送网络请求
   wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
    success : (res) =>{
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
        catitemsData:res.data.message
      })
      console.log(this.data.catitemsData)
    },
    fail : (err) =>{
      console.log("请求失败==》",err)
    }

  })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})这里插入代码片

然后我们就可以请求到导航图标的地址


然后开始对导航图标进行布局


然后对商品分类进行布局

获取数据

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperData: [],  //存放轮播图数据
    catitemsData:[], //存放导航图标数据
    floorData:[] //存放商品分类数据

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //调用函数，this指向最大的函数Page
    this.getSwiperData();
    this.getCatitems();
    this.getFloorData();
  },
  //获取轮播图数据的函数
  getSwiperData:function (){
   //发送网络请求
   wx.request({
     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
     success : (res) =>{
       console.log("请求成功==》",res)
       //数据更新，响应式更新页面数据
       this.setData({
         swiperData:res.data.message
       })
       console.log(this.data.swiperData)
     },
     fail : (err) =>{
       console.log("请求失败==》",err)
     }

   })

  },
  //获取导航图标函数
  getCatitems(){
     //发送网络请求
   wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
    success : (res) =>{
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
        catitemsData:res.data.message
      })
      console.log(this.data.catitemsData)
    },
    fail : (err) =>{
      console.log("请求失败==》",err)
    }

  })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  //获取商品分类数据函数
  getFloorData(){
       //发送网络请求
   wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
    success : (res) =>{
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
        floorData:res.data.message
      })
      console.log(this.data.floorData)
    },
    fail : (err) =>{
      console.log("请求失败==》",err)
    }

  })


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

最终代码：

<view class="index">
<!--搜索导航-->
<Search></Search>

<!-- 商品轮播图-->
<view class="index_swiper">
<swiper indicator-dots autoplay circular>
<swiper-item wx:for="{{swiperData}}"
wx:key="index">
<image src="{{item.image_src}}"></image>
</swiper-item>
</swiper>
</view>

<!--图标导航-->
<view class="navIcon">
<navigator wx:for="{{catitemsData}}" wx:key="index" url="/pages/sort/sotr" open-type="switchTab">
<image mode="widthFix" src="{{item.image_src}}"></image>
</navigator>
</view>
</view>

<!-- 商品分类-->
<view class="floor_goods">
  <view class="goodsItem" wx:for="{{floorData}}" wx:key="index">
    <!-- 标题-->
    <view class="floorTitle">
      <image mode ="widthFix" src="{{item.floor_title.image_src}}"></image>
    </view>
    <!-- 图片-->
    <view class="floorList">
        <navigator wx:for="{{item.product_list}}" wx:for-index="id"
        wx:for-item="floor" wx:key="id" class="{{id == 0? 'bigImg' : 'smallImg'}}">
        <image mode ="scaleToFill" src="{{floor.image_src}}"></image>
        </navigator>


    </view>
  </view>
</view>

/* 轮播图样式*/
.index_swiper{
  background-color: #e4393c;
}
.index_swiper swiper{
  height: 340rpx;

}
.index_swiper swiper image{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 30rpx 30rpx 0 0;
}
/* 图标导航样式*/
.navIcon{
  display: flex;/*弹性布局*/
}
.navIcon navigator{
  width:25%;
  padding:30rpx 20rpx;

}
.navIcon navigator image{
  width: 100%;
}

/*商品分类样式*/
.floor_goods{
  padding: 0 5rpx;
}
.floor_goods .floorTitle{
  margin: 20rpx 0 0;
}
.floor_goods .floorTitle image{
  width: 100%;
}
.floorList{
  overflow: hidden; /*清除子元素对父元素的浮动影响*/
}
.floorList navigator{
  width: 33.33%;
  float: left;
  padding: 5rpx;
  box-sizing: border-box;
}
.floorList .bigImg{
  height:  404rpx;
}
.floorList .smallImg{
  height:  202rpx;
}
.floorList navigator image{
  width: 100%;
  height: 100%;
  display: block;
}

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperData: [],  //存放轮播图数据
    catitemsData:[], //存放导航图标数据
    floorData:[] //存放商品分类数据

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //调用函数，this指向最大的函数Page
    this.getSwiperData();
    this.getCatitems();
    this.getFloorData();
  },
  //获取轮播图数据的函数
  getSwiperData:function (){
   //发送网络请求
   wx.request({
     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
     success : (res) =>{
       console.log("请求成功==》",res)
       //数据更新，响应式更新页面数据
       this.setData({
         swiperData:res.data.message
       })
       console.log(this.data.swiperData)
     },
     fail : (err) =>{
       console.log("请求失败==》",err)
     }

   })

  },
  //获取导航图标函数
  getCatitems(){
     //发送网络请求
   wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
    success : (res) =>{
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
        catitemsData:res.data.message
      })
      console.log(this.data.catitemsData)
    },
    fail : (err) =>{
      console.log("请求失败==》",err)
    }

  })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  //获取商品分类数据函数
  getFloorData(){
       //发送网络请求
   wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
    success : (res) =>{
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
        floorData:res.data.message
      })
      console.log(this.data.floorData)
    },
    fail : (err) =>{
      console.log("请求失败==》",err)
    }

  })


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

最终成果：

最后进行代码优化

//封装一个方法用于请求数据
//export：公开该方法
export var request =(params) =>{
    console.log("params==>",params)
     //默认路径
   var baseUrl ="https://api-hmugo-web.itheima.net/api/public/v1";
 return new Promise((resolve,reject)=>{
  wx.request({
    url: baseUrl+params.url,
    success:(res)=>{
     //console.log("成功回调==》",res)
     //resolve("promise成功调用返回的值")
     resolve(res.data.message)
    },
    fail:(err) =>{
      //console.log("失败回调==》",err)
      //reject("promise调用失败返回的值")
      reject(err)
    }
  })

 })
}

// pages/index/index.js
//导入自己封装的方法
import { request }from "../../request/index"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperData: [],  //存放轮播图数据
    catitemsData:[], //存放导航图标数据
    floorData:[] //存放商品分类数据

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //调用函数，this指向最大的函数Page
    this.getSwiperData();
    this.getCatitems();
    this.getFloorData();
  },
  //获取轮播图数据的函数
  getSwiperData:function (){
   //发送网络请求
  /* wx.request({
     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
     success : (res) =>{
       console.log("请求成功==》",res)
       //数据更新，响应式更新页面数据
       this.setData({
         swiperData:res.data.message
       })
       console.log(this.data.swiperData)
     },
     fail : (err) =>{
       console.log("请求失败==》",err)
     }

   })*/
   request({url:"/home/swiperdata"})
   .then(res =>{
     console.log("res==>",res)
      //数据更新，响应式更新页面数据
      this.setData({
        swiperData:res
      })
   })

  },
  //获取导航图标函数
  getCatitems(){
     //发送网络请求
   /*wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
    success : (res) =>{
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
        catitemsData:res.data.message
      })
      console.log(this.data.catitemsData)
    },
    fail : (err) =>{
      console.log("请求失败==》",err)
    }

  })*/
  request({url:"/home/catitems"})
  .then(res =>{
    console.log("res==>",res)
     //数据更新，响应式更新页面数据
     this.setData({
      catitemsData:res
     })
  })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  //获取商品分类数据函数
  getFloorData(){
       //发送网络请求
   /*wx.request({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
    success : (res) =>{
      console.log("请求成功==》",res)
      //数据更新，响应式更新页面数据
      this.setData({
        floorData:res.data.message
      })
      console.log(this.data.floorData)
    },
    fail : (err) =>{
      console.log("请求失败==》",err)
    }

  })*/
  request({url:"/home/floordata"})
  .then(res =>{
    console.log("res==>",res)
     //数据更新，响应式更新页面数据
     this.setData({
      floorData:res
     })
  })

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

到此结束了，谢谢观看。