小程序云电影

列表

电影列表不是写死的，而是通过调用豆瓣电影的api获取的，相当于要从小程序端向豆瓣电影服务端发起一个请求。

在小程序如何发起请求：

在本例中用的是云函数方式。通过request库发送，在github中找到request-promise方法。创建云函数后，需要用下列将两个包命令安装在云函数中。

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

1. 使用request发送请求

在云函数的js文件中引入包request

var rp(`http://api.douban.com/v2/movie/in_theaters?start=${event.start}$count=${event.count}`);

通过rp函数发送请求

直接将rp函数请求结果return，

rp函数的参数是要请求的地址。然后考虑分页请求，不可能一次将所有数据全部取过来，需要通过get方式（用字符串模板拼接）定义start，表示从哪条数据开始；定义count，表示数据条数。

  2.上传云函数后回到在页面里在页面中调用云函数发送请求

​在加载页面的时候就需要发送请求，也就是在页面中调用云函数。

在js中的生命周期函数是会自动加载调用的，所以在onload里面调用云函数，哉打印出调用成功的返回值

注意：云函数是运行在服务端的，所以console云函数的返回，结果不会出现在调试器里，会在云函数运行日志里

  3.通过数据绑定将请求的返回结果显示在页面里

返回的result是一个字符串，并不都是我们想要的，我们需要的只是其中的subject数组。

新建一个空数组movielist[ ]

再通过this.setData()去给movielist[ ]赋值，在函数里使用JSON.parse()解析字符串，让result变成一个对象，这样就可以取出里面的subject。

豆瓣电影里的数据是每次取10条的，所以每次取的数据要追加到movielist里，不然movielist里只有最新的数据，这样也没法从数组最后一条往后再取10条。

4.将请求数据的函数封装在getMovieList()里，在页面加载和上拉触底时分别使用该函数

• 使用vant组件库

• 初始化（npm init）

  在miniprogram安装package.json，这个文件的作用是对当前miniprogram的配置信息，以及一些依赖的包的管理都会在这个文件当中进行相应的配置。

• 安装Vant Weapp小程序组件库

  有了这个文件以后就可以通过官网上的npm命令进行安装。还有两步才能起作用。1、点击工具-构建npm。2、点击开发工具最右边的详情按钮，勾选使用npm模块。

• 使用组件库

  首先引入组件库：在页面json文件中复制并改动"van-button" : "vant-weapp/button"。

  然后直接把组件复制进代码里即可。