Use watercress api to write a small program (small program notes)

Create a cloud function movieList

The introduction of a third party request module   https://github.com/request/request-promise

In this folder, right-terminal opens

npm install --save request
npm install --save request-promise

In index.js where j module load request-promise

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

Api calls watercress

Watercress api call way: https://blog.csdn.net/kfgauss/article/details/91492643

Total code as follows

// cloud function entry file 
const the require Cloud = ( 'WX-Server-SDK' ) 
cloud.init () 
var RP = the require ( 'Request-Promise' );
 // cloud function entry function 
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) {
       // the console.log (RES); 
      return RES; 
    }) 
    . the catch ( function (ERR) {
       // Crawling failed ... 
       console.err (ERR);
    }); 
}

movie.js

// miniprogram / Pages / Movie / movie.js 
Page ({
   / * * 
   * page initial data 
   * / 
  Data: { 
    MovieList: [] 
  }, 
  / * * 
   * custom function 
   * / 
  getMovieList: function () { 
    WX. showLoading ({ 
      title: 'loading ..' , 
    }), 
      wx.cloud.callFunction ({ 
        name: "MovieList" , 
        Data: { 
          Start: the this .data.movieList.length, 
          COUNT: . 4 
        } 

      }). the then ( RES => {
        the console.log (RES); 
        wx.hideLoading (); 
        the this .setData ({ 
          MovieList: the this .data.movieList.concat (the JSON.parse (res.result) .subjects) 
        }); 
      .}) the catch (ERR => { 
        the console.log (ERR); 
        wx.hideLoading (); 
      }) 
  }, 

  / * * 
   handler * page pull bottom event 
   * / 
  onReachBottom: function () {
     the this .getMovieList (); 
  } 

})

movie.wxml

<view class="movie" wx:for="{{movieList}}" vx: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>
</view>

movie.wxss

/* miniprogram/pages/movie/movie.wxss */
.movie{
  height: 300rpx;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;

}
.movie-img{
  width: 200rpx;
  height: 100%;
  margin-right:20rpx; 
}
.movie-info{
  flex: 1;
}
.movie-title{
  color: #666;
  font-size: 40rpx;
  font-weight: bolder;
}
.movie-score{
  color: #faaf00;
}

 

Get renderings