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

2017-01-11

这个页面需要考虑的问题有:

  1. 输入检测,如果为空,则不允许提交

  2. 获取输入的值

  3. 播放语音时,进度条和时间都要变化

  4. 上传

还是贴源代码,然后加注释吧。

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
          })
        }
      })
    }
  }   
})




1
收藏