let {musicId, ids} = this.data

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

常用于 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 封装体。

array.slice(begin, end)

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

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

或者直接用 &&

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

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

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

style="width: {{currentWidth}}"

 /* 摇杆抬上，默认情况 */
 .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>

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

Date.parse(new Date());

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

 <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),
   })
 },

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

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

使用方法

 const appInstance = getApp()
 appInstance.globalData.musicId

一、缓存（StorageSync）本地存储

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

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

二、全局变量（globalData）

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

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

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

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

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

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

Moment.js：http://momentjs.cn/

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

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

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

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

timeOut=false 应该定义在初始值中，而不是函数内。