AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:43

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:晓想demo代码分析系列《四》finish页面分析
相关的资讯,希望对您有帮助。

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

作者:wardenger,本分析对应demo地址为:https://github.com/wardenger/Voice这个页面需要考虑的问题有:输入检测,如果为空,则不允许提交获取输入的值播放语音时,进度条和时间都要变化上传还是贴源代码,然后加 ...

作者:wardenger,本分析对应demo地址为:https://github.com/wardenger/Voice

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

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

42阅读 | 0评论
你的回应
写文章

7006