从零开始写个一个豆瓣电影 (小程序教程3)
2016-10-15 19:51
381 查看
上一节实现了循环列表数据渲染到视图,并给列表每一项添加了路由导航到新页面查看更多细节,但是目前我们的数据都是虚拟的,现在我们就开始利用微信的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="../temple/temple.wxml"></import>
<loading hidden="{{loading}}"> 加载中.... </loading>
<view class="searchWrap">
<view class="inputWrap">
<icon type="search" size="20"/>
<input placeholder="请输入搜索内容" value="{{content}}" type="text" placeholder-style="custom-placeholder-style" placeholder-class="custom-placeholder-class" bindinput="inputing" bindblur="quick"/>
</view>
<view class="cancel" bindtap="searching">{{cancel}}</view>
</view>
<scroll-view class="main" scroll-y="true" bindscrolltoupper="" bindscrolltolower="" bindscroll="" scroll-into-view="" scroll-top="">
<block wx:for="{{moivelist}}">
<template is="try" data="{{item}}"></template>
</block>
</scroll-view>
下面的列表跟前面一样,就多个了Input和按钮而已,同样的wxss样式我们就不管了,只看js。
主要代码如下:
data: { moivelist: [], loading: true, cancel: "取消", search: "" } , inputing: function(event) { if (event.detail.value) { this.setData({ cancel: "搜索" }) } else { this.setData({ cancel: "取消" }) } }, //失去焦点事件 quick: function(event) { if (!event.detail.value) { this.setData({ cancel: "取消" }) } else { this.setData({ search: event.detail.value }) } }, //点击搜索事件 searching: function() { if (this.data.cancel === "取消") { wx.hideKeyboard() } else { this.setData({ loading: false }) wx.request({ url: url + this.data.search, data: {}, header: { 'Content-Type': 'application/json' }, success: function(res) { that.setData({ moivelist: res.data.subjects, loading: true }) } }) } }
看起来写了很多,其实就2件事:
* 判断Input的值,如果为空,则让按钮的值为“取消”;不为空则为“搜索”。
* 根据按钮的值绑定点击事件,为取消则让键盘下去(手机才行)为“搜索”则发送网络请求,并将接收的数据保存以便循环展示出来。
到此,几个文件就都写好了,现在来对代码优化一下。
1. wxml:我们已经创建了一个通用的模板了,好像没得优化了。
2. css : 可以发现我们几个列表都用了一个模板,因此对应的CSS代码也是一样的,我们可以把这部分CSS代码放到app.wxss公共样式里面,其他页面对应的WXSS那部分都可以删除了。
3. js:wx.request时用到了基本相同的东西,可以放到一个单独的js里面。
创建一个util文件夹,在里面创建一个util.js文件,用来放我们的方法。function getData(address,datas,cb){ wx.request({ url: address, data:datas, header: { 'Content-Type': 'application/json' }, success: cb }) } module.exports = { getData: getData }
我们定义了一个方法,并通过module.exports将他导出,其他页面需要使用方法时,需要先导入
var util = require("../../utils/utils.js")
使用时:util.getData(参数1,参数2,参数3)
如:
onLoad: function() { util.getData(url,{},(res)=>{ this.setData({ moivelist: res.data.subjects, loading: true }) }) }
到此我们整个APP就算基本完成了,后续如果还有补充则再继续添加。
代码参见demo4 , 网址为:https://github.com/linrunzheng/wx-samll-demo
相关文章推荐
- 从零开始写个一个豆瓣电影 (小程序教程1)
- 从零开始写个一个豆瓣电影 (小程序教程2)”
- 微信小程序怎么申请 从零开始做一个微信小程序教程
- 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新
- 一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
- 一个修改电影字幕时间偏移的小程序
- Sprite Kit教程:制作一个通用程序 1
- Linux平台下从零开始写一个C语言访问MySQL的测试程序
- 最近写的一个QVOD电影小偷程序
- 使用ASP.NET MVC(C#)15分钟内创建一个电影数据库程序
- Simple-TODO: 一个简易的 todo 程序 - web.py 中文教程
- 基于豆瓣API的电影信息浏览程序
- UNIX-LINUX编程实践教程->第八章->实例代码注解->写一个简单的shell->在shell中启动另一个程序
- 一个使用Win32SDK编写Windows GUI程序的教程: "theForger's Win32 API Tutorial"
- ffmpeg+sdl教程----编写一个简单的播放器4(让程序更模块化)
- Sprite Kit教程:制作一个通用程序 2
- 从零开始写一个arm下的裸板程序
- ffmpeg+sdl教程----编写一个简单的播放器4(让程序更模块化)
- [翻译:ASP.NET MVC 教程]用ASP.NET MVC 创建一个电影数据库应用程序——补充
- 涂鸦板,一个简单的绘图程序@GTK+ 2.0 中文教程连载