【詳細】豆瓣小程序--從0到1實現首頁佈局

首頁是app，小程序中非常常見的一個需求，作爲常見的需求，如何高效地完成該需求的實現，就異常關鍵。那麼我們如何從0到1實現自己的首頁，請看本文。

實際效果

實現了瀑布流的佈局，同時，涉及了豆瓣的相應api的網絡請求，進而獲取對應item的數據

 

WXML佈局

由於大多數佈局相對一致，因此我採用了組件化的設計，減少代碼的冗餘，下面是首頁的xml佈局

<!--index.wxml-->
<searchbar isnavigator="{{true}}"></searchbar>

<!-- 滑動佈局 -->
<indexmodule title = "影院熱映" items="{{movies}}"></indexmodule>

<indexmodule title = "近期熱門劇情" items="{{tvhot}}"></indexmodule>

<indexmodule title = "近期熱門綜藝" items="{{shows}}"></indexmodule>

<indexmodule title = "暢銷圖書" items="{{books}}"></indexmodule>

<indexmodule title = "熱門單曲榜" items="{{music}}"></indexmodule>

 

Json

組件化，那麼我們需要在json中添加，對於組件的依賴

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar",
    "star":"/components/star/star",
    "indexmodule":"/components/indexmodule/indexmodule"
  }
}

indexmodule是首頁瀑布流組件，star是評分打星的組件，searchbar是搜索框的組件

具體實現請參照，這裏不多詳細描述了

https://blog.csdn.net/m0_37218227/article/details/106984839

https://blog.csdn.net/m0_37218227/article/details/107023453

 

網絡請求

Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    var that = this;
    /**
     * 網絡請求
     */
    // 電影
    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items?count=7',
      // data:{
      //   count:7
      // }
      success: function(res) {
        var movies = res.data.subject_collection_items;
        that.setData({
          movies: movies
        });
      }
    });

    //電視劇
    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items?count=7',
      success: function(res) {
        var tvhot = res.data.subject_collection_items;
        that.setData({
          tvhot: tvhot
        });
      }
    });

    //綜藝
    wx.request({
      url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items?count=7',
      success: function(res) {
        var shows = res.data.subject_collection_items;
        that.setData({
          shows: shows
        });
      }
    });

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function() {

  }
})

跟進wx.request對網絡進行請求，獲取對應模塊的數據，那麼這個頁面就基本上做好了

最後看一下，瀑布流的組件wxss文件，可以看到具體瀑布流控件的佈局樣式

.module-group{
  padding: 40rpx;
  background-color: #fff;
}

.module-group .module-top{
  font-size: 36rpx;
  display: flex;
  justify-content: space-between;
}

.module-top .module-title{
  font-weight: bold;
  color: #494949;
}

.module-top .module-more{
  font-size: 28rpx;
  color: #41be57;
}

.module-scroll-view{
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
  white-space: nowrap;
}

.item-navigator{
  width: 200rpx;
  margin-right: 20rpx;
  display: inline-block;
}

.item-navigator .item-group{
  width: 100%;
}

.item-group .thumbnail-group{
  width: 100%;
  height: 284rpx;
}

.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}

.item-group .item-title{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 20rpx;
}

希望喜歡的朋友，可以點贊收藏，支持一下，共同進步