【快应用】通知消息定时提醒
作者：互联网
【现象描述】
当用户使用快应用时，定时给用户发送提醒，省去了去桌面找该快应用的图标或者去快应用中心寻找该应用的过程。
在onHide中添加定时器，当用户离开应用时定时发送通知消息提醒用户，正常点击应用进入可以在onShow关闭定时器，而从通知消息跳转进入则不会关闭。
【问题分析】
点击进入应用时，会触发生命周期onShow方法中关闭定时器的方法，但是从通知消息进入应用不会触发onShow。
【解决方法】
声明当前页面的启动模式，标识为"singleTask"模式，每次打开目标页面都会回调onRefresh生命周期函数，关闭定时器。
Manifest.json
"router": {
"entry": "Hello",
"pages": {
"Hello": {
"launchMode": "singleTask",
"component": "hello"
}
}
},
Hello.ux
onHide: function () {
this.notificationShow = setInterval(() => {
this.show()
}, 1000)
},
onShow: function () {
clearInterval(this.notificationShow);
},
onRefresh() {
clearInterval(this.notificationShow);
},
代码如下：
<template>
<div class="container">
<div class="item-container">
<div class="item-content">
<div class="item-content-detail">
<text class="txt">Title:</text>
<input class="input" placeholder="Please input title" onchange="titleFn" />
</div>
<div class="item-content-detail">
<text class="txt">Content:</text>
<input class="input" placeholder="Please input content" onchange="contentFn" />
</div>
</div>
<input type="button" class="btn" value="Send a notification" onclick="show" />
</div>
</div>
</template>
<style>
.container {
flex: 1;
flex-direction: column;
}
.item-container {
margin-top: 50px;
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
}
.item-content {
flex-direction: column;
background-color: #ffffff;
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 100px;
}
.item-content-detail {
align-items: center;
}
.input {
flex: 1;
font-size: 30px;
padding-left: 20px;
}
.txt {
width: 150px;
padding-top: 15px;
padding-bottom: 15px;
text-align: right;
}
.btn {
height: 80px;
text-align: center;
border-radius: 5px;
margin-right: 60px;
margin-left: 60px;
margin-bottom: 50px;
color: #ffffff;
font-size: 30px;
background-color: #0faeff;
}
</style>
<script>
import prompt from '@system.prompt'
import notification from '@system.notification'
export default {
data: {
componentData: {},
inputTitle: 'title',
inputContent: 'content',
num: '',
},
onInit: function () {
this.$page.setTitleBar({ text: 'notification' })
},
onHide: function () {
this.notificationShow = setInterval(() => {
this.show()
}, 1000)
},
onShow: function () {
clearInterval(this.notificationShow);
},
onRefresh() {
clearInterval(this.notificationShow);
},
show: function () {
var that = this
that.num++;
prompt.showToast({
message: '标题为: ' + that.inputTitle + ' "的消息已发送，请查看消息通知栏 ' + ',No:' + that.num,
})
notification.show({
contentTitle: that.inputTitle,
contentText: that.inputContent + ',No:' + that.num,
clickAction: {
uri: '/Hello'
},
})
},
titleFn: function (e) {
this.inputTitle = e.text
},
contentFn: function (e) {
this.inputContent = e.text
},
}
</script>
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
标签：提醒,function,flex,通知,padding,notificationShow,text,定时,margin 来源： https://www.cnblogs.com/developer-huawei/p/16590702.html