-
输入检测,如果为空,则不允许提交 - 获取输入的值
- 播放语音时,进度条和时间都要变化
- 上传
还是贴源代码,然后加注释吧。
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 }) } }) } } })