IOS開發(fā)者試水：微信小程序開發(fā)教程-從零開始（3）
|
這篇文章我將講解列表的網(wǎng)絡(luò)請(qǐng)求以及網(wǎng)絡(luò)數(shù)據(jù)的對(duì)接。 首先找到我們的index.js文件，然后看看微信小程序的網(wǎng)絡(luò)請(qǐng)求文檔很輕松的就可以找到我們的示例代碼：
wx.request({
url: 'test.php',
data: {
x: '' ,
y: ''
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
默認(rèn)為get請(qǐng)求，在此我們就用默認(rèn)的請(qǐng)求方式，具體的代碼如下：
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 )
}
})
}
運(yùn)行一下看看我們的請(qǐng)求是否有數(shù)據(jù)，結(jié)果如下圖：
可以看出我們的數(shù)據(jù)請(qǐng)求已經(jīng)是成功的，是不是非常的簡(jiǎn)單啊？ 下面我們?cè)賮?lái)看看怎么給相應(yīng)的UI賦值吧。 首先在我們網(wǎng)絡(luò)成功的地方加上以下代碼: ``` success: function( res ) { console.log( res.data ) that.setData( {
})
} ```
that.setData( { })這個(gè)方法主要是用來(lái)賦值的
然后我們得到的數(shù)據(jù)為res.data通過打印我們可以看出我們的數(shù)據(jù)結(jié)構(gòu)和原來(lái)寫死的數(shù)據(jù)結(jié)構(gòu)是一樣的，但是里面的字段確不一樣，因此，我們需要把請(qǐng)求下來(lái)的值賦值給我們?cè)瓉?lái)的數(shù)據(jù)源，然后把原有的數(shù)據(jù)源的字段改成網(wǎng)絡(luò)請(qǐng)求下來(lái)的字段最終的代碼如下： ``` //index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { newList:[ }) ``` 再把index.wxml中賦值的字段改成服務(wù)器返回相應(yīng)的字段，運(yùn)行結(jié)果如下圖：
不知道什么原因，我這接口返回的圖片url在微信小程序中無(wú)法顯示，為了讓效果更加的接近我們的效果圖，在本地給我們的數(shù)據(jù)源加了些網(wǎng)絡(luò)上的圖片，代碼如下：
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"}
]
}
隨便弄幾張圖了，看看效果如何，
本來(lái)還想做下詳情頁(yè)的，由于接口的詳情是H5 ,貌似微信小程序不能直接加載H5，如有知道的朋友也可以給我留言告訴我，本人對(duì)于H5也是一竅不通。 |
