在微信小程序开发过程中，常常会遇到循环数据一说，自己看了点，写了个demo体验下小程序的魅力
//音频数组
Page({data: {items: [ //第一首 {name: 'I Am You' , author: 'Kim Taylor' , poster: 'http://xxx.xxx.xxx.xxx:8080/images/music/1122164628.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/74777.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({//填充数据 }) } })
