微信小程序請求wx.request數據,渲染到頁面

先說一下基本使用。官網也有。

比如說你在App.js里面有這些變量。想修改某些值。

data: {
main_view_bgcolor: "",
border: "",
}

修改方式有兩種，一是直接用“=”賦值，這種是可以修改，並且你把修改之后的值打印出來可以看到確實修改了，但是不推薦使用這樣的方式。

因為，一般我們想修改data里面的值，往往都是因為這些數據都在main.wxml中綁定了，可以實現動態修改並實時刷新顯示。剛剛這種方式容易發生數據被修改但是頁面沒有變化。

所以說一下下面這種方式：

在你綁定的自定義函數（往往都是綁定的點擊事件）里面，

this.setData({
border:"aa"//這個border跟上面data里面的border是對應的。
})

//這里有一個ES6 this作用域的問題,切記...

這種方式，點擊之后觸發事件，執行函數，更新數據，同時可以實時更新渲染界面。

 

 

下面是一個例子:(我關閉了域名和https驗證)

item.wxml

<view wx:for="{{userData}}" wx-for-index="index" wx-for-item="item">
{{index}}: {{item.name}}
</view>

item.js

// pages/items/item.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    'message':'message-string',
    'userData':[{id:"123",name:"123"},{id:"456",name:"456"}] //初始值
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this;//把this對象復制到臨時變量that
    const wxreq = wx.request({
      url: 'http://jsonplaceholder.typicode.com/users',
      data:{
        //id:"1",
        //name:'Leanne Graham'
      },
      success: function (res){
        console.log(res.data);
        this.userData = res.data; //無效不能實時的渲染到頁面
        that.setData({ userData: res.data });//和頁面進行綁定可以動態的渲染到頁面
    
      },
      fail: function (res){
        console.log(res.data);
        this.userData = "數據獲取失敗";
      }
    })
  
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

 

結果:

 

 

 

參考:https://www.jb51.net/article/105467.htm