微信小程序开发实战-第六周

最新推荐文章于 2023-09-21 21:08:29 发布

BY彡阿长

最新推荐文章于 2023-09-21 21:08:29 发布

阅读量371

点赞数 1

分类专栏：微信小程序日志学习笔记文章标签：小程序 javascript css3

本文链接：https://blog.csdn.net/s1259364843/article/details/105727144

版权

学习笔记同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

微信小程序

6 篇文章 0 订阅

订阅专栏

日志

3 篇文章 0 订阅

订阅专栏

第六周

加入缓存系统

获取期刊时先到缓存中查找，如果能找到就读取，不能就向服务器发送请求，然后再次写入缓存中

所有期刊在缓存有一个key，确定key，代表一个期刊和表示是哪一期期刊

定义一个私有方法_fullKey来生成key

_fullKey(partKey) {
        // 自定义key规则
        let key = this.prefix + '-' + partKey
        // 返回key
        return key
    }

然后改写 _getClassic方法

_getClassic(index, next_or_previous, sCallback) {
        // 判断index是+1还是-1
        let key = next_or_previous == 'next' ? this._fullKey(index + 1) : this._fullKey(index - 1)
        // 缓存中获取
        let classic = wx.getStorageSync(key)
        // 如果缓存中找不到数据
        if (!classic) {
            let params = {
                url: 'classic/' + index + '/' + next_or_previous,
                success: (data) => {
                    // 请求成功写入缓存,确定key,传入index
                    let key = this._fullKey(data.index)
                    wx.setStorageSync(key, data)
                    sCallback(data)
                }
            }
            // 发送请求
            this.request(params)
        }
        // 缓存中找到数据,直接返回数据
        else {
            sCallback(classic)
        }
    }

ES6模板字符串

反引号

用法

let a = 123
console.log(`${a}456`)

test:function(){
    return 123
}
console.log(`${this.test()}456`)

ES6扩展运算符

…

classicModel.getLatest((res)=>{
      // 将返回数据赋值给classic
      this.setData({
        ...res
      })
      console.log(this.data)
    })

独立更新like组件状态

在pages\classic\classic.js中data下新增以下数据，用以更新like组件信息，将classic.wxml中的数据绑定替换为以下数据

likeCount:0,
likeStatus:false

定义_getLikeStatus方法来获取当前独立like状态

_getLikeStatus:function(artID, category){
    likeModel.getClassicLikeStatus(artID, category, (res)=>{
      this.setData({
        likeStatus:res.like_status,
        likeCount:res.fav_nums
      })
    })
  }

在_updataClassic的this.setData之前调用_getLikeStatus方法

this._getLikeStatus(res.id, res.type)

然后在onLoad生命周期函数的setData中添加

likeStatus:res.like_status,
likeCount:res.fav_nums

用对应的组件来显示相应期刊

使用条件渲染

频繁切换使用hidden

让自定义组件支持hidden属性

在自定义组件的properties中新增hidden:Boolean属性

然后绑定到组件的view容器中,hidden="{{hidden}}"

在classic-beh.js中新增

hidden:Boolean

这样就不用单独在其他组件中单独定义

然后在music,essay,music组件中绑定hidden

这样就实现了不同类型的期刊使用不同的组件来进行渲染

@import在组件间复用样式

复用wxss代码

新建common.wxss文件

.classic-img {
    width: 750rpx;
    height: 500rpx;

    /* margin-bottom:120rpx; */
}

.tag {
    width: 46rpx;
    height: 142rpx;
    position: relative;
    bottom: 58rpx;
    right: 310rpx;
}

.content {
    display: block;
    /* width:275px; */
    /* margin:0 auto; */
    max-width: 550rpx;
    font-size: 36rpx;
}

.classic-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

清除essay和movie组件wxss文件中的内容

分别导入common.wxss

@import "../common.wxss";

完善`music`组件

music组件样式

在music组件下的properties下新增

src:String

用以设置音乐播放地址

music组件的骨架

<view hidden="{{hidden}}" class="classic-container">
  <image src="{{img}}" class="classic-img {{playing?'rotation':''}}" />
  <image class="player-img" bind:tap = "onPlay"
  src="{{playing?playingUrl:pauseUrl}}" />
  <image class='tag' src="images/music@tag.png" /> 
  <!-- 音乐播放下方文本 -->
  <text class="content">{{content}}</text>
</view>

样式

