找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1457

所属分类: 微信开发 微信小程序开发资源

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群

[最新文章] 微信小程序小白项目开发案例之音乐播放器——推荐页

[复制链接]
查看: 3476|回复: 10
最佳答案
1 

17

主题

21

帖子

856

积分

专家路上

积分
856
 楼主| 发表于 2017-2-13 18:36:23 | 显示全部楼层 |阅读模式
本帖最后由 peoples 于 2017-2-13 18:50 编辑

推荐页

完成标题栏后我们开始编写推荐页,即mainView=1时所要显示的页面。

根据图10-2所示,推荐页由上方的轮播组件(banner)以及下方的电台列表两部分构成。

为了完成这个页面,我们先来看看网络请求返回的数据格式。

这里使用开源数据:
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg

参照API接口章节里的内容,我们在services文件夹下创建music.js文件,在里面开始编写网络请求代码:
  1. // 获取首页的音乐数据
  2. function getRecommendMusic(callback){
  3.     //请求所需数据
  4.     var data = {
  5.             g_tk: 5381,
  6.             uin: 0,
  7.             format: 'json',
  8.             inCharset: 'utf-8',
  9.             outCharset: 'utf-8',
  10.             notice: 0,
  11.             platform: 'h5',
  12.             needNewCode: 1,
  13.             _: Date.now()
  14.         };
  15.         wx.request({
  16.             //地址
  17.             url: 'http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
  18.             //数据
  19.             data: data,
  20.             //表示返回类型为JSON
  21.             header: {
  22.                 'Content-Type': 'application/json'
  23.             },
  24.             success: function (res) {
  25.                 if (res.statusCode == 200) {
  26.                     callback(res.data)
  27.                 } else {

  28.                 }

  29.             }
  30.         });
  31. }

  32. module.exports = {
  33.   getRecommendMusic:getRecommendMusic
  34. }
复制代码

通过这个请求,返回json格式的数据样式为:
  1. {
  2.     "code": 0,
  3.     "data": {
  4.         "slider": [
  5.             {
  6.                 "linkUrl": "http://share.y.qq.com/l?g=2766&id=1842365&g_f=shoujijiaodian",
  7.                 "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000002QUG1D0iCyQM.jpg",
  8.                 "id": 8642
  9.             },
  10.             {
  11.                 "linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",
  12.                 "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000003KFpsf1mPzlY.jpg",
  13.                 "id": 8645
  14.             },
  15.             {
  16.                 "linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html",
  17.                 "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000000ZZAWw1KsyoJ.jpg",
  18.                 "id": 8653
  19.             },
  20.             {
  21.                 "linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao",
  22.                 "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000001MG8W3200tuD.jpg",
  23.                 "id": 8609
  24.             },
  25.             {
  26.                 "linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9",
  27.                 "picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000000cfVE83KCkmz.jpg",
  28.                 "id": 8607
  29.             }
  30.         ],
  31.         "radioList": [
  32.             {
  33.                 "picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg",
  34.                 "Ftitle": "热歌",
  35.                 "radioid": 199
  36.             },
  37.             {
  38.                 "picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_307_13_1.jpg",
  39.                 "Ftitle": "一人一首招牌歌",
  40.                 "radioid": 307
  41.             }
  42.         ],
  43.         "songList": []
  44.     }
  45. }
复制代码

这里code为我们请求是否成功的标示,当它等于0时,表示请求成功。data里就是我们需要的数据,里面包含3个部分,我们需要使用的为前两个,即slider部分——为我们的轮播组件提供数据,以及radioList部分——为电台列表提供数据。 这两部分会分别以数组格式保存,通过名称来获取相应数据。

有了数据之后,我们开始编写显示数据的组件:
  1. <view hidden="{{currentView != 1}}">
  2.   <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  3.     <block wx:for="{{slider}}" wx:key="unique">
  4.       <swiper-item data-id="{{item.id}}">
  5.         <image src="{{item.picUrl}}" style="height:100%" class="slide-image" />
  6.       </swiper-item>
  7.     </block>
  8.   </swiper>
  9.   <view class="channel">
  10.     <text class="channel-title">电台</text>
  11.     <view class="radio-list">
  12.       <block wx:for="{{radioList}}" wx:key="unique">
  13.         <view class="radio-item" data-id="{{item.radioid}}" data-ftitle="{{item.Ftitle}}" bindtap="radioTap">
  14.           <image class="radio-img" mode="aspectFit" style="height:167.5px;" src="{{item.picUrl}}" />
  15.           <text class="radio-text">{{item.Ftitle}}</text>
  16.         </view>
  17.       </block>
  18.     </view>
  19.   </view>
  20. </view>
