一。 想做一个倒计时效果的跳过:
描述: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下导出的对象。
四。分享链接
在app.ux中配置share。share分享出去的是字符串.
<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
- 自定义布局导入到父布局后默认宽高还是屏幕尺寸,并不是限制到父布局宽高
-