ioses開發者試水：微信小程序開發教程-從零開始（3）

時間：2016-10-19 13:56:00

這篇文章我將講解列表的網絡請求以及網絡數據的對接。

首先找到我們(men) 的index.js文件，然後看看微信小程序的網絡請求文檔很輕鬆的就可以找到我們(men) 的示例代碼：

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

url為(wei) 我們(men) 需要請求的接口

data為(wei) 我們(men) 的請求參數

header為(wei) 設置請求的 header , header 中不能設置 Referer

success收到開發者服務成功返回的回調函數，res = {data: ‘開發者服務器返回的內(nei) 容’}

console.log( res.data )為(wei) 打印請求下來的數據

默認為(wei) get請求，在此我們(men) 就用默認的請求方式，具體(ti) 的代碼如下：

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

運行一下看看我們(men) 的請求是否有數據，結果如下圖：

可以看出我們(men) 的數據請求已經是成功的，是不是非常的簡單啊？

下麵我們(men) 再來看看怎麽(me) 給相應的UI賦值吧。

首先在我們(men) 網絡成功的地方加上以下代碼: ``` success: function( res ) { console.log( res.data ) that.setData( {

}) } ```

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

然後我們(men) 得到的數據為(wei) res.data通過打印我們(men) 可以看出我們(men) 的數據結構和原來寫(xie) 死的數據結構是一樣的，但是裏麵的字段確不一樣，因此，我們(men) 需要把請求下來的值賦值給我們(men) 原來的數據源，然後把原有的數據源的字段改成網絡請求下來的字段最終的代碼如下： ``` //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: ‘https://sep9.cn/qt5wix’, data: {}, header: { ‘Content-Type’: ‘application/json’ }, success: function( res ) { console.log( res.data ) that.setData( { newList: res.data }) } }) }

}) ```

再把index.wxml中賦值的字段改成服務器返回相應的字段，運行結果如下圖：

不知道什麽(me) 原因，我這接口返回的圖片url在微信小程序中無法顯示，為(wei) 了讓效果更加的接近我們(men) 的效果圖，在本地給我們(men) 的數據源加了些網絡上的圖片，代碼如下：

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

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