微信小程序制作（三）

17. 网络请求

（1）不存在跨域问题

（2）网络请求地址必须请求https开头的

（3）关于请求

默认超时时间和最大超时时间都是60s

request、uploadFile、downloadFile的最大并发限制是10个

网络请求的refererheader 不可设置。其格式固定为https://servicewechat.com///page-frame.html，其中为小程序的 appid，为小程序的版本号，版本号为表示为开发版、体验版以及审核版本，版本号为devtools表示为开发者工具，其余为正式版本。

小程序进入后台运行后（非置顶聊天），如果5s内网络请求没有结束，会回调错误信息fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。

流程：（1）服务器配置：request合法域名

(2)代码：

wx.request({ url:'test.php',//仅为示例，并非真实的接口地址data: { x:'', y:''}, header: {'content-type':'application/json'// 默认值}, success:function(res){console.log(res.data) }})

坑：'content-type':'application/json'---->'content-type':'application/xml'

封装：

http(url, callback) {

wx.request({

url: url,

header: {

'content-type':'application/xml'

},

success:function(data) {

callback(data.data.result.data)//把data扔出去，不可能在封装的函数中处理

}

})

},

onLoad:function(options) {

this.http("https://v.juhe.cn/toutiao/index?type=top&key=182e9e4d6c616c76309bc294e4368cda",this.getNewsInfo);

}

getNewsInfo(data) {//拿到callback的结果

wx.hideToast();

console.log(data);

this.setData({

//显示对应的数据

newsid:this.data.newId//因为函数之间互不影响,所以我要在点击事件中再次读取这个id的话,要先把他存在data中,然后通过this.data.newsid来读取

});

},

18.用工具类来处理一些逻辑处理

utils/utils.js

functionCutTitle(title){

if(title.length>6){

title=title.substring(,6)+"...";

}

returntitle

}

module.exports={

CutTitle: CutTitle

}

引用：varutils =require("../utils/utils");

title: utils.CutTitle(data.subjects[i].title),

19.上拉加载onReachBottom--->数据累加

监听用户上拉触底事件

可以在app.json的window选项中或页面配置中设置出发距离onReachBottomDistance

在触发距离内滑动期间，事件只会被触发一次

onReachBottom:function() {

wx.showLoading({

title:'加载中...',

mask:true

})

},

getmovies(data){

wx.hideToast();

//请求到数据后,清除下拉刷新

wx.stopPullDownRefresh();

varmovies = [];

vardata=data.data;

varmovieObj = {

id: data.subjects[i].id,

title: utils.CutTitle(data.subjects[i].title),

image: data.subjects[i].images.large,

star: utils.CutStart(data.subjects[i].rating.stars),

average: data.subjects[i].rating.average

}

movies.push(movieObj);

}

// 上拉加载的数据累加

vartotalMovies = [];

//这里改变start,不用重复获取数据

// this.data.movies:上拉加载之前的数据

//movies:上拉加载之后请求到的新的数据

//数据要在 this.setData中修改,而不是由视图引起的

this.setData({

movies: totalMovies

});

if(movies.length

wx.showToast({

title:'数据已经加载完了',

icon:"fail",

duration:2000

})

}

},