微信小程序开发day3

今天主要学习了请求豆瓣影评展示数据。
movies.js中的代码为

/**
   * 生命周期函数--监听页面加载
   */
  // onload是什么了？：是微信小程序的页面生命周期
  // onLoad:页面生命周期，一般是用来请求数据和处理转发数据
  onLoad: function (options) {
    //所有调用电影的数据，必须写在这里
    var page=this;
    // wx.request:开始请求豆瓣电影官方是数据
    wx.request({
    // url：请求豆瓣电影的地址
    // header:设置数据格式为json格式
    //success:请求成功进行操作
     url: 'http://api.douban.com/v2/movie/new_movies?apikey=0df993c66c0c636e29ecbb5344252a4a',
     header:{
      'Content-Type':'json'
     },
     success:function(res){
        //res:就是我们请求的数据
        var result=res.data.subjects;
        //
        // console.long(res);
        // console.log(result);
        page.setData({movies:result});
     }
   })
  },

显示电影信息

  <!-- //显示豆瓣电影的数据 -->
  <block wx:for="{{movies}}">
    <view class="movie">
      <view class="pic">
        <image src="{{item.images.medium}}"/>
      </view>
      <!-- 显示电影信息 -->
      <view class="movie-info">
        <view class="base-info">
          <text>名字：{{item.title}}\n</text>
          <text>导演：{{item.directors[0].name}}\n</text>
          <text>主演：{{item.casts[0].name}}\n</text>
          <text>类型：{{item.genres[0]}}\n</text>
          <text>上映年份：{{item.pubdates}}\n</text>
        </view>
      </view>
    </view>

    <!-- 显示分割线 -->
    <view class="hr"></view>

设置显示电影信息的样式，这部分在movies.wxss中实现
/* 图片的样式 /
.movie{
/ 弹性盒子 /
display:flex;
/ 以x轴为主轴进行页面划分 */
flex-direction: row;
}

/* 后代选择器 */
.pic image{
width:100px;
height:150px
}

.movie-info
{
padding-left: 20px;
}

/* 电影的名字、年份样式 */

.base-info
{
  /* 字体颜色 */
  color:#000000;
  font-size: 12px;
  /* 与顶部间距 */
  padding-top:20px;
  line-height: 20px;
}

.hr{
  height:2px;
  width:100px;
  /* 每一行的背景颜色 */
  background-color:black;
  /* 顶部的样式，分割线的边框颜色  solid：细线 */
  border-top:white solid 1px;
  /* 轮廓的样式 */
  border-bottom:white solid 1px;
}