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

运气男孩 发表于 2021/05/04 01:48:51 2021/05/04
【摘要】 因为之前也学过一段时间微信小程序,感觉小程序也挺有意思的。这次随着移动应用开发全栈计划考核,来做一下仿网易云音乐小程序。在这期间踩过了很多的坑,想要实现的效果和自己打的不一致的难受,直接戴上痛苦面具,慢慢的摸爬滚打,看着文档和之前课程说讲的,逐一改进,差不多像个样子。这里初步完成了项目的主要功能,来分享一下自己的心路历程。 实现功能列表式渲染数据图片轮播传参页面跳转按钮点击弹窗音乐播放、暂停...

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

实现功能

  • 列表式渲染数据
  • 图片轮播
  • 传参页面跳转
  • 按钮点击弹窗
  • 音乐播放、暂停、上一曲、下一曲
  • 选歌播放
  • 嵌套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 封装体。

动画旋转

看下面这个动画,一般的音乐播放器都有,那它是怎么实现的呢?
image.png

/* 摇杆抬上,默认情况 */
 .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 方法。

效果图

image.png

image.png
image.png

结语

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

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

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。