小程序开发---豆瓣电影展示页面

云函数发送请求

第三方库（request）

1. request promise的安装
   首先新建云函数，使用终端打开，输入以下代码

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

注：NPM是随同NodeJS一起安装的包管理工具

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

1. 在云函数 index.js中

var rp = require('request-promise');//引入库

return rp('当前请求的地址').then(function(res){
console.log(res);
return res;
}).catch(function(err){
console.err(err);
});

注：ES6字符串模板

1. 上传并部署云函数

2. page文件中js文件 onload函数:监听页面加载

onLoad: function(options){
    wx.cloud.callFunction({
        name: 'movielist'
        data:{
            start: this.data.movieList.length,
            count: 10
        }
    }).then(res =>{
    console.log(res);
    this.setDate({
        movieList: this.data.novieList.concat(JOSN.parse(res.result).subjects)//将传来的数据拼接在之前的数据上面
    })
    }).catch(err=> {console.err(err);});
}

1. 将数据结果显示到页面中

<view class ="movie" wx:for="{{movieList}}" wx:key="{{index}}">//循环遍历
<image class="movi-img" src="{{item.image.small}}" ></image>
<view class ="movie-info">
<view class="movie-title">{{item.tittle}}</view>
<view>观众评分： {{}}分</view>
</view>


6. 拉到底后继续加载内容

wx.showloading({
    title: "加载中"
})

// 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 => {
// console.log(res);
this.setData({
movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
});
wx.hideLoading();
}).catch(err => {
console.error(err);
wx.hideLoading();
});
},
gotoComment: function(event) {
wx.navigateTo({
url: ../comment/comment?movieid=${event.target.dataset.movieid},
});

},

/**

• 生命周期函数--监听页面加载
  */
  onLoad: function(options) {
  this.getMovieList();
  },

/**

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

},

/**

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

},

/**

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

},

/**

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

},

/**

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

},

/**

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

/**

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

}
})
```

界面展示