# ssgMusic

**Repository Path**: subside_hh/ssgMusic

## Basic Information

- **Project Name**: ssgMusic
- **Description**: 硅谷云音乐小程序学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-09-11
- **Last Updated**: 2025-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 小程序, 微信小程序

## README

# SMBMS
## 介绍
小程序代码
根据尚硅谷提供的视频，简单学习小程序开发。实现的是一个用网易云音乐提供的接口开发的云音乐小程序。到gitee全部更新完成， 已完成了视频中
的所有内容，并不涉及完成全部项目内容。（学这个的目的是了解大概的小程序开发流程，并不涉及这个项目的完整开发）

关于后端代码，可以访问[后端代码](https://binaryify.github.io/NeteaseCloudMusicApi/#/) 。或者直接去尚硅谷官网下载相关代码。

由于小程序版本更新太快，很多东西视频中是对的，但是在后期版本就已经无法完成，至项目全部更新到gitee，所有视频所述内容均已完成。如果之后遇到不符合那就是版本不一致导致，请
查阅小程序官方最新版本进行更改。

关于使用的内网穿透软件，建议使用钉钉的开发工具：[](https://developers.dingtalk.com/document/resourcedownload/http-intranet-penetration?pnamespace=app)


已解决bug：

1. 解决视频页可能出现”Unhandled promise rejection TypeError: Cannot read property map of undefined“的问题。
   出现原因是视频请求接口需要携带用户cookie，当用户未登录状态时，就会返回的数据会报”code：301“，根据这个code进行判断，出现301是引导用户进行登录，并且退出后续代码的执行。
   if (videoListData.code == 301){
   //301表示用户没有登录，则提醒用户登录，并跳转至登录页面

```python
title: '登录提示',
content: '请登录后观看视频内容',
success (res) {
if (res.confirm) {
wx.reLaunch({
url: '/pages/login/login'
})
} else if (res.cancel) {
return;
}
}
})
```



//这个return绝对不能少，以上else中的return只是表示退出else if。否则还可能出现 Cannot read property map of undefined
return;
}

2. 解决P49出现可能”重音“问题
   
   + 描述：点击下一个视频之后再点回原视频，会出现视频声音已经播放，视频没有成功加载出来的问题。   
   
   + 原因：在`handlePlay（）`函数中添加加一条将当前视频id输出到控制台的语句，发现居然输出了两次。这不就跟重音相匹配了嘛。这时考虑为什么会出现两次呢，这不是因为<image>和<video>都触发了`handlePlay（）`函数嘛。估计问题出现在这。
   
   + 解决：既然是因为<image>和<video>两次触发`handlePlay（）`，那能不能限制其中一次呢？给<image>和<video>分配任务，点击<image>只负责显示<video>，而<video>负责播放。这理论上是可行的解决方案。
   
     那么怎么才能<image>不进行视频播放呢，其实最简单方法是使用另起一个函数，而这个函数不进行播放，只负责采集视频id（触发`handlePlay（）`的根本就是采集id）。我第一种想法是将采集的id交给专门的函数进行处理进而播放视频。但是无独有偶，我发现了event对象有一个type属性。这个属性在接受<video>组件的`bindplay`触发时的value是”`play`“，而<image>的`bindtap`触发时value是”`tap`“。所以应该可以根据这个value的不同进行判断，然后进行不同处理。以下解决方案：在判断是否有播放记录后添加
   
     ```python
     if (event.type === 'tap' && videoItem){
     return
     }`
     ```
   
     
   
     如果`event.type === 'tap'`则表示点击的是图片而非视频，那么我们不对其进行播放，直接退出；
     这样又会遇到一个问题，就是当编译完成后点击视频，最开始点击的一定是图片，就会造成真正的视频永远不会被播放，解决这个问题可以通过播放记录”`videoItem`“来进行判别；
     当视频没有播放时，点击图片，event.type === 'tap'的结果为true，而videoItem为false，那么一下if内部不会被执行，当再次播放时event.type === 'tap'的结果还是为true，但是videoItem也是true了。
     当然这样还一个问题是，当播放原视频时，必须点击两次，第一次点击图片，第二次才是视频。这样显然不合理，这时就需要使用video组件的`autoplay`属性了。当点击图片后切换到视频，而视频设置了自动播放，使用使用起来就跟直接点击视频无二异了。
     最后在<video>组件中添加`autoplay`属性。