1内容页THIS
1.1程序
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let menu = wx.getMenuButtonBoundingClientRect();
console.log(menu);
//this.data.menutop=menu.top 错误
this.setData({
menutop:menu.top
});
let p = this.data.play;
//从服务器获取数据,条件isgood>0
wx.request({
//3
// url:url+'/db/list1.php',
//4
url:`${url}/db/list1.php`,
data:{
where:"isgood>0"
},
success (res) {
let resArr=res.data;
//对数据分组
let swiper=[];
let food=[];
for(let i=0;i<resArr.length;i++){
resArr[i].pic=url+resArr[i].pic;
if(resArr[i].isgood==1){
swiper.push(resArr[i])
}else{
food.push(resArr[i])
}
}
console.log(swiper)
// console.log(arr1)
// console.log(arr2)
this.setData({ //this放在wxrequest 异步执行中会报错
swiper,
food
})
}
})
},//onload结束
第一种方法
1.2.增加that
//从服务器获取数据,条件isgood>0
let that=this;
wx.request({
1.3.改变request内部的 this为that
that.setData({
swiper,
food
})
完整代码
onLoad: function (options) {
let menu = wx.getMenuButtonBoundingClientRect();
console.log(menu);
//this.data.menutop=menu.top 错误
this.setData({
menutop:menu.top
});
let p = this.data.play;
//从服务器获取数据,条件isgood>0
let that=this;
wx.request({
//3
// url:url+'/db/list1.php',
//4
url:`${url}/db/list1.php`,
data:{
where:"isgood>0"
},
success (res) {
let resArr=res.data;
//对数据分组
let swiper=[];
let food=[];
for(let i=0;i<resArr.length;i++){
resArr[i].pic= url+ resArr[i].pic;
if(resArr[i].isgood==1){
swiper.push(resArr[i])
}else{
food.push(resArr[i])
}
}
console.log(resArr)
// console.log(arr1)
// console.log(arr2)
that.setData({
swiper,
food
})
}
})
},//onload结束
第二种方法
1.2.sucess表示异步请求request成功后的回调 使用箭头没有this指向
代码加上箭头
1 success :(res) =>{
2 异步内部为this
完整代码
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let menu = wx.getMenuButtonBoundingClientRect();
console.log(menu);
//this.data.menutop=menu.top 错误
this.setData({
menutop:menu.top
});
let p = this.data.play;
//从服务器获取数据,条件isgood>0
//let that=this;
wx.request({
//3
// url:url+'/db/list1.php',
//4
url:`${url}/db/list1.php`,
data:{
where:"isgood>0"
},
success :(res) =>{
let resArr=res.data;
//对数据分组
let swiper=[];
let food=[];
for(let i=0;i<resArr.length;i++){
resArr[i].pic= url+ resArr[i].pic;
if(resArr[i].isgood==1){
swiper.push(resArr[i])
}else{
food.push(resArr[i])
}
}
console.log(resArr)
// console.log(arr1)
// console.log(arr2)
this.setData({
swiper,
food
})
}
})
},//onload结束
2.列表页对this
2.1 令resArr
let resArr=res.data;
2.2增加图片前面的网址
for(let i=0;i<resArr.length;i++){
resArr[i].pic= url+ resArr[i].pic;
完整代码
/**
* 生命周期函数--监听页面加载
*/
onLoad:function (options) {
console.log(options);
wx.request({
//url:`${url}/db/list1.php?where=classid=2`,
url:`${url}/db/list1.php?where=classid=${options.classid}`,
success :(res)=> {
let resArr=res.data;
for(let i=0;i<resArr.length;i++){
resArr[i].pic= url+ resArr[i].pic;
}
//数据绑定
this.setData({
food:resArr
})
}
})
},//onload结束标志
课堂笔记
一、数据库相关操作:请参考第七,八教程
二、发起网络请求
wx.request({
url: '', //服务器接口地址,可以传参
success (res) {
console.log(res.data)
}
})
三、this.setData失效
小程序在异步请求之后直接this.setData({}) 是不起作用的,因为this丢失
请求之前先保存this或使用箭头函数