参数有7个，这里主要讲一下几个重要的：

url : 请求的地址data: 携带的数据method : 请求方式，默认为getsuccess: 请求成功的回调函数

了解了网路请求的方法后，我们就不需要我们原来模拟的那些数据了，把所有的假数据统统干掉，留一个空的数据用来放数据即可。

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值相同可简写为urldata: {}, //不要求数据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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。