Loading... <div class="tip inlineBlock success"> ES6结构表达式获取数据 </div> ``` let {musicId, ids} = this.data ``` 这样写可以直接从 `data` 中获取同名的 `musicId` `ids` <div class="tip inlineBlock success"> 高度计算 </div> 常用于 `scroll-view` 计算高度,使用 `calc(100vh - 已有的高度)` *可滚动视图区域。使用竖向滚动时,需要给 `scroll-view` 一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,支持传入单位(rpx/px)。* 视口单位:vh vw 1vh = 1%的视口高度 1vw = 1%的视口宽度 `height: calc(100vh - 152rpx);` <div class="tip inlineBlock success"> 登录 </div> 通过监听两个 `input` 框的变化,实时保存到 data 中,登录成功后将用户信息和 `cookies` 保存在`storage` 中,使用 `wx.setStorageSync`,一旦有 `cookies` 后,带在请求中,统一写在 `request` 封装体。 <div class="tip inlineBlock success"> 数组切割 </div> `array.slice(begin, end)` <div class="tip inlineBlock success"> 动态 class </div> 在某条件满足时,加入 `class`,`isPlay` 是布尔类型,此处为三元表达式。同时前面的 `class` 不会受到任何影响。 `class= "needle {{isPlay ? 'needleRotate' : ''}}"` 或者直接用 `&&` `class= "needle {{isPlay && 'needleRotate'}}"` 注意:在 `{{}}` 里面的词都为变量,所以非变量要用**引号**区分。 <div class="tip inlineBlock success"> 动态 css </div> 有时候我们需要通过 `js` 操作 `css`,这种情况我们可以通过内联 `style` 来解决。 `style="width: {{currentWidth}}"` <div class="tip inlineBlock success"> 旋转 </div>  ```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 class="tip inlineBlock success"> 动画 </div>  ```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 class="tip inlineBlock success"> 获取时间戳 </div> `Date.parse(new Date());` <div class="tip inlineBlock success"> 绑定事件传参 </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 class="tip inlineBlock success"> 全局变量 </div> `app.js` 文件中设置,`globalData` 对象就是存储全局变量的。 ``` App({ globalData: { isMusicPlay: false, // 是否有音乐在播放 musicId: '' // 播放的音乐Id }, }) ``` 使用方法 ``` const appInstance = getApp() appInstance.globalData.musicId ``` <div class="tip inlineBlock success"> StorageSync 和 globalData </div> **一、缓存(StorageSync)本地存储** 1、小程序中的本地存储有同步功能,可用于保存用户信息(用户登录后的一些基本信息) 2、缓存的更新需要使用 `setStorageSync` 方法。 **二、全局变量(globalData)** 1、保存一些可能涉及安全类的数据,例如资源类,每次需要很准确的,就建议用全局变量。 2、全局变量每次关闭小程序重新打开的时候,都会进行初始化更新。 <div class="tip inlineBlock success"> 页面通信 PubSub </div> PubSub:实现页面和页面之间的通信。 接收方:`PubSub.subscribe(事件名, 事件回调)` 发送方:`PubSub.publish(事件名, 提供的数据)` 当然你可以在 `subscribe()` 事件回调中停止接收 `PubSub.unsubscribe(事件名)`,这样你就只接收一次该事件的触发。 <div class="tip inlineBlock success"> 日期处理类库 </div> Moment.js:[http://momentjs.cn/](http://momentjs.cn/) <div class="tip inlineBlock success"> 获取 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 class="tip inlineBlock success"> 函数节流 </div> 对前端一些频发的请求进行延迟操作。可以使用定时器来实现,常用于搜索功能。 ``` // 函数节流 if (timeOut) { console.log('触发节流,不执行回调'); return; } // 为true后,下次就不执行了,直接return,除非3秒后进入了定时器 timeOut = true; // 要执行的函数 this.getSearchList(); // 3秒执行一次,把timeOut赋为false setTimeout(() => { timeOut = false }, 3000) ``` `timeOut=false` 应该定义在初始值中,而不是函数内。 Last modification:March 11, 2021 © Allow specification reprint Support Appreciate the author AliPayWeChat Like 1 如果觉得我的文章对你有用,请随意赞赏
One comment