快应用项目开发踩坑日记

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

描述：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'
    })
  }
}
</script>      

问题(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语句里面的跳转，所以就出现了单击跳转了，还会出现跳转的现象。

解决  代码（最终版）：

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

<script>
import router from '@system.router';
import push from '@service.push';
import geolocation from '@system.geolocation';

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

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

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

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

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

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

<script>  

//1.setTimeout
//定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器 


//2.setInterval
/实时刷新时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
   $("#mainTable").datagrid('reload',null);  
}   
</script>         

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

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

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

<template>
  <div class="bootFirst">
    <div class="bootFirst__Location">
  
    <div class="bootFirst__agree">
      <div class="agree__agree">
        <input onchange="changeAttituted" type="checkbox" checked="false" class="input--circle" />
        <text>我已阅读并同意<span class="text--blue">《预警信息用户协议》</span></text>
      </div>
      <div class="agree__input">
        <input class="input__self" type="button" value="下一步" onclick="routeBootSecond" />
      </div>
    </div>
  </div>
</template>

<script>
import router from '@system.router';

export default {
  private: {
    attitude:false,
  },
  changeAttituted(e){
    console.log(e);
    if(e.checked == true){
      this.attitude = true;
    }else{
      this.attitude = false;
    }
  },

  routeBootSecond(){
    // 跳转前判断是否选中同意协议
    if(this.attitude == true){
      router.push ({
        uri: '/BootSecond'
      })
    }else{
      this.$app.$def.prompt.showToast({ message: '请同意协议~' });
    }
  }
}
</script>

<style lang="less">
    .bootFirst{
        flex-direction: column;

        
    }
</style>      

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

<script>
/**
* 应用级别的配置，供所有页面公用
*/
import util from './util';
import prompt from '@system.prompt';


export default {
  showMenu: util.showMenu,
  createShortcut: util.createShortcut,
  prompt: prompt,
}
</script>      

这里贴图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下导出的对象。

四。分享链接

<template>
    <div class="box">
     <div class="detail">
        <text class="title">预警详情</text>
        <image onclick="shareLink(url)" src="../Common/image/share.png"></image>
     </div>
    
        
    </div>
</template>
<script>
export default {
    private:{
        url:'https://www.baidu.com/'
    },
    shareLink(url) {
      this.$app.$def.share.share({
        type:"text/plain",
        data: url
      })
    }
}

</script>
<style>
  
</style>      

• VM的属性值必须在onInit之前修改好，等onReady后再修改无效，view不能更新
• 不能操作document，比如所document.getElementById
• onReady后才能操作DOM
• $element(id) 不能直接修改style
• 没有touch事件
• 一定要看文档提示，有些属性不支持，比如​

  ​justify-content​

  ​​ 不支持​

  ​space-around​

  ​
• 自定义布局导入到父布局后默认宽高还是屏幕尺寸，并不是限制到父布局宽高