小程序网易云（四）
一，视频模块，上一个视频在播放，下一个视频点击播放，上一个视频需要暂停播放
1,1，此时有个bug,点击下一个视频，上一个视频还在继续播放
1.2，wx.createVideoContext(string id, Object this)，创建 video 上下文 VideoContext 对象，video 组件的 id，
VideoContext.play()
播放视频
VideoContext.pause()
暂停视频
bindplay, 当开始/继续播放时触发play事件
poster，视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效
button的open-type属性，授权行为，share合法值，触发用户转发
onShareAppMessage(Object object)，只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
1.3，上一个视频在播放，点击下一个视频，上一个视频暂停
<video class="common" id="{{'video'+item.data.vid}}" src="{{item.data.urlInfo.url}}" bindplay="handlePlay" ></video>
js代码,
//用于监视视频的播放状态 handlePlay(event){ //记录当前正在播放的视频的id->vid let vid = event.target.id; // 要过滤当前视频vid,不然当前点击当前视频一直是暂停的 this.videoContext &&vid!==this.data.vid&& this.videoContext.pause(); this.setData({ vid }); //停止上一个视频的播放 //1.拿到上一个视频的videoContext上下文对象 this.videoContext = wx.createVideoContext(vid); // 延迟两秒钟后暂停该视频 // let videoContext = wx.createVideoContext(vid); // setTimeout(videoContext.pause,10000); // console.log(event) // console.log('playing') },
1,4 视频模块，性能优化
同一页面存在多个video时，video无法正常播放一直在加载转圈
不建议同个页面使用多个video组件，建议不超过3个video，如果要实现video列表功能，请进行优化（image列表，选中时将image替换成video）
视频模块(性能优化) 问题:官方建议通个页面不超过3个video组件,但是我们项目中视频列表明显不符合 解决:可以用image列表替换成视频列表,当用户点击某个的image组件的时候在将他切换成video组件,进行视频播放 1)通过给video组件添加标签属性poster,实现视频默认显示某个画面 2)新增一个image组件,显示与视频相同的图片,并设置相同样式 3)页面刚显示时,默认显示image组件,video组件隐藏(image组件和video组件显示切换用状态控制) 4)给image组件绑定点击事件,当用户点击image组件,隐藏当前image组件,显示对应的video组件 5)效果完成,提升用户体验!!! 问题:目前点击image组件会切换显示video组件,但是还需要再点击video组件,才能进行播放 解决:创建videoContext,调用play方法进行,实现video组件自动播放 6)优化代码!!! 需求:将handlePlay与image的handleTrigger合并为一个函数 7)提升用户体验!!! 问题:当前video组件内显示的画面左右有黑色"边框",并未填充完整,与image组件切换时有些突兀 解决方案1(效果较差):将video组件上的标签属性object-fit设置为fill 缺点:会使部分竖屏视频效果会被拉伸是去原有比例,效果较差 解决方案2(效果较好):将video标签宽度和高度的比例设置的跟图片原有高度相同,通过video标签宽度计算高度
当图片的id和video的id相同时，显示video组件。
<view class="videoItem" wx:for="{{videoList}}" wx:key="id"> <video class="common" id="{{'video'+item.data.vid}}" src="{{item.data.urlInfo.url}}" bindplay="handleTrigger" poster="{{item.data.coverUrl}}" wx:if="{{'video'+item.data.vid===vid}}" ></video> <image wx:else class="common" bindtap="handleTrigger" id="{{'video'+item.data.vid}}" src="{{item.data.coverUrl}}"></image>
js， 点击图片切换到video组件时，通过videoContext.play();自动播放
data: { videoGroup:[], id:null, trigger:false, videoList:[], vid: "" }, //用于切换image组件与video组件的函数 handleTrigger(event){ // console.log('handleTrigger'); let vid = event.target.id; // console.log(vid) this.setData({ vid }); // 生成当前图片对应视频的videoContext let videoContext = wx.createVideoContext(vid); //通过videoContext的play方法,控制视频播放 videoContext.play(); },
1.5，视频模块分享功能
视频模块(分享功能) 1)需要注意,由于项目还在开发期间,分享小程序给好友,好友必须要有体验权限才可以点开(可以在小程序开发中心设置) 2)通过给button组件添加标签属性open-type,设置为share,点击之后就会自动触发页面的事件函数onShareAppMessage 3)在onShareAppMessage中,return对象,自定义标题等数据 4)通过event.target的值区分当前的分享功能的来源 到底是点击右上角的分享触发的,还是点击button触发的 1.如果是右上角分享的就显示默认的小程序截图 2.如果是点击button触发的,就分享按钮对应的图片以及标题
button的open-type属性，授权行为，share合法值，触发用户转发 onShareAppMessage(Object object)，只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮 监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。 from参数， 转发事件来源。 button：页面内转发按钮； menu：右上角转发菜单 此事件处理函数需要 return 一个 Object，用于自定义转发内容
<button open-type="share" data-title="{{item.data.title}}" data-imageurl="{{item.data.coverUrl}}" class="item btn"> <text class="iconfont icon-gengduo"></text> </button>
js代码，获取自定义的属性时，需要小写，比如imageurl
/** * 用户点击右上角分享 */ onShareAppMessage: function (shareObj) { // console.log(shareObj) // 1.通过传入的实参内部的from属性进行判断,区分分享的来源 // button代表button组件,menu代表右上角分享 if(shareObj.from==="button"){ let { title,imageurl } = shareObj.target.dataset; console.log('我是通过button分享的') //通过return一个配置对象,配置分享的内容 return { title, path:"/pages/video/video", imageUrl:imageurl } } else if (shareObj.from === "menu") { console.log('我是通过右上角转发分享的') } }
二，每日推荐模块，数据动态渲染
接口地址 : /recommend/songs 调用例子 : /recommend/songs 注意事项: 需要登录，携带cookie 数据量大，可自行整合 返回数据:
2.1，日期获取
<view class="header"> <image src="/static/images/recommendSong/recommendSong.jpg"></image> <view class="date"> <text class="day">{{day}} /</text> <text class="month">{{month}}</text> </view> </view>
this.setData({ day: new Date().getDate(), month: new Date().getMonth() + 1 })
2.2，发送请求，获取数据
let result = await request('/recommend/songs'); // console.log(result) this.setData({ recommendList: result.recommend })
data: { month:"", day:"", recommendList:[] },
2.3，页面数据渲染
<!-- 音乐列表 -->
<scroll-view class="scrollView" scroll-y>
<view class="recommendItem"
bindtap="toSong"
data-id="{{item.id}}"
wx:for="{{recommendList}}"
wx:key="id">
<!--
data-index="{{index}}" 可行
data-item="{{item}}" 不可行,数据体积太大,转换成json字符串传不过去
-->
<image src="{{item.album.picUrl}}"></image>
<view class="musicContent">
<text class="musicName">{{item.name}}</text>
<text class="author">{{item.artists[0].name}}</text>
</view>
<view class="radio">
<text class="iconfont icon-gengduo"></text>
</view>
</view>
</scroll-view>
2.4，页面加载音乐列表页，如果没有登录，也就没有携带cookie,需要弹框，指引去登录
wx.showModal(Object object)，显示模态对话框(API--界面-交互)
wx.navigateBack(Object object)，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
只有登录过后，歌曲信息才会请求成功
onLoad: async function (options) { // console.log(new Date().getDate()) // console.log(new Date().getMonth()+1) //获取当前最新时间,并更新到状态中 this.setData({ day: new Date().getDate(), month: new Date().getMonth() + 1 }) // 没有登录过 if(!wx.getStorageSync('cookies')){ wx.showModal({ title:"请先登录", content:"该功能需要登录帐号", cancelText:"回到首页", confirmText:"去登陆", success(res){ // 去登录按钮 if(res.confirm){ wx.redirectTo({ url: '/pages/login/login', }) }else{ wx.navigateBack(); } // console.log(res) } }) } let result = await request('/recommend/songs'); // console.log(result) this.setData({ recommendList: result.recommend }) },
在index页，点击每日推荐按钮，跳转到每日推荐页recommendSong
<view class="headerItem" bindtap="toRecommendSong"> <text class="iconfont icon-meirituijian-"></text> <text>每日推荐</text> </view>
toRecommendSong(){ wx.navigateTo({ url: '/pages/recommendSong/recommendSong' }) },
三，播放歌曲静态页面搭建song以及动态交互
获取音乐详情 必选参数 : ids: 音乐 id, 如 ids=347230 接口地址 : /song/detail 调用例子 : /song/detail?ids=347230 返回数据格式：
在每日推荐歌曲中，点击一条歌曲，跳转到歌曲播放页面，此时需要传递id到歌曲详情页
在推荐歌曲页
<scroll-view class="scrollView" scroll-y> <view class="recommendItem" bindtap="toSong" data-id="{{item.id}}" wx:for="{{recommendList}}" wx:key="id"> <!-- data-index="{{index}}" 可行 data-item="{{item}}" 不可行,数据体积太大,转换成json字符串传不过去 --> <image src="{{item.album.picUrl}}"></image> <view class="musicContent"> <text class="musicName">{{item.name}}</text> <text class="author">{{item.artists[0].name}}</text> </view> <view class="radio"> <text class="iconfont icon-gengduo"></text> </view> </view> </scroll-view>
js代码,query路由传参，有大小限制
每日推荐模块(重点:路由传参) 1)给每个recommendItem绑定tap事件,当点击之后跳转页面至播放歌曲页面 2)当页面进行跳转时候,要显示对应歌曲内容的播放歌曲页面,出现问题!!! 问题1:如何将即将播放歌曲的数据对象,从每日推荐页面传递至播放歌曲页面 解决:以query格式进行路由传参,播放歌曲页面通过onLoad的形参options接收 问题2:经过问题1,我们成功将数据对象传给了播放歌曲页面,但是由于url长度限制,数据无法完整传到播放歌曲页面 解决:思路出错,更换思路 3)由于能传的数据量有限,所以我们将传的数据从歌曲对象换成歌曲的id 4)在播放歌曲页面的onLoad函数中获取到歌曲的id,并发送请求到服务器,请求数据,并保存到状态中 5)使用状态数据实现页面动态渲染,通过wx.setNavigationBarTitle设置播放歌曲页面标题
// 用于跳转详情页面 toSong(event){ let {id} = event.currentTarget.dataset; // console.log('id',id); wx.navigateTo({
url: '/pages/song/song?songId=' + id }) },
在歌曲播放详情页，发送请求，获取歌曲图片，作者数据
wx.setNavigationBarTitle(Object object)，动态设置当前页面的标题
onLoad: async function (options) { // 通过options可以拿到query参数 // 1.跳转页面时,通过query传参,对url进行拼接 // 2.在onLoad中的形参options中,可以或得到所有的query键值对 // console.log(options.songId); let {songId} = options; this.setData({ songId }) //1.请求数据 let result = await request('/song/detail', { ids:songId }); // console.log(result) //2.保存至data中 this.setData({ songObj:result.songs[0] }) // 动态设置顶部标题 wx.setNavigationBarTitle({ title: this.data.songObj.name }) //3.动态渲染 },
数据渲染
<view class="songContainer {{isplaying?'isplaying':''}}"> <text class="name">{{songObj.ar[0].name}}</text> <view class="keng"></view> <image class="needle" src="/static/images/song/needle.png"></image> <view class="discContainer"> <image class="disc" src="/static/images/song/disc.png"></image> <image class="discImg" src="{{songObj.al.picUrl}}"></image> </view>
发送请求，获取歌曲音频连接数据
获取歌曲播放地址 必选参数 : id : 音乐 id 接口地址 : /song/url 调用例子 : /song/url?id=33894312
背景音频，BackgroundAudioManager，BackgroundAudioManager 实例，可通过 wx.getBackgroundAudioManager 获取
获取全局唯一的背景音频管理器。 小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态
string src
音频的数据源（2.2.3 开始支持云文件ID）。默认为空字符串，当设置了新的 src 时，会自动开始播放，目前支持的格式有 m4a, aac, mp3, wav
string title
音频标题，用于原生音频播放器音频标题（必填）。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值
boolean paused
当前是否暂停或停止。（只读
BackgroundAudioManager.pause()
暂停音乐
播放歌曲模块(重点:音乐播放) 1)由于我们请求回来的歌曲数据中没有音频资源的地址,所以需要再请求另一个专门用户获取音频资源地址的接口 2)将请求得到的音频资源数据保存至页面状态 3)优化代码!!! 问题:用户可能点击每日推荐的某个选项,但是跳转到song页面之后并不播放 解决:等用户真的有播放歌曲的意愿,再发送请求(点击播放按钮时) 4)通过wx.getBackgroundAudioManager,获得背景音频的播放器实例 5)给实例添加属性src和title,当src的值为新值时候,背景音频会自动播放,出现问题!!! 问题:控制台报错提示,该功能需要配置才能使用 解决:在app.json中配置requiredBackgroundModes属性
<!-- 底部播放选项区域 --> <view class="musicControl"> <text class="iconfont icon-iconsMusicyemianbofangmoshiShuffle" ></text> <text class="iconfont icon-shangyishou" id="pre"></text> <text class="iconfont {{isplaying?'icon-zanting':'icon-bofang'}} big" bindtap="handlePlay"></text> <text class="iconfont icon-next" id="next"></text> <text class="iconfont icon-iconsMusicyemianbofangmoshiPlayList"></text> </view> </view>
js代码
data: { isplaying:false, songId:null, songObj:{}, musicUrl:"" }, async handlePlay() { let musicUrlData = await request('/song/url', { id: this.data.songId }); this.setData({ isplaying: !this.data.isplaying, musicUrl: musicUrlData.data[0].url }) // 获取音频实例 let backgroundAudioManager = wx.getBackgroundAudioManager(); // console.log('paused',backgroundAudioManager.paused); // paused是只读属性,false是正在播放,true代表已停止或者暂停 // paused值在首次读取时,一定是undefined //pause是方法,调用它可以暂停音频 if (backgroundAudioManager.paused || typeof backgroundAudioManager.paused === "undefined") { // 音频连接 backgroundAudioManager.src = this.data.musicUrl; // 音频标题，必传 backgroundAudioManager.title = this.data.songObj.name; } else { // 暂停播放 backgroundAudioManager.pause(); } // this.setData({ // isplaying: !this.data.isplaying // }) },
此时报了个错
在app.json中配置
"requiredBackgroundModes": ["audio"],
