微信小程序基础知识--------this.data 失效的方法

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或使用箭头函数