# miniProgram-cloudMusic

**Repository Path**: oliverbroken/mini-program-cloud-music

## Basic Information

- **Project Name**: miniProgram-cloudMusic
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-22
- **Last Updated**: 2021-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 开发流程注意事项

## 首页

1. 头部导航栏模块
    在app.wxss引入图标文件，需要将css后缀改成wxss
2. 2.1 推荐歌曲模块
    开启flex布局，想让内部子元素横向排列，出现问题!!!
	问题:display:flex无效
	原因:scroll-view组件不能直接开启flex布局,需要配置
	解决:根据警告修改代码，给组件标签添加属性enable-flex    
    2.2 布局效果实现,出现问题!!!
	问题:无法滑动
	原因:scroll-view组件想要滚动需要单独配置
	解决:添加标签属性scroll-x,允许横向滚动
    2.3多行文本的居中
    ```css
    	overflow:hidden；
		text-overflow:ellipsis；
		display:-webkit-box；//开启webkit内核的盒模型
		-webkit-box-orient:vertical；  //设置子元素对齐方式
        -webkit-line-clamp:2  //设置为2行文本溢出隐藏
    ```
3. 轮播图模块
    wx.request的最高并发请求为10个，chrome并发数最多6个,Firefox并发数最多是10个
    默认超时时间和最大超时时间都是60s
    本地开发请求后端数据 在本地设置中关闭域名验证

4. 封装发送请求功能函数
  1)分析封装函数的核心思想
	保留公共部分，提取动态部分
	1.封装函数
	  1)将重复出现的代码保留下来(公共代码)
	  2)将需要动态传入的数据,提取成形参
	  3)谁调用谁动态传入数据
	2.封装组件
	  1)将重复出现的代码保留下来(template,css)
	  2)将需要动态传入的数据,提取成props
	  3)谁使用组件,谁动态传入props
  2)将url,data,method提取成功形参,并添加形参默认值
  3)请求成功,出现问题!!!
	问题:如何将数据交给组件
	解决:通过promise配合then获取到请求回来的参数
  4)优化代码,改成使用async和await实现效果
  5)再次解耦,提取出配置文件,用于配置host

5. 排行榜模块
    问题:如何让下一个swiper-item的内容漏出来一些,提前看到
	解决:给swiper组件添加一个next-margin标签属性
  1)通过/top/list接口请求数据,数据量很大,需要对数据进行处理(我们需要的列表数据在playlist内的tracks中)
  2)通过while循环请求ids从0-3的数据,取出内部的榜单名称以及每个榜单的前三条数据
  3)对代码进行优化,当每次数据请求回来之后立马更新状态,提高首屏渲染速度

## 底部导航栏
    在app.json中tabbar配置设置
    	注意:
	       1.list数组对少需要配置2个对象,对多只能配置5个对象
	       2.pagePath的路径不能设置成绝对路径
	       3.iconPath和selectedIconPath都不支持网络图片

## 个人中心


1. 个人中心模块(C3效果实现)
  1)使用已有的personal页面结构和样式
  2)通过给cover-container组件绑定touchstart事件获取手指起始坐标startY,
     绑定touchmove事件获取用户滑动时手指坐标moveY,并计算出滑动距离moveDistance
  3)给cover-container组件添加行内样式,通过transform控制组件移动,
     将moveDistance作为组件状态,动态控制组件transform位置
  4)对位移距离进行临界值判断,不允许往上移动,往下移动到某个位置禁止继续往下移动
  5)绑定touchend事件,当用户松手时,让cover-container组件回到初始位置,并动态添加行内样式transition实现过渡效果,出现问题!!!
	问题:虽然松开返回时有过渡效果,但是之后过渡效果一直存在
	解决:在touchstart事件触发的时候,将transition关闭

## 登录
1. 收集数据
  1)区分input的change和input事件,绑定事件实现对用户输入的数据进行实时收集,出现问题!!!
	问题:如何得到用户输入的数据
	解决:event.detail.value
  2)理解target和currentTarget的区别,target是代表触发事件的对象,currentTarget代表绑定事件的事件源
	什么是事件委托
	事件委托的原理
	事件委托有什么好处
	事件委托中触发事件的是谁
	如何事件委托中触发事件的对象
  3)了解并使用自定义属性(dataset)
  4)优化代码!!!
	问题:只声明一个回调函数,实现对两个input组件分别收集数据,
	       但是无法区分触发当前函数的是username还是password的input组件
	解决:通过currentTarget可以获取到事件源标签上的标签属性(包括dataset自定义属性),给组件标签设置特定的自定义属性,用于区分
  5)进行前端表单验证,如果不符合要求,弹出提示窗口提示用户

2. 收集数据
  1)测试接口是否有效,状态码:
	400	代表手机号错误
	502	代表密码错误
	200	代表登录成功
  2)使用封装好的请求函数request请求接口,并传入所需要的数据phone和password
  3)请求之后,根据结果显示不同情况的提示窗口
  4)页面跳转回个人中心页面,出现问题!!!
	问题:无论使用wx.navigateTo或者wx.redirectTo都无法成功跳转到个人中心页面
	原因:wx.navigateTo或者wx.redirectTo都不支持跳转注册为tabbar的页面
	解决:使用专门跳转tabbar页面的API,wx.switchTab进行页面跳转
  5)根据业务逻辑进行修改,当用户已经登录,应该无法再次通过点击头像进入登录页面

3. 本地存储
  1)使用本地存储,将用户数据存储到Storage中
  2)个人中心页面加载时,自动去读取Storage中的用户信息
  3)将读取到的用户信息存储到personal页面状态中,出现问题!!!
	问题:从登录页面跳转回当前页面,用户信息没有更新到personal页面状态中
	原因:之前跳转登录页面,使用的是wx.navigateTo方法,导致personal页面被保留,并未销毁,所以不会再次触发onLoad
	解决1:使用wx.redirectTo方法跳转登录页面,让个人中心页面能够加载多次
	解决2:将读取Storage的代码放在onShow中,每次显示个人中心页面都会去读取
  4)通过状态中的用户数据,动态显示用户头像以及用户昵称