WeApp嚐鮮，對社區流傳demo的改進

原由

昨天晚上（2016年9月23日晚），微信小程序的開發者工具更新新版本後直接能夠支持無appid的遊客模式登陸，基本和網上流傳的crack版本差很少，同時也有開發者分享了一個功能很全演示demo，我也下載了一份來嚐鮮。

問題

看demo的過程當中，我發現了幾個小問題，這裏單獨拿出來分享一下。

bug：

組件中：

• 內容分區/scroll-view中，click me to top按鈕無效（done）

接口中：

• 錄音功能展現中，沒法中止錄音。（可能問題只存在電腦調試器中）（done）

• 錄音功能展現中，若直接返回上一級頁面，原頁面的定時器未被回收（done）

• 背景音樂功能展現中，首先播放音樂並返回上級，而後再進入播放音樂頁面，音樂播放進度會丟失

不算bug可是美中不足的地方

組件中：

• 內容分區/swipe 中，swipe最後一張圖片後會反方向到第一張圖片（to be improved）

• 內容/Text 中，text默認的line刪不掉，一開始體驗‘remove’方法的話會產生「程序是否是有問題的錯覺」

• 內容/picker 中，時間和日期選擇器無效（開始覺得是bug，後來發現是demo源碼中沒有實現這裏的選擇器）(to be improved)

接口中：

注:這些在接口欄目中，能在PC上測試的全部的接口都是在PC上測試的，因此可能參考意義並非那麼大

修復：

1、內容分區/scroll-view

修改方法：

/page/component/component-pages/wx-scroll-view/wx-scroll-view.js 16L 將"setAction" 改成 "setData"

scrollToTop: function(e) {
    this.setData({
      scrollTop: 0
    })
  }

2、錄音功能

修改方法：

在/page/API/voice/voice.js中，作如下幾點改動

1. 將錄音定時器放在全局。

2. 在stop record中清除定時器

3. onUnload觸發時也要清除定時器並還原初始數據

var util = require('../../../util/util.js')
var playTimeInterval,interval

Page({
  data: {
    ...
  },
  startRecord: function () {
   ...
  },
  stopRecord: function () {
    wx.stopRecord()
    this.setData({recording:false,recordTime:0,formatedRecordTime: '00:00:00'})
    clearInterval(interval)
  },
 ...
  onUnload:function(){
    this.stopRecord()
    console.log("voice page has been unloaded!")
  }
})

3、播放背景音樂進度丟失問題

修改方法：

/page/API/background-audio/background-audio.js 重寫了一些方法

• 該page生命週期中的onLoad過程當中，先經過api獲取是否有背景音樂正在播放，獲取其進度，而後將data裏的數據更新,在onLoad中增長checkPlaying方法

Page({
  onLoad: function () {
    var that = this
    ...
    // 進入的時候應該檢測後臺是否有音樂正在播放
    checkPlaying()
    function checkPlaying() {
      wx.getBackgroundAudioPlayerState({
        success: function (res) {
          console.log("播放器狀態：",res)
          console.log("初始化時的webview",that.data.__webviewId__)
          var _isPlaying,_playTime
          res.status === 1?
            _isPlaying = true:_isPlaying = false
          res.currentPosition/res.duration > 0.95?
            _playTime = 0:_playTime = res.currentPosition
          that.setData({
            playing:_isPlaying,
            playTime: _playTime,
            formatedPlayTime: util.formatTime(_playTime)
          })
          if(_isPlaying) 
            that._enableInterval()
        }
      })
    }
  },
  ...
})

• 增長了resume方法，用於繼續播放（play方法是從頭開始播放）

Pager({
...
  resume:function(){
    var that = this
    if(this.updateInterval != '')
      clearInterval(this.updateInterval)
    wx.playBackgroundAudio({
      dataUrl: dataUrl,
      title: 'Lost Stars',
      coverImgUrl: 'http://y.gtimg.cn/music/photo_new/T002R150x150M000000Jhxf24CFL06.jpg?max_age=2592000',
      complete: function () {
        that.setData({
          playing:true
        })
        wx.seekBackgroundAudio({
          position: that.data.playTime,
          complete:function(){
            console.log("resume ok")
          }
        })
      }
    })
  },
...
})

• 在onLoad中增長了背景音樂的兩個狀態的監聽器，用於同步背景音樂狀態的變化和UI的變化

Page({
  onLoad: function () {
    ...

    // 設置播放中止監聽事件
    wx.onBackgroundAudioStop(function () {
      console.log("音樂中止了，當前webview: ",that.data.__webviewId__)
      that.setData({
        playing: false,
        playTime: 0,
        formatedPlayTime: '00:00:00'
      })
    })
    // 設置播放開始監聽事件
    wx.onBackgroundAudioPlay(function(){
      console.log("音樂開始了，當前webview: ",that.data.__webviewId__)
      // 開始後須要更新當前歌曲的秒數
      if(that.data.playing === false)
        that.setData({
          playing:true
        })
      if(that.updateInterval >= 0)
        return
      that._enableInterval()
    })
    // 設置播放暫停監聽事件
    wx.onBackgroundAudioPause(function(){
      console.log("音樂暫停了，當前webview: ",that.data.__webviewId__)
      // 暫停後，不須要繼續更新歌曲秒數
      if(that.data.playing === true)
        that.setData({
          playing:false
        })
      if(that.updateInterval >= 0)
        clearInterval(that.updateInterval)
    })
  ...
  },

• 同時在wxml中增長了重播的按鍵（文字的形式），簡單的在兩個block中加入text

<block wx:if="{{playing === true}}">
    <view class="page-body-button" bindtap="stop">
      <image src="/image/stop.png"></image>
    </view>
    <view class="page-body-button" bindtap="pause">
      <image src="/image/pause.png"></image>
    </view>
    <view class="page-body-button" bindtap="play">
      <text class="restart">重播</text>
    </view>
  </block>
  <block wx:if="{{playing === false}}">
    <view class="page-body-button"></view>
    <view class="page-body-button" bindtap="resume">
      <image src="/image/play.png"></image>
    </view>
    <view class="page-body-button" bindtap="play">
      <text class="restart">重播</text>
    </view>
  </block>

• 再加一個樣式在wxss

.page-body-button .restart{
  line-height: 80px;
}

仍然存在的問題

在修復背景音樂一些小bug的過程當中，我發現，首先進入播放音樂界面播放歌曲，再返回上一個界面，這時候若是再進入播放音樂界面，那麼播放器的功能沒有問題，可是在該頁面中用於更新UI的定時器會按進出次數遞增。

一些想法：

爲了解決上面的問題，我有下面幾個想法：

• 在這個pager的onUnload階段，對背景音樂的監聽器進行手動的清除（問題是目前的文檔中並無合適的api）

• 不使用背景音樂變化的監聽器，包括wx.onBackgroundAudioPause|wx.onBackgroundAudioStop|wx.onBackgroundAudioPlay,直接手動管理定時器。（我嘗試過這樣作，可是沒有效果，定時器個數仍是會隨着進出次數的增長而增長，但願是個人實現錯了）

目前在PR已經發了，原項目地址github