/* music组件样式 */
.classic-img {
  width: 422rpx;
  height: 422rpx;
  margin-top: 60rpx;
  /* margin-bottom: 120rpx; */
  border-radius: 70%;
  /* margin-bottom: -50px; */
  overflow: hidden;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

.tag{
  width:44rpx;
  height:127rpx;
  position: relative;
  bottom: 160rpx;
  right:310rpx; 
}

.rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 12s linear infinite;
  -moz-animation: rotation 12s linear infinite;
  -webkit-animation: rotation 12s linear infinite;
  -o-animation: rotation 12s linear infinite;
}

.player-img {
  width: 120rpx;
  height: 120rpx;
   position: relative; 
   bottom: 271rpx; 
}

.content {
  display: block;
  /* width:275px; *//* margin:0 auto; */
  max-width: 550rpx;
  font-size: 36rpx;
  margin-top: -90rpx;
}

.classic-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

改写music组件的js文件

data: {
    playing: false,
    pauseUrl: 'images/player@pause.png',
    playingUrl: 'images/player@playing.png'
}

实现播放音乐功能

播放音乐API

音频API

背景音频API

wx.getBackgroundAudioManager()

获取全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。

在pages\classic\classic.wxml中音乐组件添加src="{{classic.url}}属性
在music组件的porperties属性中新增title:String用于原生音频播放器音频标题（必填）
在classic.wxml页面music组件上新增title="{{classic.title}}属性
在classic.js的onLoad生命周期函数的setData方法下设置title:res.title,将返回数据中的title赋给页面的title

若需要小程序在退到后台继续播放音频,需要在app.json中配置requiredBackgroundModes属性

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

在app.json中添加

"requiredBackgroundModes": ["audio", "location"]

audio: 后台音乐播放
location: 后台定位

组件间通信

组件间通信与事件

组件间的基本通信方式有以下几种。

WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在组件模板和样式章节中介绍。
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

使用hidden不会触发detached生命周期函数,但wxif会

之前期刊插曲组件`epsoide`拼写错误,全部替换为正确`episode`

因为music组件涉及频繁切换,所以将classic.wxml中music组件的显示与隐藏改为wx:if

<v-music wx:if="{{classic. type==200}}" img="{{classic.image}}" content="{{classic.content}}" src="{{classic.url}}" title="{{classic.title}}"></v-music>

定义私有方法_recoverPlaying

通过判断是否有音乐播放来控制图片显示

通过判断当前播放音乐是否是当前页面对应音乐url来停止播放音乐

_recoverPlaying: function() {
      if (mMgr.paused) {
        this.setData({
          playing: false
        })
        return
      }
      if (mMgr.src == this.properties.src) {
        if (!mMgr.paused) {
          this.setData({
            playing: true
          })
        }
      }
    }

然后在attached生命周期函数中调用此方法

attached: function() {
    this._recoverPlaying()
  }

优化音乐播放

在生命周期函数中尽量不写具体业务逻辑,将其封装起来,在生命周期函数中调用

通过定义私有方法来监听BackgroundAudioManager对象的事件

BackgroundAudioManager.onPlay(function callback)监听背景音频播放事件
BackgroundAudioManager.onPause(function callback)监听背景音频暂停事件
BackgroundAudioManager.onStop(function callback)监听背景音频停止事件
BackgroundAudioManager.onEnded(function callback)监听背景音频自然播放结束事件

    _monitorSwitch: function() {
      //  播放事件
      mMgr.onPlay(() => {
        this._recoverPlaying()
      })
      // 暂停事件
      mMgr.onPause(() => {
        this._recoverPlaying()
      })
      // 停止事件
      mMgr.onStop(() => {
        this._recoverPlaying()
      }),
      // 自然播放停止事件
      mMgr.onEnded(()=>{
        this._recoverPlaying()
      })
    }

然后在attached生命周期函数中调用该方法

`music`组件封面图旋转效果

.rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 12s linear infinite;
  -moz-animation: rotation 12s linear infinite;
  -webkit-animation: rotation 12s linear infinite;
  -o-animation: rotation 12s linear infinite;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

通过数据绑定来实现旋转与否

<image src="{{img}}" class="classic-img {{playing?'rotation':''}}" />

BY彡阿长

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发实战-第六周

第六周加入缓存系统获取期刊时先到缓存中查找，如果能找到就读取，不能就向服务器发送请求，然后再次写入缓存中所有期刊在缓存有一个key，确定key，代表一个期刊和表示是哪一期期刊定义一个私有方法_fullKey来生成key_fullKey(partKey) { // 自定义key规则 let key = this.prefix + '-' + partKe...
复制链接

扫一扫