复制代码

最外层使用view组件包裹,当currentView!=1时隐藏。

轮播组件使用swiper组件来完成,设置是否显示指示点,是否自动播放,切换间隔以及滑动时间4个属性。每个swiper-item为图片,使用item.picUrl从slider里获取数据。

电台部分使用列表格式,数据保存在radioList内。每个item包涵两个部分:图片和标题,以item.picUrl和item.Ftitle保存,此外还要保存每个item的ID(item.radioid)用于页面跳转。点击的响应事件定义为radioTap。

至此我们需要的数据有:indicatorDots,autoplay,interval,duration,slider,radioList。我们把这些加入到index.js中的data里吧。
  1. //引用网络请求文件
  2. var MusicService = require('../../services/music');

  3. //获取应用实例
  4. var app = getApp()
  5. Page({
  6.     data: {
  7.         indicatorDots: true,
  8.         autoplay: true,
  9.         interval: 5000,
  10.         duration: 1000,
  11.         radioList: [],
  12.         slider: [],
  13.         mainView: 1,
  14.     },
  15.     onLoad: function () {
  16.         var that = this;
  17.         MusicService.getRecommendMusic(that.initPageData);
  18.     },
  19. })
复制代码

data写好后,我们在onLoad里调用我们写好的网络请求函数,传入的参数(that.initPageData)即当请求成功后需要执行的函数,在这个函数里我们为数组radioList和slider赋值。
  1. initPageData: function (data) {
  2.         var self = this;
  3.         //请求成功再赋值,需要判断code是否为0
  4.         if (data.code == 0) {
  5.             self.setData({
  6.                 slider: data.data.slider,
  7.                 radioList: data.data.radioList,
  8.             })
  9.         }
  10.     },
复制代码

到此为止我们的页面应该可以显示数据了,最后一步我们要给写好的view添加点击事件radioTap,让用户点击后跳转到play(音乐播放)页面。
  1. radioTap: function (e) {
  2.         var dataSet = e.currentTarget.dataset;
  3.         ...
  4.     },
复制代码

在跳转的时候,我们需要通过已经获得的radioid向网络请求数据,返回歌曲列表,并且在播放页面加载这个列表,这一部分就留到音乐播放页再完成吧。

上一节:微信小程序小白项目开发案例之音乐播放器——首页index
下一节:微信小程序小白项目开发案例之音乐播放器——排行榜



回复

使用道具 举报

最佳答案
0 

0

主题

28

帖子

397

积分

略知一二

积分
397
发表于 2017-2-15 12:22:47 | 显示全部楼层
受教了谢谢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4

帖子

114

积分

新人求带

积分
114
发表于 2017-2-28 13:46:11 | 显示全部楼层
贴子不错,好人一生平安
回复 支持 反对

使用道具 举报

最佳答案
2 

0

主题

66

帖子

887

积分

专家路上

积分
887

积极分子

QQ
发表于 2017-2-28 15:13:32 | 显示全部楼层
为什么接口地址是http?不是要https?
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

12

帖子

112

积分

新人求带

积分
112
发表于 2017-3-2 10:15:08 | 显示全部楼层
_小前端大智慧 发表于 2017-2-28 15:13
为什么接口地址是http?不是要https?

估计是仅仅在开发者工具用吧
回复 支持 反对

使用道具 举报

最佳答案
2 

0

主题

66

帖子

887

积分

专家路上

积分
887

积极分子

QQ
发表于 2017-3-3 11:15:11 | 显示全部楼层
sunq 发表于 2017-3-2 10:15
估计是仅仅在开发者工具用吧

你的意思是本地跑用http,正式上架要改成S?
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

19

帖子

243

积分

新人求带

积分
243
发表于 2017-3-3 13:48:10 | 显示全部楼层
6666666666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

22

帖子

287

积分

新人求带

积分
287
发表于 2017-8-30 23:28:25 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

22

帖子

287

积分

新人求带

积分
287
发表于 2017-8-30 23:31:47 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

88

帖子

970

积分

专家路上

积分
970
发表于 2017-9-8 08:33:29 | 显示全部楼层
感谢楼主ing........
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com