https://github.com/hemengke1997/miniprogram-netcloudmusic
https://github.com/hemengke1997/miniprogram-netcloudmusic
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/hemengke1997/miniprogram-netcloudmusic
- Owner: hemengke1997
- Created: 2020-02-15T13:25:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-02-29T10:00:22.000Z (over 5 years ago)
- Last Synced: 2025-03-24T05:45:42.864Z (3 months ago)
- Language: JavaScript
- Size: 2.09 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 2020.1.6 开始
## 仿网易云小程序
##### （项目写完了，补充一下）
- 网上有很多仿网易云的，我去了解了一下，好像是有网课是从零开始教学仿网易云。不过这个课程要钱，所以我没看，我也不想看，因为项目是安卓的，而且ui很难看。我是完全按照目前的ios端的网易云小程序的ui写的这个项目，除了数据接口是用的一个大神的以外，其他的都是自己写的。
### 起步
- 下载微信开发者工具
- 在微信开发者网站注册个人开发
- 从头到尾熟悉一遍微信开发指南文档和微信官方文档
### 想法
- 之前用vue实现了一次网易云的移动端，从这个项目中踩了坑也学到了一些移动端的开发技巧，所以再来实现一次小程序，熟悉小程序开发
- 熟悉了一遍微信开发指南，发现微信小程序的框架实际上也是一个mvvm框架，入门比较简单
- 由于是入门小程序，所以使用原生框架
---
#### 由于疫情特殊情况，一个多月没更新这个，才回到工作地，继续做
---
### 踩坑记录
1. 如何使用ts编写微信小程序？
答： 网上有相关的答案，但是有人说坑很多，建议用js编写微信小程序
2. wx.navigateTo不起作用
答： 需要在app.json中添加跳转路径
3. 如何设置小程序分享
4. 复用wxss公共样式
```css
@import 'css/color/wxss'
```
如果在app.wxss文件中引入样式文件则在所有page页面可用，但component组件里不可用，需要单独在组件中引入。
5. image大小自适应
答：mode有很多种选项，其中widthFix可以在宽度一定时自适应高度
6. 如何动态添加类？
```html
{{ index + 1 }}
```
7. 真机调试本地接口？
把本地接口的 'localhost'改成电脑对应的ip地址，如http://192.168.0.104:3000/
8. hidden不能跟block一起用，为什么？
9. 事件中怎么样带参数？
自定义属性： data-*
10. wxml中动态添加背景图
答： style="background-image: url('{{ playlist.coverImgUrl }}')"。 跟vue有区别，vue的写法：backgroundImage
11. 改变导航栏的样式
答： 在页面json文件中添加"navigationStyle": "custom"， 自定义导航栏样式，这样的话左上角的返回按键等也需要自己写
12. 自定义导航栏样式时，我设置了全屏的背景图，这个背景图覆盖了所有其他内容，设置层级也没用
解决方案： 不用全屏的背景图，把背景这部分的view单独提出来。用内容来撑开背景
13. 导航栏高度怎么计算？
答： 导航栏分为状态栏和标题栏，状态栏高度可以通过系统信息中的statusBarHeight获取， 标题栏的高度为胶囊高度 + 2倍胶囊到状态栏的间距，胶囊到顶部的距离可以通过wx.getMenuButtonBoundingClientRect 获取，（注意兼容性）， 由此可以计算出来
计算公式： 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度
ps: 自定义导航栏这里的坑太多了，左上角的胶囊也需要自己写，调试的时候看到的样式跟真机预览看到的样式有一些像素差，不知道怎么回事。
14. 微信小程序中文字垂直居中的方法：
1. ```html
这是个例子
```
```css
.container{
border: 2rpx black solid;
width: 400rpx;
height: 200rpx;
text-align: center;
line-height: 200rpx;
}
```
2. ```html
这是个例子
```
```css
.container{
border: 2rpx black solid;
width: 400rpx;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
```
我的错误写法：
```html
{{ title }}
// text标签直接使用flex布局不会生效
```
```css
.nav_title {
display: flex;
align-items: center;
justify-content: center;
}
```
15. 右上角胶囊的默认样式？
这个暂时没有找到。。而且好像在不同的机型上面 胶囊的默认样式也不同。。
16. 在wxml中添加空格？
html中添加空格是用编码实现的， ` `，微信小程序中也可以这样，但是要在text标签中添加decode="true"。还有个方式是添加space="**"，有三个合法值： ensp, emsp,nbsp
17. 父组件的异步数据传给子组件，子组件在ready生命周期才能拿到这个数据？
不一定。可以使用observers监听
18. 把一个大数字转换为万、亿和万亿为单位的数字
```javascript
// 收听量数字转换
transCount(count) {
let param = {}
let k = 10000
let size = ['', '万', '亿', '万亿']
if (count < k) {
param.count = count
param.unit = ''
} else {
let i = Math.floor(Math.log(count) / Math.log(k))
param.count = (count / Math.pow(k, i)).toFixed(1)
param.unit = size[i]
}
return param
}
```
19. 微信小程序转发页面功能
使用button按钮，open-type = 'share'
20. #### 2月16号 终于把导航栏做好了 而且跟网易云官方的效果一样 最难的地方是
往下滑的时候，顶部的背景图还是固定在那个位置。这里又有坑，微信小程序不兼容clip-path,只能用clip。
实现这种效果的方案：
- 在导航栏组件中添加一个全屏背景图，在歌单页面也加同样的全屏背景图。由于背景图绝对定位，所以涉及到了层级关系。想让界面上滑的时候也显示导航栏背景，就需要把导航栏背景的层级设为最高，此时就需要裁剪背景，如果不裁剪，导航栏的全屏背景会覆盖整个界面。
- 网易云的小程序中背景图是有filter的，我这种方案无法实现filter，因为有两个全屏背景，如果歌单的背景图设置了filter，那么导航栏的背景图也要设置filter，此时界面往下的时候会产生模糊
这个效果卡了我四五个小时。。我也是醉了
21. 小程序page函数中自带了一些滚动触发、上拉触底事件，很方便实现懒加载
##### 题外话
- 现在是2月17号的凌晨三点半，又写到了这个时候了。。今天白天我做了一个理智却又冲动的决定，我裸辞了。唉... 以后还有那么久的工作时间，我觉得找份自己喜欢的工作 喜欢的公司 活得更快乐
##### 开始写放歌的界面，在写之前思考了整体思路，之前是边想边写，所以wx.request请求是每次都写了的。太麻烦了，这次打算把请求的api抽离出来成一个接口，只需要传入相应的url和回调函数就可以了
22. 背景图不能设置本地图片，需要把本地图片路径转为base64位才能作为background-image
方案：
```javascript
wx.getFileSystemManager().readFile({
filePath: '/assets/imgs/bsb.jpg',
encoding: 'base64',
success: res => {
console.log(res)
},
fail: res => {
console.log(res, 'fail')
}
})
// 注意使用绝对路径
```
23. 想到了更好的方案处理沉浸模式，就是第20项说的那个问题，可以让内容绝对定位，给内容一个top，不需要设置两个背景啦，要注意page: overflow: hidden ，然后给需要滚动的内容加overflow-y: auto; 这个方案是我目前能想出最完美的方案了，开心！！
效果图
#### 项目截图
#### 结语
- 完结撒花了 T>T 。大概跟现在的ios微信小程序的用户体验一样
- 第一次写一个完整的微信小程序，思路不清晰，最开始有很多网络请求，样式，都没有封装，组件模板用得也不多
- 体会最深的是封装导航栏， 整体的沉浸模式，解决方案再说一次，内容绝对定位，距离顶部一定的高度，overflow-y:auto，page overflow:hidden
#### 2/29补充
现在在自学react，其文档中有介绍列表渲染，解释了为什么要在列表渲染中添加key，并且强调这个**key**最好不是索引index。我突然想到，我以前写代码列表渲染几乎都是用的索引来当做key
> 如果列表项目的顺序可能会变化，我们不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。
react文档中是这样说的。mvvm框架的原理应该都差不多，我去查阅了微信小程序官方文档，是这样解释wx:key的
> ### wx:key
>
> 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 [input](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) 中的输入内容，[switch](https://developers.weixin.qq.com/miniprogram/dev/component/switch.html) 的选中状态），需要使用 `wx:key` 来指定列表中项目的唯一的标识符。
>
> `wx:key` 的值以两种形式提供
>
> 1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
> 2. 保留关键字 `*this` 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
>
> 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
>
> **如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。**
虽然没有显式说不能使用索引来当做key，但是也没有提供这种方式，所以还是应该用当前item中的某个唯一属性来作为key。
我又查询了vue的官方文档：
>`key` 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
>
>有相同父元素的子元素必须有**独特的 key**。重复的 key 会造成渲染错误。
其文档也没有显式说明不能使用索引作为key，但是也没推荐使用索引作为key，综上所述，根据react的说明，列表渲染的key不应该使用索引，这对性能有消耗。
深入了解了key的作用，它是为了提升DOM的diff算法的效率。这个算法比较复杂，简单来说就是当一个节点被插入时，如果没有绑定key，就会一个一个去遍历，然后再插入，这个就像队列这种数据结构了，但是加了key属性，就好像链表这种数据结构，插入删除效率很高。这是我暂时的理解，我对diff算法一直处于懵逼状态