本节实训内容为微信小程序与后端服务器进行通信,向后端请求数据而不是向网易云请求,微信小程序页面跳转以及部分组件功能,如原型图片,wx:for用法等
另外将自己的腾讯云windows服务器改为了CentOS服务器,并申请了https证书,使项目能够上线运行,下面贴出项目网址和微信小程序体验版二维码,欢迎大家进行测试,体验版只有15个名额,先到先得哦。
后端项目地址:https://www.hbuas.top/ManageMusic/index.
微信小程序体验版二维码↓
-
歌曲列表
-
后端
@RequestMapping("/wx/music") @RestController//给小程序提供的一定是json数据,所以直接指定controller为RestController public class WxMusicController { @Resource private MusicService musicService; /** * 分页获取歌曲列表(默认从第一页开始,默认取10条) */ @RequestMapping("/list") public ResultVo list(Integer page,Integer limit){ return musicService.getMusicList(page,limit); } }
-
小程序端
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //1. 调用获取歌曲列表的方法 this.getMusicList(); }, /** * 获取歌曲列表 */ getMusicList:function(){ //在this指向发生改变之前,使用that提前存储下this var that = this; wx.request({ url: this.data.baseUrl+'wx/music/list', data:{ page:1, limit:30 }, success:function(res){ //解析之后的歌曲结果 var resultSongs = res.data.data; //使用this给data中的属性赋值 //在经过异步接口回调之后,this的指向发生了改变 //异步请求的回调函数中,不要用this that.setData({ songList:resultSongs }) } }) },
<!-- 歌曲列表 --> <view wx:for="{{songList}}" wx:for-item="song" class="music-container"> <view class="left"> <image src="{{baseUrl+song.mPhoto}}"></image> </view> <view class="center"> <view class="songName">{{song.mName}}</view> <view class="singerName"> <block wx:for="{{song.artistList}}" wx:for-item="artist" wx:for-index='i'> <text wx:if="{{i<song.artistList.length-1}}"> {{artist.aName}}, </text> <text wx:else>{{artist.aName}}</text> </block> <block wx:if="{{song.tbAlbum}}">- 《{{song.tbAlbum.alName}}》 </block> <block wx:else>- 《单曲》</block> </view> </view> <view class="right"> <!-- 携带当前歌曲的id --> <image src="/img/play.png"></image> </view> </view>
-
-
歌曲详情
-
后端
/** * 根据id获取详情(为了偷懒不返回ResultVo格式了,直接返回TbMusic格式) */ @RequestMapping("/detail") public TbMusic detail(Integer id){ return musicService.getMusicById(id); }
-
小程序端
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getMusicInfoById(options.id); }, /** * 根据歌曲id获取歌曲详情的方法 */ getMusicInfoById:function(id){ var that = this; wx.request({ url: this.data.baseUrl+'wx/music/detail', data:{ id:id }, success:function(res){ that.setData({ song:res.data }) } }) },
-