近期工作总结(前端之小程序)

小程序使用总结:
说说使用小程序遇到的几个问题;
1.这个问题当时也是想了很长时间,上线后才发现的,就是用户录完题后跳转到选择分类页面,选择完成后回到录题页面并清空之前的数据,流程如下

点击下一步:

提交后回到录题页面,并清空数据类容.
上线后用户录题时发现当录了多道题目后无法点击下一步,除非点击返回重新进入录题页面又可以重新录题了,而前后端都没有报错

百度后发现,在微信小程序中打开的页面不能超过10个，达到10个页面后，就不能再打开新的页面。

因为我提交完之后使用的wx.navigateTo()进行页面跳转,所以每次提交完成后返回都是重新创建了一个录题的view对象,当录到第十次的时候,无法打开新页面,自然就卡住了.而使用wx.redirectTo()也是如此,这时候只能用wx.navigateBack()直接返回上一页,但是又会出现新的问题,就是上一页的数据并没有清除,而返回上一页是分两种情况的
1.用户需要修改题目内容点击左上角返回
2.用户提交后系统返回
因此在点击下一步的时候是不能够清空题目内容的,会导致用户点击左上角返回要修改时无法修改,我用了个比较笨的方法,大家有更好的方法可以分享一下,
我的方法时在用户点击提交时定义一个缓存值oprate,存入app.globalData中,然后每次进入录题页面时判断oprate的值,若为1则清空,不为1则不清空.到此问题解决了

其实这个问题解决之后同时也解决了另一个比较困扰我的问题.
就是使用wx.navigateTo()返回时是重新创建了一个录题view,而返回来之后我在录题页面再次单击左上角返回,他会出现一个录题页面一闪而过的情况,就好像是同时关了好几个页面的感觉(事实上就是如此),但在手机上并没有这种情况,只是在开发工具中出现这种情况,当时不知道是什么原因,但是看着没什么影响就没管,然后导致上线出现问题,一个很大的教训,专门记录下来时刻提醒自己,什么时候都不能掉以轻心!

2.textarea层级无法覆盖问题,这个问题在开发者工具中是不显示的,在手机测试才发现.
录题也的题干框是textarea标签,而查相似是从题库中查出类似的题目,作为弹框显示在录题页面的

这时候用手机看就会发现,textarea中的字直接穿透弹框显示出来了,经过多次尝试无法盖住,于是只能在弹框弹出的时候将textarea隐藏起来了(同上,有更好的方法欢迎分享哦!)

顺便分享一个遮罩层的样式,遮罩效果如上图所示

3. 小程序表单多个按钮问题,
在小程序里对于表单数据来说,如果要实现点不同的按钮实现不同的操作和jquery是有所区别的.
jQuery中只需要定义按钮id,通过选择器选择即可,非常方便.
但对于小程序来说,他的方法是定义在form标签中的bindsubmit属性里的,因此在表单中定义任何按钮 执行的都是bindsubmit定义的方法(如下图)

在小程序中也很简单
1.给每个按钮定义一个data-type
2.在js中通过e.detail.target.dataset.type获取值,根据值来判断需要进行什么操作

4.定时器:

//开始计时
startTimer: function (currentstartTimer) {
let that = this
//注意点3: 清除定时器 为了保证每次只有一个定时器，和下拉刷新 配合，否则会导致 计时数据跳动，因为创建了多个定时器。
clearInterval(interval);
that.data.interval = setInterval(function () {
// 秒数
var second = currentstartTimer;
// 天数位
var day = Math.floor(second / 3600 / 24);
var dayStr = day.toString();
if (dayStr.length == 1) dayStr = ‘0’ + dayStr;

  // 小时位
  var hr = Math.floor((second - day * 3600 * 24) / 3600);
  var hrStr = hr.toString();
  if (hrStr.length == 1) hrStr = '0' + hrStr;

  // 分钟位
  var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
  var minStr = min.toString();
  if (minStr.length == 1) minStr = '0' + minStr;

  // 秒位
  var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
  var secStr = sec.toString();
  if (secStr.length == 1) secStr = '0' + secStr;

  this.setData({
    countDownDay: dayStr,
    countDownHour: hrStr,
    countDownMinute: minStr,
    countDownSecond: secStr,
  });
  currentstartTimer++;
  console.log("---12-12---- " + currentstartTimer);
  if (currentstartTimer <= 0) {
    clearInterval(interval);
    this.setData({
      countDownDay: '00',
      countDownHour: '00',
      countDownMinute: '00',
      countDownSecond: '00',
    });
  }
}.bind(this), 1000);

},

5.进度条progress组件(类似头脑王者银行功能中使用)

percent:进度条最终需要到达的百分比
duration: 没涨百分之一需要的时间(毫秒为单位)
active:是否显示动画
active-mode:百分比每变化一次是重新开始还是接着涨 .