微信小程序开发之数据使用wx:for循环展示

在微信小程序开发过程中，常常会遇到循环数据一说，自己看了点，写了个demo体验下小程序的魅力

//音频数组

Page({

data: {

items: [

//第一首

{

name: 'I Am You',

author: 'Kim Taylor',

poster: 'http://103.27.7.158:8080/images/music/20171122164628.jpg',

src: 'http://103.27.7.158:8080/images/music/Kim Taylor - I Am You.mp3',

action:'pause',

},

//第二首

{

name: 'Just As I Am',

author: 'Air Supply',

poster: 'http://103.27.7.158:8080/images/music/742008777.jpg',

src: 'http://103.27.7.158:8080/images/music/Air Supply - Just As I Am - Digitally Remastered 1999.mp3',

action: 'pause',

},

//第三首

{

name: '追梦人',

author: '群星-轻音乐',

poster: 'http://103.27.7.158:8080/images/music/210136823.jpg',

src: 'http://103.27.7.158:8080/images/music/群星 - 追梦人.mp3',

action: 'pause',

},

//第肆首

{

name: '七月上',

author: 'Jam',

poster: 'http://103.27.7.158:8080/images/music/1589703900.jpg',

src: 'http://103.27.7.158:8080/images/music/Jam - 七月上.mp3',

action: 'pause',

},

//第伍首

{

name: '世界が终わるまでは…',

author: 'WANDS',

poster: 'http://103.27.7.158:8080/images/music/933843024.jpg',

src: 'http://103.27.7.158:8080/images/music/WANDS - 世界が终わるまでは….mp3',

action: 'pause',

}

]

}

})

//展示部分

<viewclass="page-section page-section-gap"style="text-align: center;"wx:for="{{items}}"wx:for-index="index"wx:for-item="item">

<audiostyle="text-align: left"src="{{item.src}}"poster="{{item.poster}}"author="{{item.author}}"name="{{item.name}}"action="{{item.action}}"

controls></audio>

</view>

上面展示方式，是写死在数组里，每次新增，修改，删除都要改动js文件。可以换一种方式，调用wx.request向服务端请求数据，然后使用wx:for输出到页面中

附wx.request代码

wx.request({

url: 'http://xxx.xxx.xxx.xxx:8080/app/getJSONObject.json',

method: 'POST',

data: {},

header: {

'Accept':'application/json'

},

success: function (res) {

console.log(res)

that.setData({

//填充数据

})

}

})