晓想demo代码分析系列《四》finish页面分析

var app = getApp();
var util = require('../../utils/util.js')
var Api = require('../../utils/api.js')
Page({
  data: {

    token: '',
    stringTime: '00:00',
    durationTime: '',    
    numberTime: 0,
    playing: false, 	//记录是否处于播放状态
    title: '',				//用户输入的title内容
    description: '',	//用户输入的description内容
    percent: 0,				//用于进度条的展示
    btnText: '分享',		//由于在用户点击上传后，btn的内容要变成上传中，所以用data
    error: false,			//判断用户是否为输入标题或者描述
    errorInfo: '',		//错误的信息：主要分为标题不能为空，描述不能为空。
    titleFocus: false,				//用于在用户未输入标题时，使titleFocus
    descriptionFocus: false,	//用于在用户未输入描述时，使descriptionFocus
  },
  //在页面onLoad是，设置token，毫秒数时间和字符串时间
  onLoad: function() {
    var info = wx.getStorageSync('info');
    //下面这条语句为了兼容真机和模拟环境
    typeof info === 'object' ? '' : info = JSON.parse(info)
    this.setData({
      token: info.token,
      stringTime: app.globalData.stringTime,
      durationTime: app.globalData.durationTime
    })
  },

  //监听用户输入的title内容，并存储
  titleBindInput: function(e) {
    this.setData({title: e.detail.value})
  },

  //textarea还不提供bindInput，而只能在失去焦点的时候监听其数据
  //这是一个微信的bug,微信官方后期会修复！
  //这会导致第一次点击上传按钮时，程序会错误地判断textarea为空
  descriptionBindBlur: function(e) {
    this.setData({description: e.detail.value})
  },

  //上传按钮的事件函数，这里需要先调用 inputCheck 函数
  //只有inputCheck通过，才允许用户上传数据
  uploadCatchTap: function() {
    this.setData({descriptionFocus: false})
    this.inputCheck({
      title: this.data.title,
      description: this.data.description,
      success: () => {
        this.setData({error: false})
        this.uploadInit()
      },
      fail: (res) => {
        this.setData({error: true, errorInfo: res})
      }
    })
  },

  //这是inputCheck的具体实现，接受一个obj作为参数。
  //如果obj.title为空，则调用obj的fail方法，且把'标题不能为空'作为fail方法的参数。
  inputCheck: function(obj) {
    if(obj.title === '')
      obj.fail('标题不能为空')
    else if(obj.description === '')
      obj.fail('描述不能为空')
    else
      obj.success()
  },

  //这是第一次上传，主要是上传语音文件。
  //跟服务器做了约定，所以这里必须设置name为imagination
  uploadInit: function() {
    var _this = this
    var apiUrl = Api.upload + '?token=' + this.data.token 
    wx.uploadFile({
      url: apiUrl,
      filePath: app.globalData.tempfillPath,
      name:'imagination',
      success: function(res){
        _this.uploadAgain(res.data)
      },
      fail: function(res) {
        console.error('upload fail', res)
      }
    })
  },

  //这是第二次上传，上传其他信息，包括：title，description，src，duration
  uploadAgain: function(dataJson) {
    var _this = this
    wx.request({
      url: 'https://tinyApp.sparklog.com/imagination?token=' + _this.data.token,
      data: {
        title: _this.data.title,
        description: _this.data.description,
        src: dataJson,
        duration: app.globalData.durationTime
      },
      method: 'POST', 
      success: function(res){
        console.log('upload again sucess', res)
        _this.setData({btnText: '上传成功', loading: false})
        //发布成功的提示框
        wx.showToast({
          title: '发布成功',
          icon: 'success',
          duration: 1000
        })
        //成功后1S后自动回到首页
        setTimeout(function(){
          wx.navigateBack({delta: 2})
        },1000)
      },
      fail: function() {
       console.error('upload again fail', res)
      }
    })
  },

  //进度条的显示，每隔500毫秒执行一次自己一次，也就是每隔0.5秒设置一次percent的值
  showPercent: function() {
    var _this = this
    if(this.data.percent > 100) return
    _this.setData({percent: _this.data.percent + 100/(_this.data.durationTime/500)})
    if(_this.data.playing) {
      setTimeout(function(){
        _this.showPercent()  
      }, 500)
    }
  },

  //字符串时间的显示
  showTime: function() {
    var _this = this
    if(this.data.numberTime * 1000 > this.data.durationTime) return
    _this.setData({numberTime: _this.data.numberTime + 1})
    _this.setData({stringTime: util.NumberToTime(this.data.numberTime)})
    if(_this.data.playing) {
      setTimeout(function(){
        _this.showTime()
      }, 1000)
    }
  },

  //播放语音的事件函数
  playVoiceCatchTap: function(){
    var _this = this
    if(this.data.playing) {
      this.setData({
        playing: false,
      })
      wx.stopVoice()
    }
    else {
      this.setData({
        playing: true,
        percent: 0,
        numberTime: 0
      })

      //调用显示进度条和字符串时间函数
      _this.showPercent()
      _this.showTime()

      wx.playVoice({
        filePath: app.globalData.tempfillPath,
        complete: function(res){
          _this.setData({
            playing: false,
            percent: 100
          })
        }
      })
    }
  }   
})