上一节课，我们已经基本完成了，首页的界面编写。
逻辑暂时不理会。
但是我们用于展示页面绑定的是我们本地的假数据。
接下来我们就来获取真正的数据来展示页面。
请跳过划线部分。。。。。
绑定假数据编写页面算是前段最早做的一件事情吧。
特别是在前后端同步开发，联合测试的时候。
服务端会先输出接口文档，然后前后端根据接口文档同步开发，最后联合测试。
这就需要前段本地编写大量的假数据。
如果我们每个页面的假数据的单独编写的话，后续和服务端联调，我们就需要更改大量的文件。
且修改完链接到服务器，然后又加了一个需求或者服务器挂了，这时候你要本地调试，就会变得很麻烦，你要把你修改的地方再改回来。
这样的操作繁琐而且容易出错。
这时候我们就可以思考一下，是不是有什么办法，构建一个本地的假数据服务。
这里只说一个我最常用的吧，使用http请求本地的json文件，来获取数据。
本地的json文件，根据接口文档创建同样的层级目录，联调的时候只要在请求地址的最前端加入服务器地址就可以了。
有两个缺点：
一、这样的请求方式，不支持携带参数的请求，就是不管你写的是什么条件，最终获得的都是本地的json文件，原样输出。
二、访问本地的文件需要些文件后缀名，如data/data.json.有些服务器请求地址是data/data。后续删除也是一个麻烦的问题。
根据上面的思路，我们要做几件事情。
1、获取接口文档
2、统一管理服务器地址
3、创建本地假数据文件
4、编写http请求本地json文件
5、修改服务器地址访问真正的服务器
6、调试修改。
wx.request不支持请求本地json（写了半天发现微信不支持，这才叫瞎比比），这部分就不讲了，直接讲真实数据了。
软件开发基本上就是这么一个流程，发现问题，归纳问题，提出解决方案，编写程序，最后测试验证方案准确。
1、首先我在很早的时候就说过了，我们这次使用豆瓣电影的公开API文档https://developers.douban.com/wiki/?title=api_v2
真是的请求地址是如https://api.douban.com/v2/movie/in_theaters?count=3（直接浏览器访问就能请求到数据哦！）
2、我们在util.js文件中，增加服务器的统一地址变量。
其实更好的做法是，编写一个url处理方法。这样如果后续需要统一的追加参数，或者其他的统一操作，可以直接在这里修改。
3、编写http请求。我们先请求正在上映。
在小程序中我们使用wx.request发送http请求。
我们在index.js中编写
url：请求地址，这里我们调用factory方法处理了
method：请求方式
header：有时候服务端要求带请求头
data：请求参数
success：成功回调
fail：失败回调
这里要注意的是要在头部引用util文件var util = require('../../utils/util.js');
这里我们在成功和失败的时候都打印了日志，所以运行程序打开控制台。
这个问题是微信为了数据安全，要在后台配置合法域名。后台配置在“设置”-“开发设置”中填写request合法域名。
由于我们没有自己的服务器，又只是在开发环境测试，所以我们可以使用以下方法访问非合法域名。
在开发工具左侧“项目”里面，勾选“开发环境不校验请求域名、TLS版本以及HTTPS证书”
刷新项目，还是查看控制台
这里我们打印了从豆瓣获取的数据，控制台也明确声明了工具未验证。
4、回调函数中绑定数据
我们将服务器请求的数据展开，标记我们需要的数据，我们会发现有一些我们不需要的数据，
由于我们调用的是公共的API所以会有很多数据提供给其他用户的其他需求，
如果我们调用私有的API的时候，这种情况比较少，但是也不排斥服务器懒直接对一个大对象给你的。
你跟他说流量啥的，都说服不了他的“方便”。
所以我们这里写一个方法，把我们需要的数据取出来。
还有一点是因为我们最开始写这个页面的时候，是没有借口文档的，所以所有的变量名都是我们自己定义的。
但是拿到借口文档之后，建议根据接口文档，把变量名都改过来，对于后续的维护和调试有很大的好处。
修改index.wxml
修改movielist模板
修改moviecard模板里绑定的变量名
运行程序
我们发现，中间这个电影的名字太长了，我们界面上不需要这么长，
所以我们在moviecard模板的样式文件里面加入强制不换行，超出省列号显示的属性。
（截图的时候少了一个200rpx;）
有些接口需要许可，所以我们先挑选标志，不需要许可的接口
Required Scope
movie_premium_r
同样的方法，我们编写获取即将上映
即将上映
Resources URI
/v2/movie/coming_soonTop250
Resources URI
/v2/movie/top250所以我们统一修改一下请求方法。
在index中使用
运行效果
到此我们的数据基本就绑定正确了。
但是如上图中标记的还有好几个效果不是很理想。
这里我们在starts模板里面增加wx:if当分数为0是显示暂无评分
然后请求的时候传递自定义栏目标题。
修改一点点细节。不改也无所谓。这节课主要的内容是http请求。
细心的朋友会在控制台看到这样一条警告。这是因为我们多次调用setData函数。
那么预计下一节课我们就讲解怎么解决这个问题。
源文件 百度云 链接：http://pan.baidu.com/s/1jIh3fL0 密码：e84z
这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫，希望你开心。
如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。
希望大家关注我的个人公众号ionic_