摘要：前天，我们初步开发了一款可控制播放进度的音乐播放器。但在真机上运行时会略显卡顿，为了解决性能问题，今天我们使用WXS来改进代码。主要思路是：WXS负责处理交互逻辑并格式转换，组件用来与页面实现数据双向通信......

书接上回，在前天的文章中，我们初步开发了一款自定义音乐播放器，但存在性能问题，详情阅读原文《微信小程序从入坑到放弃二十七：可控制播放进度的音乐播放器(初级版)》。今天，我们就来优化下代码，以提高性能。

一、卡顿原因分析

1.1、格式转换

pxpx

1.2、diyAudioPlayer.js中包含了大量的交互

diyAudioPlayer.js

二、解决方案：WXS辅助

WXSWXS

2.1、了解WXS

WXSWXSComponentDescriptorclassstyleclass

WXS

2.2、逐步分析，取舍有度

currentTimedurationValueprogressWidthValuexcurrentTime

currentTimeevent.changedTouches[0].startXtouchMoveins.callMethod('touchMove', { currentTime: currentTime })currentTime

    
/* 监听拖拽 */
    
function touchMove(event, ins) {
    
  var touch = event.touches[0] || event.changedTouches[0]
    
  var pageX = touch.pageX
    
  left = pageX - startX + lastLeft
    
  /* 滑块运动的最小范围 */
    
  if (left >= 0) {
    
    left = 0
    
  }
    
  /* 滑块运动的最大范围 */
    
  if (left < progressWidthValue) {
    
    left = progressWidthValue
    
  }
    
  startX = pageX
    
  lastLeft = left
    
  currentTime = getcurrentTime() /* 计算出音频的播放位置（虽然此处能计算出，但不能直接跟页面通信，所以必须要靠下一行实现响应数据） */
    
  ins.callMethod('touchMove', { currentTime: currentTime }) /* 向组件通信 */
    
}
    

    
/* 组件中监听拖拽 */
    
touchMove(data) {
    
  if (data && !data.target && data.currentTime !== undefined) {
    
    this.setData({
    
      currentTime: data.currentTime /* 接收wxs中计算出的值并利用setData实现数据响应 */
    
    })
    
  }
    
}
    

wxml

    

    

    

    

    
  
    
    
    
    
    
    
    
    
    
      
    
        
    
           {{wxs.formatTime(currentTime)}}/{{wxs.formatTime(durationValue)}}
    
            
    
            {{wxs.formatTime(currentTime)}}/{{wxs.formatTime(durationValue)}}
    
            
    
          
    
        
    
        
    
        
    
        
    
      
    
    
    
  
    

    

2.3、源码讲解

注意上面代码中黄色高亮的部分，是本次修改的。

2.2progresscurrentTimetotaldurationValuexwxs.changeX(currentTime,durationValue,progressWidthValue)12touchMove、touchEndwxs.touchMoveWXS

12

    
change:progresswidth="{{wxs.propProgressWidth}}" progresswidth="{{progressWidthValue}}"
    

progresswidth="{{progressWidthValue}}"index.jsprogressWidthValueprogressWidthchange:progresswidthprogressWidthprogressWidthValue{{wxs.propProgressWidth}}

2.4、总结

setDataWXS

三、demo源码

github

四、如何在项目中使用封装好的组件？

若看官想把此款音乐播放器使用到实际项目中，可以先通过上面的链接从github仓库上拉取代码到本地，然后在需要使用的页面中引用组件即可。啥也不说了，还是直接上代码给看官演示一下吧，此处以在小程序首页中调用为例。

4.1、修改index.json配置

    
{
    
"usingComponents": {
    
  "wxs-diyAudioPlayer": "/components/wxs-diyAudioPlayer/index"
    
},
    
"navigationBarTitleText": "开发一款DIY音乐播放器(WXS优化版)"
    
}
    

index.jsonindex.wxml

4.2、在index.wxml页面中调用

index.js

4.3、在index.js中添加音频地址

    
var app = getApp();
    
Page({
    
  data: {
    
    audioSrc: 'https://card-cdn-test.5ifengdu.com/ali/audio/202002/11/1581416977486_8929949054.mp3' /* 网络音频地址 */
    
  },
    
  /* 以下是原项目代码 */
    
  ......
    
});
    

现在，保存代码即可在微信小程序首页中看到音乐播放器了。最终效果如下：开发一款DIY音乐播放器(WXS优化版)最终效果.mp4（友情提醒：点击上方图片即可播放视频）

五、最后

源码及如何在项目中使用这款音乐播放器的步骤已经很详细了，由于文章篇幅有限，所以文章中的js代码就没有完全展示。源码中会有完整代码及必要注释，若看官在拉完代码后有疑问，可与艺灵联系，方式见下方二维码或右侧。

/xwzj/2020-05-12/weixin-wxs-diyAudioPlayer.html