电影项目——电影列表

安装request-promise

效果

image.png

新建云函数

修改 index.js 右键创建并部署

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

var rp = require('request-promise');

// 云函数入口函数
exports.main = async (event, context) => {
  return rp(`http://api.douban.com/v2/movie/in_theaters?apikey=0df993c66c0c636e29ecbb5344252a4a&start=${event.start}&count=${event.count}`)
    .then(function (res) {
      console.log(res)
      return res
    })
    .catch(function (err) {
      console.log(err)
    });
}

修改movie.js

// miniprogram/pages/movie/movie.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      movieList:[]
  },
  getMovieList:function(){
    wx.showLoading({
      title: '加载中...'
    })
    wx.cloud.callFunction({
      name: 'movielist',
      data: {
        start: this.data.movieList.length,
        count: 10
      }
    }).then(res => {
      this.setData({
        movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
      })
      wx.hideLoading()
    }).catch(err => {
      console.log(err)
      wx.hideLoading()
    })
  },
  gotoComment:function(e){
    wx.navigateTo({
      url: `../comment/comment?id=${e.target.dataset.id}`
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getMovieList()
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

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

  }
})

修改movie.wxml

<view class="movie" wx:for="{{movieList}}" wx:key="{{index}}">
  <image class="movie-img" src="{{item.images.small}}"></image>
  <view class="movie-info">
    <view class="movie-title">{{item.title}}</view>
    <view>观众评分: 
         <text class="movie-score">{{item.rating.average}}</text>
    </view>
    <view>主演：
      <text wx:for="{{item.casts}}">{{item.name}} </text> 
    </view>
    <view>
      年份: {{item.year}}
    </view>
    <view>
      <button class="movie-comment" data-id="{{item.id}}" bindtap="gotoComment">评价</button>
    </view>
  </view>
</view>

修改movie.wxss

.movie{
  height: 300rpx;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc
}
.movie-img{
  width: 200rpx;
  height: 100%;
}
.movie-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10rpx;
}
.movie-title{
  color:#666;
  font-size: 40rpx;
  font-weight: bolder
}
.movie-score{
 color: #faaf00
}
.movie-comment{
  height: 60rpx;
  background-color: #E54847;
  color: #fff;
  font-size: 26rpx;
}