推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
Runlin微信小程序系列教程一：从零开始写一个demo《下》
发布时间:2020-12-13
上一节实现了循环列表数据渲染到视图，并给列表每一项添加了路由导航到新页面查看更多细节，但是目前我们的数据都是虚拟的，现在我们就开始利用微信的request请求来接收豆瓣电影接口提供的数据。API: wx.request(OBJ ...
上一节实现了循环列表数据渲染到视图，并给列表每一项添加了路由导航到新页面查看更多细节，但是目前我们的数据都是虚拟的，现在我们就开始利用微信的request请求来接收豆瓣电影接口提供的数据。 API: wx.request(OBJECT)
参数有7个，这里主要讲一下几个重要的：
url : 请求的地址
data: 携带的数据
method : 请求方式，默认为get
success: 请求成功的回调函数
了解了网路请求的方法后，我们就不需要我们原来模拟的那些数据了，把所有的假数据统统干掉，留一个空的数据用来放数据即可。
data:{
moivelist:[],
loading:false
}
现在页面进来的时候只展示了一个标题，因为数据为空了循环不出来了，现在需要我们在页面进来的时候发送一个请求来接受数据。 豆瓣提供的API：[Title]https://developers.douban.com/wiki/?title=movie_v2#search 具体参数和接口请自行查阅，使用方法：https://api.douban.com + 对应的接口 + 参数(如果需要的话) 例子：https://api.douban.com/v2/movie/top250 我们以请求 排行250 这个接口为例：
onLoad: function() {
var url=https://api.douban.com/v2/movie/top250;
var that = this;//确保回调函数this的指向正确,后面会以es6的箭头函数代替
wx.request({
url：url, //KEY和KEY值相同可简写为url
data: {}, //不要求数据
header: { 'Content-Type': 'application/json' },
//成功时的回调，res为返回值，需要储存到我们的data数据里面
success: function(res) {
that.setData({
moivelist: res.data.subjects,
loading: true
})
}
})
}
写完后，页面进来的时候就会发送请求，并将数据保存到moiveList,并通过循环把数据展示出来，但是如果网络差的话，会有一段真空期是没有数据的，我们需要给用户一个提示。 给页面添加一个loading
<loading hidden="{{loading}}">
加载中....
</loading>
###我们让这个loading一开始就是显示的，当数据加载成功后，才让他消失。我们通过将hidden绑定到{{loading}}上，更改{{loading}}的布尔值来实现这个效果。一开始{{loading}}的值是false的，也就是不隐藏；success后将他设置为true，从而实现这个效果。
###这样我们这个页面就做好了，另一个页面同理，改变一下接口就行了，我们主要看一下detail这个文件。
###我们现在可以实现网络请求了，在之前我们detail的数据都是外面从列表传过来的，我们是这么写的。
<navigator url="../detail/detail?imgsrc={{item.imgsrc}}&title={{item.title}}&author={{item.author}}&introduce={{item.introduce}}&rank={{item.rank}}">
我靠这么长一段代码，真的需要吗？我们现在就可以简写了，我们只需要传一个参数就可以了。 把template模板里面wxml里面上述代码改成下面的
<navigator url="../detail/detail?id={{item.id}}">
我们只需要一个这个电影的ID就行了，我们可以根据这个ID自己请求数据
//在detail.js的Onload函数中获取到页面传过来的ID
onLoad: function(options) {
var that = this;
var address = 'https://api.douban.com/v2/movie/subject/';
wx.request({
url: address + options.id,
data: {},
header: { 'Content-Type': 'application/json' },
success: function(res) {
that.setData({
item: res.data,
loading: true
})
}
})
}
这样就完成了，现在我们在tabBar新增一个搜索页面。记住新页面都要添加到app.json中，这里就不再阐述了，页面大概这个样子
<import src=http://www.yiyongtong.com/archives/"../temple/temple.wxml"></import>
<loading hidden="{{loading}}">
加载中....
</loading>
<view class="searchWrap">
<view class="inputWrap">
<icon type="search" size="20"/>
