【详细】豆瓣小程序--从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; }

希望喜欢的朋友，可以点赞收藏，支持一下，共同进步