相信很多新手入门都会拿豆瓣来练手，小白们看过来吧，很适合练手哦！一个一个敲一遍，自己再改装下一定会有收获的哦

以即将上映界面为例： 
js：

//接口说明：豆瓣电影即将上映电影接口
var API_URL = ';
var app = getApp();
Page({
  data: {
    movies:[]
  },
  onLoad:function(){
    var that = this;
    //2、进入后显示loading状态
    wx.showToast({
      title:"加载中",
      icon:"loading",
      duration:5000
    });
    //3、发送数据请求
    wx.request({
      url: API_URL,
      data: {},
      header: {
        //豆瓣的请求格式比较奇葩application/json,application/json
        'Content-Type' : 'application/json,application/json'
      },
      // 请求成功以后隐藏加载框
      success: function(resp){
          wx.hideToast();
          var data = resp.data;
          console.log(data);
          that.setData({
            movies:data.subjects
          });
          // console.log(resp.data);
      }
    });
  },
  detailTap: function (e) {
        //一个film的tap事件 filmList   filmItem catchtap处理函数，
        // bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
        //id 通过data-id在wxml中绑定
        var id = e.currentTarget.dataset.id
        wx.navigateTo({
            url: "../movie/movie?id=" + id
        })
  }
})

wxss：

.page-body{
    display:flex;
    flex:1;
    flex-direction:column;
}
/*滚动视图容器*/
.film-scroll-view{
  box-sizing: border-box; 
  width: 750rpx;
  padding: 10rpx;
  display: flex;
  /*flex-wrap一行排不下，换行且第一行在上方*/
  flex-wrap: wrap;
  /*flex-direction属性决定项目主轴的方向（即项目的排列方向）*/
  flex-direction: row;
  /*justify-content属性定义了项目在主轴上的对齐方式*/
  justify-content: flex-start;
}
.filmItem{
  width: 350rpx;
  margin: 0 5rpx 20rpx 5rpx;
  border-radius: 10rpx;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 20rpx 40rpx #dedede;
  overflow: hidden;
  position: relative;
}
.file-cover-image{
  width: 350rpx;
  height: 508rpx;
}
.film-rating{
  box-sizing: border-box;
  position: absolute;
  height: 50rpx;
  line-height: 50rpx;
  text-align: right;
  padding-right: 20rpx;
  font-size: 24rpx;
  width: 100%;
  left: 0;
  top:458rpx;
  background-color: rgba(0, 0, 0, .55);
  color: #fff;
}
.film-title{
  padding: 16rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.film-tag{
  box-sizing: border-box;
  width: 100%;
  margin: 10rpx 0 20rpx 16rpx;
  display: flex;
  justify-content: flex-start;
}
.film-tag-item {
  padding: 4rpx 6rpx;
  margin-right: 10rpx;
  font-size: 24rpx;
  box-shadow: 0 0 0 1px #ccc;
  border-top: 1px solid #fff;
  border-radius: 10rpx;
  background-color: #fafafa;
  color: #666;
}

wxml：

<scroll-view class="page-body" scroll-y="true">
    <view class="film-scroll-view">
        <view class="filmItem" wx:for="{{movies}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="{{filmItem.id}}" data-id="{{filmItem.id}}" catchtap="detailTap">
            <image class="file-cover-image" src="{{filmItem.images.large}}"></image>
            <view class="film-rating">
                <block wx:if="{{filmItem.rating.average == 0}}">
                    暂无评分
                </block>
                <block wx:else>
                    {{filmItem.rating.average}}分
                </block>
            </view>
            <view class="film-title">{{filmItem.title}}</view>
            <view class="film-tag">
                <!--为每个电影类型小按钮绑定点击事件 => 点击进入搜索结果筛选页-->
                <view class="film-tag-item" wx:for="{{filmItem.genres}}" wx:for-item="filmTagItem" wx:key="genres" data-tag="{{filmTagItem}}" catchtap="tagTap">
                    {{filmTagItem}}
                </view>
            </view>
        </view>
    </view>
</scroll-view>   

不多赘述了哦，希望对小伙伴们有用，记得传递分享精神哦，多多分享共同学习！

myApp.zip

旅游网页设计源代码