{"action":"opened","issue":{"url":"https://api.github.com/repos/newteo/team-blog-repo/issues/51","repository_url":"https://api.github.com/repos/newteo/team-blog-repo","labels_url":"https://api.github.com/repos/newteo/team-blog-repo/issues/51/labels{/name}","comments_url":"https://api.github.com/repos/newteo/team-blog-repo/issues/51/comments","events_url":"https://api.github.com/repos/newteo/team-blog-repo/issues/51/events","html_url":"https://github.com/newteo/team-blog-repo/issues/51","id":196010566,"number":51,"title":"晓想代码分析---finish页面分析","user":{"login":"wardenger","id":20606749,"avatar_url":"https://avatars.githubusercontent.com/u/20606749?v=3","gravatar_id":"","url":"https://api.github.com/users/wardenger","html_url":"https://github.com/wardenger","followers_url":"https://api.github.com/users/wardenger/followers","following_url":"https://api.github.com/users/wardenger/following{/other_user}","gists_url":"https://api.github.com/users/wardenger/gists{/gist_id}","starred_url":"https://api.github.com/users/wardenger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wardenger/subscriptions","organizations_url":"https://api.github.com/users/wardenger/orgs","repos_url":"https://api.github.com/users/wardenger/repos","events_url":"https://api.github.com/users/wardenger/events{/privacy}","received_events_url":"https://api.github.com/users/wardenger/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-12-16T09:01:42Z","updated_at":"2016-12-16T09:01:42Z","closed_at":null,"body":"\r\n这个页面需要考虑的问题有：\r\n\r\n1. 输入检测，如果为空，则不允许提交\r\n2. 获取输入的值\r\n3. 播放语音时，进度条和时间都要变化\r\n4. 上传\r\n\r\n还是贴源代码，然后加注释吧。\r\n\r\n```js\r\nvar app = getApp();\r\nvar util = require('../../utils/util.js')\r\nvar Api = require('../../utils/api.js')\r\nPage({\r\n  data: {\r\n    token: '',\r\n    stringTime: '00:00',\r\n    durationTime: '',    \r\n    numberTime: 0,\r\n    playing: false, \t//记录是否处于播放状态\r\n    title: '',\t\t\t\t//用户输入的title内容\r\n    description: '',\t//用户输入的description内容\r\n    percent: 0,\t\t\t\t//用于进度条的展示\r\n    btnText: '分享',\t\t//由于在用户点击上传后，btn的内容要变成上传中，所以用data\r\n    error: false,\t\t\t//判断用户是否为输入标题或者描述\r\n    errorInfo: '',\t\t//错误的信息：主要分为标题不能为空，描述不能为空。\r\n    titleFocus: false,\t\t\t\t//用于在用户未输入标题时，使titleFocus\r\n    descriptionFocus: false,\t//用于在用户未输入描述时，使descriptionFocus\r\n  },\r\n  //在页面onLoad是，设置token，毫秒数时间和字符串时间\r\n  onLoad: function() {\r\n    var info = wx.getStorageSync('info');\r\n    //下面这条语句为了兼容真机和模拟环境\r\n    typeof info === 'object' ? '' : info = JSON.parse(info)\r\n    this.setData({\r\n      token: info.token,\r\n      stringTime: app.globalData.stringTime,\r\n      durationTime: app.globalData.durationTime\r\n    })\r\n  },\r\n\r\n  //监听用户输入的title内容，并存储\r\n  titleBindInput: function(e) {\r\n    this.setData({title: e.detail.value})\r\n  },\r\n\r\n  //textarea还不提供bindInput，而只能在失去焦点的时候监听其数据\r\n  //这是一个微信的bug,微信官方后期会修复！\r\n  //这会导致第一次点击上传按钮时，程序会错误地判断textarea为空\r\n  descriptionBindBlur: function(e) {\r\n    this.setData({description: e.detail.value})\r\n  },\r\n\r\n  //上传按钮的事件函数，这里需要先调用 inputCheck 函数\r\n  //只有inputCheck通过，才允许用户上传数据\r\n  uploadCatchTap: function() {\r\n    this.setData({descriptionFocus: false})\r\n    this.inputCheck({\r\n      title: this.data.title,\r\n      description: this.data.description,\r\n      success: () => {\r\n        this.setData({error: false})\r\n        this.uploadInit()\r\n      },\r\n      fail: (res) => {\r\n        this.setData({error: true, errorInfo: res})\r\n      }\r\n    })\r\n  },\r\n\r\n  //这是inputCheck的具体实现，接受一个obj作为参数。\r\n  //如果obj.title为空，则调用obj的fail方法，且把'标题不能为空'作为fail方法的参数。\r\n  inputCheck: function(obj) {\r\n    if(obj.title === '')\r\n      obj.fail('标题不能为空')\r\n    else if(obj.description === '')\r\n      obj.fail('描述不能为空')\r\n    else\r\n      obj.success()\r\n  },\r\n\r\n  //这是第一次上传，主要是上传语音文件。\r\n  //跟服务器做了约定，所以这里必须设置name为imagination\r\n  uploadInit: function() {\r\n    var _this = this\r\n    var apiUrl = Api.upload + '?token=' + this.data.token \r\n    wx.uploadFile({\r\n      url: apiUrl,\r\n      filePath: app.globalData.tempfillPath,\r\n      name:'imagination',\r\n      success: function(res){\r\n        _this.uploadAgain(res.data)\r\n      },\r\n      fail: function(res) {\r\n        console.error('upload fail', res)\r\n      }\r\n    })\r\n  },\r\n\r\n  //这是第二次上传，上传其他信息，包括：title，description，src，duration\r\n  uploadAgain: function(dataJson) {\r\n    var _this = this\r\n    wx.request({\r\n      url: 'https://tinyApp.sparklog.com/imagination?token=' + _this.data.token,\r\n      data: {\r\n        title: _this.data.title,\r\n        description: _this.data.description,\r\n        src: dataJson,\r\n        duration: app.globalData.durationTime\r\n      },\r\n      method: 'POST', \r\n      success: function(res){\r\n        console.log('upload again sucess', res)\r\n        _this.setData({btnText: '上传成功', loading: false})\r\n        //发布成功的提示框\r\n        wx.showToast({\r\n          title: '发布成功',\r\n          icon: 'success',\r\n          duration: 1000\r\n        })\r\n        //成功后1S后自动回到首页\r\n        setTimeout(function(){\r\n          wx.navigateBack({delta: 2})\r\n        },1000)\r\n      },\r\n      fail: function() {\r\n       console.error('upload again fail', res)\r\n      }\r\n    })\r\n  },\r\n\r\n  //进度条的显示，每隔500毫秒执行一次自己一次，也就是每隔0.5秒设置一次percent的值\r\n  showPercent: function() {\r\n    var _this = this\r\n    if(this.data.percent > 100) return\r\n    _this.setData({percent: _this.data.percent + 100/(_this.data.durationTime/500)})\r\n    if(_this.data.playing) {\r\n      setTimeout(function(){\r\n        _this.showPercent()  \r\n      }, 500)\r\n    }\r\n  },\r\n\r\n  //字符串时间的显示\r\n  showTime: function() {\r\n    var _this = this\r\n    if(this.data.numberTime * 1000 > this.data.durationTime) return\r\n    _this.setData({numberTime: _this.data.numberTime + 1})\r\n    _this.setData({stringTime: util.NumberToTime(this.data.numberTime)})\r\n    if(_this.data.playing) {\r\n      setTimeout(function(){\r\n        _this.showTime()\r\n      }, 1000)\r\n    }\r\n  },\r\n\r\n  //播放语音的事件函数\r\n  playVoiceCatchTap: function(){\r\n    var _this = this\r\n    if(this.data.playing) {\r\n      this.setData({\r\n        playing: false,\r\n      })\r\n      wx.stopVoice()\r\n    }\r\n    else {\r\n      this.setData({\r\n        playing: true,\r\n        percent: 0,\r\n        numberTime: 0\r\n      })\r\n\r\n      //调用显示进度条和字符串时间函数\r\n      _this.showPercent()\r\n      _this.showTime()\r\n\r\n      wx.playVoice({\r\n        filePath: app.globalData.tempfillPath,\r\n        complete: function(res){\r\n          _this.setData({\r\n            playing: false,\r\n            percent: 100\r\n          })\r\n        }\r\n      })\r\n    }\r\n  }   \r\n})\r\n\r\n```"}}
{"actor":{"display_login":"wardenger"}}