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

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

//音频数组

Page({

data: {

items: [

//第一首

{

name: 'I Am You' ,

author: 'Kim Taylor' ,

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

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

action: 'pause' ,

},

//第二首

{

name: 'Just As I Am' ,

author: 'Air Supply' ,

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

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

action: 'pause' ,

},

//第三首

{

name: '追梦人' ,

author: '群星-轻音乐' ,

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

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

action: 'pause' ,

},

//第肆首

{

name: '七月上' ,

author: 'Jam' ,

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

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

action: 'pause' ,

},

//第伍首

{

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

author: 'WANDS' ,

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

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

action: 'pause' ,

}

]

}

})

//展示部分

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

< audio style = "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({

//填充数据

})

}

})