小程序蓝牙传输音乐播放器的处理

以下为自己在小程序里踩到的坑， 记录一下：

在做小程序的时候，要做一个和设备通讯的蓝牙协议，设备发送给你一些16进制一些字符的串，你要对它进行解析处理

在设备给我发送（播放音乐数据）的时候，我要根据这个数据进行处理
以下为解析拿到数据的代码：

bluetooth.js

 musicDevice (cmd) {
    let data = APP.GLOBAL_DATAS.BLE['data-' + cmd]
    APP.GLOBAL_DATAS.BLE['data-' + cmd] = ""
    APP.STATE.r_play_type = parseInt(data.slice(0, 2), 16)
    let musicInfo = {
      playing: parseInt(data.slice(2, 4), 16) === 1 ? 'paused' : 'playing', // 0 播放状态 / 1 暂停状态 
      id: parseInt(data.slice(4, 8), 16), // 当前播放id
      currentTime: parseInt(data.slice(8, 12), 16), // 当前播放时间
      total: parseInt(data.slice(12, 16), 16),  // 总时间
      downloadId: parseInt(data.slice(18, 22), 16),// 当前下载id
      downloadSpeed: parseInt(data.slice(22, 24), 16),// 当前下载进度
    }
    let dd = Util.judgmentStorage(musicInfo.id)
  总时间：  musicInfo.formatTotal = Util.formatSeconds(musicInfo.total) //**这个是用来处理，设备发给你的时间为4531，但是你显示在页面要通过时分秒的格式**
    当前正在播放的时间：musicInfo.formatCurrentTime = Util.formatSeconds(musicInfo.currentTime)
    musicInfo.name = dd ? dd.lessonname : ''
    Object.assign(APP.PLAY, musicInfo) //**把musicInfo的信息给到app.js里面的全局变量PLAY**
  }

进行解析完数据并存储之后，我们在app.js里面声明一个全局变量，把获取到的播放信息给存储起来，哪个地方调用了就用这个全局的变量

  PLAY: {
    currentTime: 0,
    playing: 'paused',
    total: 100,
    name: '',
    id: null,
    loop: 0,
    formatTotal: '',
    formatCurrentTime: '',
  },

在你的播放页面进行应用 index.wxml

    <view class="progress">
        //为进度条的代码
        <view class="bar">
            <slider activeColor="#865938" backgroundColor="#f7c04c" bindchange="playchange" blockColor="#865938" blockSize="12" max="{{play.total}}" min="0" value="{{play.currentTime}}"></slider>
        </view>
         //为暂停/播放  下一曲的代码
            <view>
                <image catchtap="play" class="mbtn" src="/images/play_1.png" wx:if="{{play.playing==='paused'}}"></image>
                <image catchtap="play" class="mbtn" src="/images/pause_1.png" wx:else></image>
                <image catchtap="play_next" class="mbtn" src="/images/next_1.png" style="margin:0 16rpx"></image>
                <image catchtap="playlist" class="mbtn" src="/images/playlist_1.png"></image>
            </view>
        </view>
    </view>

在index.js里面要应用一下
1:先引用App调用这个全局变量 var t = getApp()
2:在data里面声明一个变量进行接收 play:null （用这个play进行在wxml里面编写）
3:在onload加载的时候，去监听全局变量t.PLAY的值，然后赋值给本页面play，

    new Observer(t.PLAY, () => {
      this.setData({ play: t.PLAY })
    })

这里的new Observer是在小程序里面模拟的一个vue类似watch的监听，等下一个文章附上源码
这样监听的好处是，每次页面加载都可以拿到最新的数据
点击暂停播放的逻辑

  play: Util.throttle(function (e) {
    t.PLAY.playing = t.PLAY.playing === 'playing' ? 'paused' : 'playing'
    Send.send('all', [1, t.PLAY.playing === 'playing' ? 1 : 2 ]) **发送给设备的**
  }, 1000),

还有一个大的播放页

music.wxml 进度条和下面暂停播放，上一曲下一曲这一块

    <view class="bar">
        <slider activeColor="#FF9933" backgroundColor="#fff" bindchange="playchange" blockColor="#FF9933" blockSize="12" max="{{play.total}}" min="0" value="{{play.currentTime}}"></slider>
        <view class="pl_time">
            <view>{{play.formatCurrentTime}}</view>**显示的为时分秒我们处理过的时间**
            <view>{{play.formatTotal}}</view>
        </view>
    </view>
    <view class="play">
        <image catchtap="setLoop" class="mbtn" id="{{0}}" src="/images/single.png" wx:if="{{play.loop==0}}"></image>
        <image catchtap="setLoop" class="mbtn" id="{{1}}" src="/images/loop.png" wx:else></image>
        <image catchtap="play_prev" id="1" src="/images/last.png"></image>
        <view class="play_state" wx:if="{{play.playing=='paused'}}">
            <image catchtap="play" src="/images/play_2.png"></image>
        </view>
        <view class="play_state" wx:else>
            <image catchtap="play" src="/images/pause_2.png"></image>
        </view>
        <image catchtap="play_next" id="0" src="/images/next_2.png"></image>
        <image catchtap="playlist" class="mbtn" src="/images/playlist_2.png"></image>
    </view>

**music.js **
1:引用APP获取全局的变量PLAY var APP = getApp()
2：在data里面声明一个变量 play: null, 供页面使用
3：在onload里面监听最新的全局变量PLAY 赋值给play

  onLoad: function (options) {
    new Observer(APP.PLAY, () => {
      this.setData({
        play: APP.PLAY
      })
    })
  },

**暂停播放的**
  play: Util.throttle(function (e) {
    APP.PLAY.playing = APP.PLAY.playing === 'playing' ? 'paused' : 'playing'
    Send.send('all', [1, APP.PLAY.playing === 'playing' ? 1 : 2 ])
  }, 1000),

**点击单曲循环的**
  setLoop: Util.throttle (function (e) {
    console.log(e);
    //如果为0是单曲  1是全部
    let loop = e.currentTarget.id == 0 ? 1 : 0
    APP.PLAY.loop = loop
    Send.send('all', [2, loop])
  }, 500),

处理时间的方法 把4531这种数据处理成01:15:52秒数

  formatSeconds(time) {
    time = parseInt(time)
    let min = Math.floor(time % 3600);
    let s = Math.floor(time / 3600);
    let f = Math.floor(min / 60);
    let m = time % 60;
    if (s > 0) {
      s = s > 9 ? s : "0" + s;
      s += ":";
    } else {
      s = "";
    }
    if (f > 0) {
      f = f > 9 ? f : "0" + f;
      f += ":";
    } else {
      f = "00:";
    }
    if (m > 0) {
      m = m > 9 ? m : "0" + m;
    } else {
      m = "00";
    }
    return s + f + m;
  }