小程序学习（7）——电影页面设计制作及豆瓣API403解决

在之前学习做完了新闻文章的内容，这次开始学习电影的内容，而在电影的内容中，template模板是一个很重要的工具，所以让我们尽情的使用这个工具来嵌套吧。

之前的文章页面，导航栏的banner并没有设置跳转，感兴趣的可以自己设置一下，方法和下边的文章跳转方式基本一样。

1、tabBar组件

小程序的自定义菜单是内置好的tabBar，并且不支持对字体大小和点击图片大小的修改。

所以我们直接在app.json中引用该组件就可以，具体属性看开发者文档

如果你的迟迟显示不出来，那么请检查你的路径，我发现好几次出现问题，并不是代码有问题，而是路径的问题。

2、对电影布局的设计

针对多次引用的内容，肯定是需要一个单独的模板，针对多层的使用，嵌套设计过程中的不同组件。

评分星级与分数
单个显示内容的设计
整个行的一个模板设计

这些都是使用template的嵌套实现的，具体的C3代码就不罗列了，可以在github下载看一下。
大体做完之后是下边这个样子

3、调用豆瓣API

现在情况是豆瓣已经停止了开放平台，也就是我们是没有办法调用到数据的，百度之后看到的最全的是豆瓣APIV2测试，使用了这些API之后，提示的错误是403，也就是拒绝访问，如图

我们先假装他可以用，先说API怎么用，最后在想办法解决403问题。

调用api肯定要知道API在小程序中怎么引用。

 wx.request({url: url,method:'GET',header:{//设置请求的header"content-type":""},success:function(res){console.log(res);},fail:function(){console.log("shibai");},})

其他的类似之前写的方法，仍然是在点击事件onLoad中，在我们点击了当前页面的时候就向服务器端发送请求，获取数据加载到当前页面。

解决403问题

修改API的基地址，将https://api.douban.com修改成http://t.yushu.im，或者是其他的已经可以用的基地址。

4、对电影页面进行数据绑定

在3里边我们应该是已经获取到了正确的API返回，但是豆瓣返回的API一次是20条

是我们当前的页面却只是需要三条数据，所以我们修改一下API的限定条件，每次获取三条数据。

我们在获取api成功的情况下，返回我们需要的数据，因为豆瓣返回的数据太杂，所以分类挑选出来我们需要的信息。

getMoviesData:function(url){var that=this;wx.request({url: url,method:'GET',header:{//设置请求的header"content-type":""},success:function(res){//成功，则获取数据that.processDouban(res.data);},fail:function(){console.log("shibai");},})},

下边是我们挑选数据的东西，这些数据是需要和返回的数据名一一对应的，所以看好返回数据

processDouban:function(movieDouban){//定义数组作为数据处理完后的容器 var movies=[];//循环遍历数据中的数组for(var idx in movieDouban.subjects){var subject=movieDouban.subjects[idx];var title=subject.title;//判断电影名字，进行长度截取。if(title.length>=6){title=title.substring(0,6)+"...";}var temp={title:title,//标题average:subject.rating.average,//评分coverageUrl:subject.images.large,//图片主图movieId:subject.id//电影ID}movies.push(temp)}this.setData({movies:movies})},

在使用数组temp赋值之后，我们将它push进我们的数组movies存放。

获取数据成功后（具体成功没有，看自己的调试器有没有返回数据）

在获取数据成功后，将数据绑定到各个template上，这个时候我们就不要从最下边的template上开始，从离我们获取到的数据最近的开始。

1、template做数据获取是使用的data

第一步是在与.js同级的movies.wxml中对他赋值，将我们的数组传过去

第二步是在第二层的movie-list-template.wxml,因为这个是list列表的template，就是有多个嘛，所以只放我们现在使用的这一个，其他两个不管。

用循环来分别输出我们需要的内容。

第三步在movie-template.wxml中具体对于我们显示的内容，进行数据绑定替换假数据

第四步替换最后一个template中的评分。

上里边我们已经可以正确连接并且使用豆瓣API了，但是我们是需要调用了三组数据，并不是一组，在三组同时调用的情况下，小程序只会识别到最后一组数据，所以我们的正在热映，成了top250.

5、解决

我们使用全局变量做一个KEY，使用动态数据绑定赋值。

区分在获取信息的地方是没有办法直接知道的，我们需要在获取API的地方进行一个区分。也就是将全局变量当做KEY传递进去。

在调用多了参数的情况下，我们传参也是对应需要多一个的，否则肯定是会报错，这个好像不用说哈。

最后将原来我们单纯的movies数据绑定修改，改成JS的动态数据绑定赋值

在这改完之后我们的修改的数据绑定就是结束了，其他的就是分别修改template中的内容

6、星星组件实现

首先在返回数据中找到哪个是代表星星数，然后找到规律。在豆瓣是用stars=50,来表示五星的，所以我们要将获取的数组去掉尾部的0，然后循环判断有几个1，几个0，就有几个星星。

我们将这个单独写在一个文件，在脚本中引用。

在获取数据时也同步获取这些星星的值。
因为对星星的template传值是在第二个开始，所以修改这里的赋值

同是将评分和星星传递过去。
在stars-template.wxml中使用循环判断星星，因为只有一种，所以是0,1判断，如果是多种值，可以wx:if="{{某某==1}}"这样的方式。

这样就大体上大功告成了。

所有的原代码仍在github

https://github.com/fujinwei/learnminiapp/commits/master/miniprogram-1