微信小程式開發教程-從零開始（3）

丶Bison發表於2016-10-19
微信小程式

微信小程式開發教程-從零開始（1）

微信小程式開發教程-從零開始（2）

前倆章中我們學會了怎麼搭建一個微信小程式的框架以及顯示一個文章列表，這篇文章我將講解列表的網路請求以及網路資料的對接。

首先找到我們的index.js檔案，然後看看微信小程式的網路請求文件很輕鬆的就可以找到我們的示例程式碼：

wx.request({
  url: 'test.php',
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'Content-Type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})複製程式碼

url為我們需要請求的介面

data為我們的請求引數

header為設定請求的 header , header 中不能設定 Referer

success收到開發者服務成功返回的回撥函式，res = {data: '開發者伺服器返回的內容'}

console.log( res.data )為列印請求下來的資料

預設為get請求，在此我們就用預設的請求方式，具體的程式碼如下：

onLoad: function () {
    console.log('onLoad')
    var that = this
    wx.request( {
      url: 'http://sep9.cn/qt5wix',
      data: {},
      header: {
        'Content-Type': 'application/json'
      },
      success: function( res ) {
        console.log( res.data )
      }
    })
  }複製程式碼

執行一下看看我們的請求是否有資料，結果如下圖：

微信小程式開發教程-從零開始（3）

可以看出我們的資料請求已經是成功的，是不是非常的簡單啊？?下面我們再來看看怎麼給相應的UI賦值吧。

首先在我們網路成功的地方加上以下程式碼:

success: function( res ) {
        console.log( res.data )
          that.setData( {

          })
      }複製程式碼

that.setData( { })這個方法主要是用來賦值的

然後我們得到的資料為res.data通過列印我們可以看出我們的資料結構和原來寫死的資料結構是一樣的，但是裡面的欄位確不一樣，因此，我們需要把請求下來的值賦值給我們原來的資料來源，然後把原有的資料來源的欄位改成網路請求下來的欄位最終的程式碼如下：

//index.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    newList:[  
    ]
  },
  //事件處理函式
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    wx.request( {
      url: 'http://sep9.cn/qt5wix',
      data: {},
      header: {
        'Content-Type': 'application/json'
      },
      success: function( res ) {
        console.log( res.data )
          that.setData( {
            newList: res.data
          })
      }
    })
  }

})複製程式碼

再把index.wxml中賦值的欄位改成伺服器返回相應的欄位，執行結果如下圖：

微信小程式開發教程-從零開始（3）

不知道什麼原因，我這介面返回的圖片url在微信小程式中無法顯示，為了讓效果更加的接近我們的效果圖，在本地給我們的資料來源加了些網路上的圖片，程式碼如下：

data: {
    newList:[{fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
             {fistImg:"http://a.hiphotos.baidu.com/image/pic/item/c8ea15ce36d3d539be4d77b83f87e950352ab05c.jpg"} , 
             {fistImg:"http://h.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a2922e765c99b25bc315c607c8d.jpg"} ,
             {fistImg:"http://c.hiphotos.baidu.com/image/pic/item/3b292df5e0fe9925ae23d95736a85edf8db1718d.jpg"} ,
             {fistImg:"http://g.hiphotos.baidu.com/image/pic/item/faedab64034f78f099a529f47b310a55b3191c0e.jpg"} ,
             {fistImg:"http://g.hiphotos.baidu.com/image/pic/item/bd315c6034a85edf9ba34e244b540923dd54758d.jpg"} ,
             {fistImg:"http://f.hiphotos.baidu.com/image/pic/item/00e93901213fb80e0ee553d034d12f2eb9389484.jpg"} ,
             {fistImg:"http://img1.imgtn.bdimg.com/it/u=2955244448,132069077&fm=21&gp=0.jpg"} ,
             {fistImg:"http://image.tianjimedia.com/uploadImages/2014/127/32/VP974HZ0AXL2.jpg"} ,
             {fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
             {fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
             {fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
             {fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
             {fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
             {fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} ,
             {fistImg:"http://img0.imgtn.bdimg.com/it/u=1640246403,1832676351&fm=21&gp=0.jpg"} 
    ]
  }複製程式碼

隨便弄幾張圖了，看看效果如何，?

微信小程式開發教程-從零開始（3）

本來還想做下詳情頁的，由於介面的詳情是H5 ,貌似微信小程式不能直接載入H5，如有知道的朋友也可以給我留言告訴我，本人對於H5也是一竅不通?。

首發連結

第一時間收到文章推送

demo下載

本文為Bison原創，轉載請註明出處，否則將追究法律責任

相關文章