ES6结构表达式获取数据

  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

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

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

或者直接用 &&

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

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

动态 css

有时候我们需要通过 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 和 globalData

一、缓存(StorageSync)本地存储

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

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

二、全局变量(globalData)

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

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

页面通信 PubSub

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

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

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

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

日期处理类库

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

获取 WXML 节点对象

 // 获取 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 应该定义在初始值中,而不是函数内。



腾讯云社区邀请各位技术博主加入,福利多多噢!
Last modification:March 11th, 2021 at 11:14 am
如果觉得我的文章对你有用,请随意赞赏