基于Node接口的网易云小程序实战心得【WEB前端大作战】

因为之前也学过一段时间微信小程序，感觉小程序也挺有意思的。这次随着移动应用开发全栈计划考核，来做一下仿网易云音乐小程序。在这期间踩过了很多的坑，想要实现的效果和自己打的不一致的难受，直接戴上痛苦面具，慢慢的摸爬滚打，看着文档和之前课程说讲的，逐一改进，差不多像个样子。这里初步完成了项目的主要功能，来分享一下自己的心路历程。

实现功能

• 列表式渲染数据
• 图片轮播
• 传参页面跳转
• 按钮点击弹窗
• 音乐播放、暂停、上一曲、下一曲
• 选歌播放
• 嵌套template页及传递数据
• 搜索音乐播放
• 热搜榜
• MV视频
• 登录/注册
• 个人收藏/我的消息/我的好友（待完善）

项目框架

wangyi_cloud_music                      // 网易云音乐
├── components                  // 组件
├── wangyi_cloudMusic_api_server        // node版本网易云音乐接口
├── pages                       // 小程序页面
│       └── index                 // 首页
│       └── login                 // 登录页
│       └── personal              // 个人中心
│       └── recommendSong         // 每日推荐
│       └── search                // 搜索页
│       └── songDetail            // 音乐详细页
│       └── songListDetail        // 歌单页
│       └── video                 // 视频页
├── utils                       // 工具
│       └── request.js            // 请求封装体
├── static                      // 静态资源

项目思想

小程序的开发模式是MVVM模式。简单的讲就是页面绑定的值改变，页面就发生改变；页面改变，页面的绑定的值改变。这样的话，列表式渲染就十分好用。只用写一个通用的骨架，然后使用列表渲染生成页面，这样非常省时间省力气。所以这个项目，大量充斥着列表渲染。

有的页面部分可能会出现在好几个页面上。在这个项目里，页面顶部的部分出现在多个部分中，同时小程序里很多地方需要用到弹性布局居中效果于是我便把常用css样式写在app.wxss中，这样可以复用。

页面右上角的四根竖线出现在多个页面中，那变可以单独拿出来写，然后在通过template，导入至不同的页面中去。

选歌很需要解决的一点就是怎么才知道选择的是哪一首歌，歌单是哪一个歌单。一个页面获取到其他页面想传递过来的数据的方式有很多。其一、可以通过url跳转的时候，传参跳转，再通过跳转页面中onload事件添加options参数获得。其二、可以通过点击事件改变全局属性globalData的某项的值，然后再跳转页面中得到globalData中相应的值，便能知道页面跳转中想传递的值。这个项目使用了这两种方式，url传参获取播放第几首歌曲，全局属性globalData传递歌单。

项目接口

使用的是网上找的node版本网易云音乐接口https://binaryify.github.io/NeteaseCloudMusicApi/

项目细节

高度计算

这里使用的是 scroll-view 计算高度，用 calc(100vh - 已有的高度)可滚动视图区域。使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，支持传入单位(rpx/px)。

动态css

通过 js 操作 css，这种情况我们可以通过内联 style 来解决。

style="width: {{currentWidth}}"

动态class

在条件满足时，加入 class，isPlay 是布尔类型，此处为三元表达式。同时前面的 class 不会受到任何影响。

class= “needle {{isPlay ? ‘needleRotate’ : ‘’}}”

或者直接用 &&

class= “needle {{isPlay && ‘needleRotate’}}”

登录

通过监听两个 input 框的变化，实时保存到 data 中，登录成功后将用户信息和 cookies 保存在storage 中，使用 wx.setStorageSync，一旦有 cookies 后，带在请求中，统一写在 request 封装体。

动画旋转

看下面这个动画，一般的音乐播放器都有，那它是怎么实现的呢？

/* 摇杆抬上，默认情况 */
 .needle {
   /* 调整旋转中心点 */
   transform-origin: 20rpx 0;
   /* 旋转角度 -20° */
   transform: rotate(-20deg);
   /* 旋转时间 1秒 */
   transition: transform 1s; 
 }
 /* 摇杆放下，音乐播放时 */
 .needleRotate {
    /* 不旋转*/
   transform: rotate(0deg);
   }

针对杆子是抬上还是抬下，我通过一个 js 变量来判断，因此用到了上面的动态class。

<image class="needle {{isPlay && 'needleRotate'}}" src=" "></image>

动画关键帧
` /* 磁盘转圈动画，音乐播放时 /
.discAnimation {
/
animation-name：绑定到选择器的 keyframe 的名称。
animation-duration：完成动画所花费的时间
animation-timing-function：规定动画的速度曲线。
linear 动画从头到尾的速度是相同的。
animation-delay：在动画开始之前的延迟时间。
延迟 1秒 等摇杆下来再开始旋转
animation-iteration-count：动画应该播放的次数。
infinite 无线循环
*/
animation: disc 6s linear 1s infinite;
}

/*
@keyframes 用来设置动画帧
from to
- 适用于简单的动画，只有起始帧和结束帧
百分比
- 多用于复杂动画，不止两帧
*/
@keyframes disc {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}
`

绑定事件传参

<view class="scrollItem" wx:for="{{recommendList}}" wx:key="id" data-song="{{item}}" bindtap="toSongDetail"> <view class="musicInfo"> <text class="musicName"> {{item.name}} </text> <text class="author"> {{item.artists[0].name}} - {{item.album.name}} </text> </view> </view>

全局变量

app.js 文件中设置，globalData 对象就是存储全局变量的。

App({
   globalData: {
     isMusicPlay: false, // 是否有音乐在播放
     musicId: '' // 播放的音乐Id
   },
 })

应用

 const appInstance = getApp()
 appInstance.globalData.musicId

本地存储

1、小程序中的本地存储有同步功能，可用于保存用户信息(用户登录后的一些基本信息)

2、缓存的更新需要使用 setStorageSync 方法。

效果图

结语

一路跟随华为云移动应用开发成长计划学习过来，期间碰到的大大小小的问题数不胜数，收获很大。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。

这个项目给我最大的启示就是遇到问题不要逃避，自己想办法解决，当你成功解决掉那个问题后，相信我，你一定非常开心。再就是很多时候解决问题的方法多种多样，写代码时可以多做几次考虑用哪种方式实现一个功能，这样既让项目变得更高效，也让自己变得更优秀。越努力，越幸运！加油，IT朋友们。

【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890