快应用项目开发踩坑日记

一。 想做一个倒计时效果的跳过：

描述：3s倒计时，到0s时候自动跳转。

源代码（有问题的）：

export default {
  // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
  private: {
    time:3,
    in:"aaa",
    timer:null,
  },
  onReady(){
    this.timer = setInterval(this.skip,1000);
  },
  skip(){
    console.log(this.time);
    if(this.time>0){
      this.time--;
    }else{
      clwarInterval(this.timer);
      router.push ({
         uri: '/BootFirst'
      })
    }
  },
  routeBoot() {
    // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
    router.push ({
      uri: '/BootFirst'
    })
  }
}

问题(1):

报错：TypeError: Cannot read property 'time' of undefined

原因剖析：缺少this指向，this指向丢失，默认为undefined。

window 在是BOM 的核心对象，他是浏览器的一个实例。 快应用是手机上的，类似于app，不存在window。所以this指向undefined

问题(2).：在2s的时候点击跳转，跳转之后过了1s还会再次跳转。

原因剖析：定时器是设置了每一秒执行一次，单击跳转的时候，代码没有清除定时器，定时器会执行到time为0，time=0时会执行一次else语句里面的跳转，所以就出现了单击跳转了，还会出现跳转的现象。

解决  代码（最终版）：

尽可能的实现代码的封装调用

问题(3).：发现使用setTimeout只会执行一次skip函数，而setInterval可以实现我们想要的定时器每秒执行一次的效果。

原因剖析：是由于两种API本质不同造成的，弄清楚概念即可。

setTimeout只在指定时间后执行一次，setInterval以指定时间为周期循环执行。

两种方法根据不同的场景和业务需求择而取之。

一般情况下setTimeout用于延迟执行某方法或功能。setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步

 

二。协议默认为未选中状态，同意协议，然后点击“下一步”。

描述：同意协议才可以点击“下一步”进行跳转，否则会提示“请同意协议”。

思路：通过input的onchange API进行改变attitute（同意协议：true, 默认即不同意：false）的值。input 的type为checkbox时，会有一个默认的属性checked：false。可以写在标签上，也可以不写，此处选择写上增加印象。有onchange事件，默认第一个参数event，event的checkd属性代表的是复选框的状态：选中true,未选中false。

用到了弹框，需要在app.ux中配置prompt

这里贴图input的API:

API网址：https://doc.quickapp.cn/widgets/input.html

github  code examples:https://github.com/quickappcn/sample/blob/master/src/component/form/input/index.ux

三。开机引导流程仅首次进入时生效

描述：第一次使用，会有引导流程，最后进入首页。第二次以及以后每次使用，不再出现引导流程，直接进入首页。

思路：全局变量存入一个boolean值hasGuide，默认为false。然后条件判断，如果未曾进入引导流程即值为false,则进入，否则直接进入首页。

this.$app.$def   可以获取全局变量 ，并且用 = 进行赋值可以进行更改。这个获取的是app.ux下导出的对象。

四。分享链接

在app.ux中配置share。share分享出去的是字符串.

五。小坑汇总：

• VM的属性值必须在onInit之前修改好，等onReady后再修改无效，view不能更新

• 不能操作document，比如所document.getElementById
• onReady后才能操作DOM
• $element(id) 不能直接修改style
• 没有touch事件
• 一定要看文档提示，有些属性不支持，比如 justify-content 不支持 space-around
• 自定义布局导入到父布局后默认宽高还是屏幕尺寸，并不是限制到父布局宽高

•