基于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。

动画关键帧

` /* 磁盘转圈动画，音乐播放时 /

.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);

}

}

`

绑定事件传参

全局变量

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

Node.js 小程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。