小湖音乐开发笔记

Author：钟小湖
发布时间：March 10, 2021
493views
No comments
4331 words
Categories：编程杂记

ES6结构表达式获取数据
</div>

```
  let {musicId, ids} = this.data
```

这样写可以直接从 `data` 中获取同名的 `musicId` `ids`

高度计算
</div>

常用于 `scroll-view` 计算高度，使用 `calc(100vh - 已有的高度)`

*可滚动视图区域。使用竖向滚动时，需要给 `scroll-view` 一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，支持传入单位(rpx/px)。*

视口单位：vh vw

1vh = 1%的视口高度

1vw = 1%的视口宽度

`height: calc(100vh - 152rpx);`

通过监听两个 `input` 框的变化，实时保存到 data 中，登录成功后将用户信息和 `cookies` 保存在`storage` 中，使用 `wx.setStorageSync`，一旦有 `cookies` 后，带在请求中，统一写在 `request` 封装体。

数组切割
</div>

`array.slice(begin, end)`

动态 class
</div>

在某条件满足时，加入 `class`，`isPlay` 是布尔类型，此处为三元表达式。同时前面的 `class` 不会受到任何影响。

`class= "needle {{isPlay ? 'needleRotate' : ''}}"`

或者直接用 `&&`

`class= "needle {{isPlay && 'needleRotate'}}"`

注意：在 `{{}}` 里面的词都为变量，所以非变量要用**引号**区分。

动态 css
</div>

有时候我们需要通过 `js` 操作 `css`，这种情况我们可以通过内联 `style` 来解决。

`style="width: {{currentWidth}}"`

旋转
</div>

![](https://cdn.jsdelivr.net/gh/lexinhu/Image/img/2021/20210201033027.gif)

```css
 /* 摇杆抬上，默认情况 */
 .needle {
   /* 场景需求，调整旋转中心点 */
   transform-origin: 20rpx 0;
   /* 旋转角度 -20 */
   transform: rotate(-20deg);
   /* 旋转时间 1秒 */
   transition: transform 1s; 
 }
 /* 摇杆抬下，音乐播放时 */
 .needleRotate {
    /* 不旋转，故角度设置为0 */
   transform: rotate(0deg);
 }
```

针对杆子是抬上还是抬下，我通过一个 js 变量来判断，因此用到了上面的动态class。

`<image class="needle {{isPlay && 'needleRotate'}}" src=" "></image>`

动画
</div>

![](https://cdn.jsdelivr.net/gh/lexinhu/Image/img/2021/20210201035319.gif)

```css
 /* 磁盘转圈动画，音乐播放时 */
 .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);
   }
 }
```

获取时间戳
</div>

`Date.parse(new Date());`

绑定事件传参
</div>

使用 `data-xxx="{{变量}}"`

```html
 <view class="scrollItem" wx:for="{{recommendList}}" wx:key="id" data-song="{{item}}" bindtap="toSongDetail">
   <image src="{{item.album.picUrl}}"></image>
   <view class="musicInfo">
     <text class="musicName">{{item.name}}</text>
     <text class="author">{{item.artists[0].name}} - {{item.album.name}}</text>
   </view>
 </view>
```

在 `toSongDetail` 函数中，就可以通过 `let song = event.currentTarget.dataset.song` 来获取。

注意：一定要是 `currentTarget`

```
 // 跳转到音乐播放详细页
 toSongDetail(event) {
   let song = event.currentTarget.dataset.song
   wx.navigateTo({
     url: '/pages/songDetail/songDetail?song=' + JSON.stringify(song),
   })
 },
```

全局变量
</div>

`app.js` 文件中设置，`globalData` 对象就是存储全局变量的。

```
 App({
   globalData: {
     isMusicPlay: false, // 是否有音乐在播放
     musicId: '' // 播放的音乐Id
   },
 })
```

使用方法

```
 const appInstance = getApp()
 appInstance.globalData.musicId
```

StorageSync 和 globalData
</div>

**一、缓存（StorageSync）本地存储**

1、小程序中的本地存储有同步功能，可用于保存用户信息(用户登录后的一些基本信息)

2、缓存的更新需要使用 `setStorageSync` 方法。

**二、全局变量（globalData）**

1、保存一些可能涉及安全类的数据，例如资源类，每次需要很准确的，就建议用全局变量。

2、全局变量每次关闭小程序重新打开的时候，都会进行初始化更新。

页面通信 PubSub
</div>

PubSub：实现页面和页面之间的通信。

接收方：`PubSub.subscribe(事件名, 事件回调)`

发送方：`PubSub.publish(事件名, 提供的数据)`

当然你可以在 `subscribe()` 事件回调中停止接收 `PubSub.unsubscribe(事件名)`，这样你就只接收一次该事件的触发。

日期处理类库
</div>

Moment.js：[http://momentjs.cn/](http://momentjs.cn/)

获取 WXML 节点对象
</div>

```
 // 获取 barControl 对象
 const query = wx.createSelectorQuery()
 query.select('.barControl').boundingClientRect()
 query.exec((res) => {
   console.log(res);
   this.setData({
     durationWidth: res[0].width
   })
 })
```

**注意，获取到的高度宽度都是 `px` 值**

函数节流
</div>

对前端一些频发的请求进行延迟操作。可以使用定时器来实现，常用于搜索功能。

```
 // 函数节流
 if (timeOut) {
   console.log('触发节流，不执行回调');
   return;
 }
 // 为true后，下次就不执行了，直接return，除非3秒后进入了定时器
 timeOut = true;
 // 要执行的函数
 this.getSearchList();
 // 3秒执行一次，把timeOut赋为false
 setTimeout(() => {
   timeOut = false
 }, 3000)
```

`timeOut=false` 应该定义在初始值中，而不是函数内。
<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：乐心湖's Blog</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://xn2001.com/archives/645.html">https://xn2001.com/archives/645.html</a></p><p class="content-copyright">声明：博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener" one-link-mark="yes">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p></blockquote>

腾讯云社区邀请各位技术博主加入，福利多多噢！

Last modification：March 11th, 2021 at 11:14 am

如果觉得我的文章对你有用，请随意赞赏