全栈工程师之路-中级篇之小程序开发-第二章第四节小程序http请求与请求本地json文件

上一节课，咱们已经基本完成了，首页的界面编写。

逻辑暂时不理会。

可是咱们用于展现页面绑定的是咱们本地的假数据。

接下来咱们就来获取真正的数据来展现页面。

请跳过划线部分。。。。。

绑定假数据编写页面算是前段最先作的一件事情吧。

特别是在先后端同步开发，联合测试的时候。

服务端会先输出接口文档，而后先后端根据接口文档同步开发，最后联合测试。

这就须要前段本地编写大量的假数据。

若是咱们每一个页面的假数据的单独编写的话，后续和服务端联调，咱们就须要更改大量的文件。

且修改完连接到服务器，而后又加了一个需求或者服务器挂了，这时候你要本地调试，就会变得很麻烦，你要把你修改的地方再改回来。

这样的操做繁琐并且容易出错。

这时候咱们就能够思考一下，是否是有什么办法，构建一个本地的假数据服务。

这里只说一个我最经常使用的吧，使用http请求本地的json文件，来获取数据。

本地的json文件，根据接口文档建立一样的层级目录，联调的时候只要在请求地址的最前端加入服务器地址就能够了。

有两个缺点：

1、这样的请求方式，不支持携带参数的请求，就是无论你写的是什么条件，最终得到的都是本地的json文件，原样输出。

2、访问本地的文件须要些文件后缀名，如data/data.json.有些服务器请求地址是data/data。后续删除也是一个麻烦的问题。

根据上面的思路，咱们要作几件事情。

一、获取接口文档

二、统一管理服务器地址

三、建立本地假数据文件

四、编写http请求本地json文件

五、修改服务器地址访问真正的服务器

六、调试修改。

wx.request不支持请求本地json（写了半天发现微信不支持，这才叫瞎比比），这部分就不讲了，直接讲真实数据了。

软件开发基本上就是这么一个流程，发现问题，概括问题，提出解决方案，编写程序，最后测试验证方案准确。

一、首先我在很早的时候就说过了，咱们此次使用豆瓣电影的公开API文档https://developers.douban.com/wiki/?title=api_v2

真是的请求地址是如https://api.douban.com/v2/movie/in_theaters?count=3（直接浏览器访问就能请求到数据哦！）

二、咱们在util.js文件中，增长服务器的统一地址变量。

其实更好的作法是，编写一个url处理方法。这样若是后续须要统一的追加参数，或者其余的统一操做，能够直接在这里修改。

三、编写http请求。咱们先请求正在上映。

在小程序中咱们使用wx.request发送http请求。

咱们在index.js中编写

url：请求地址，这里咱们调用factory方法处理了

method：请求方式

header：有时候服务端要求带请求头

data：请求参数

success：成功回调

fail：失败回调

这里要注意的是要在头部引用util文件var util = require('../../utils/util.js');

这里咱们在成功和失败的时候都打印了日志，因此运行程序打开控制台。

这个问题是微信为了数据安全，要在后台配置合法域名。后台配置在“设置”-“开发设置”中填写request合法域名。

因为咱们没有本身的服务器，又只是在开发环境测试，因此咱们可使用如下方法访问非合法域名。

在开发工具左侧“项目”里面，勾选“开发环境不校验请求域名、TLS版本以及HTTPS证书”

刷新项目，仍是查看控制台

这里咱们打印了从豆瓣获取的数据，控制台也明确声明了工具未验证。

四、回调函数中绑定数据

咱们将服务器请求的数据展开，标记咱们须要的数据，咱们会发现有一些咱们不须要的数据，

因为咱们调用的是公共的API因此会有不少数据提供给其余用户的其余需求，

若是咱们调用私有的API的时候，这种状况比较少，可是也不排斥服务器懒直接对一个大对象给你的。

你跟他说流量啥的，都说服不了他的“方便”。

因此咱们这里写一个方法，把咱们须要的数据取出来。

还有一点是由于咱们最开始写这个页面的时候，是没有借口文档的，因此全部的变量名都是咱们本身定义的。

可是拿到借口文档以后，建议根据接口文档，把变量名都改过来，对于后续的维护和调试有很大的好处。

修改index.wxml

修改movielist模板

修改moviecard模板里绑定的变量名

运行程序

咱们发现，中间这个电影的名字太长了，咱们界面上不须要这么长，

因此咱们在moviecard模板的样式文件里面加入强制不换行，超出省列号显示的属性。

（截图的时候少了一个width:200rpx;）

有些接口须要许可，因此咱们先挑选标志，不须要许可的接口

Required Scope

movie_premium_r

一样的方法，咱们编写获取即将上映

即将上映

Resources URI

/v2/movie/coming_soon

和

Top250

Resources URI

/v2/movie/top250

经过观察咱们发现这几个接口数据格式相同。

因此咱们统一修改一下请求方法。

在index中使用

运行效果

到此咱们的数据基本就绑定正确了。

可是如上图中标记的还有好几个效果不是很理想。

这里咱们在starts模板里面增长wx:if当分数为0是显示暂无评分

而后请求的时候传递自定义栏目标题。

修改一点点细节。不改也无所谓。这节课主要的内容是http请求。

细心的朋友会在控制台看到这样一条警告。这是由于咱们屡次调用setData函数。

那么预计下一节课咱们就讲解怎么解决这个问题。

源文件 百度云 连接：http://pan.baidu.com/s/1jIh3fL0 密码：e84z
这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫，但愿你开心。
若是你以为本文对你有帮助，请扫描文末二维码，支持博主原创。
但愿你们关注个人我的公众号ionic_