【快应用】通知消息定时提醒
【现象描述】
当用户使用快应用时,定时给用户发送提醒,省去了去桌面找该快应用的图标或者去快应用中心寻找该应用的过程。
在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" οnchange="titleFn" />
</div>
<div class="item-content-detail">
<text class="txt">Content:</text>
<input class="input" placeholder="Please input content" οnchange="contentFn" />
</div>
</div>
<input type="button" class="btn" value="Send a notification" οnclick="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
相关文章
- uniapp - 通讯聊天功能示例源代码,类似微信聊天 / 电商淘宝京东 “买卖双方“ 消息沟通系统 / 各大应用简易聊天沟通的功能插件(超级详细代码和注释,开箱即用)全端兼容 H5 App 小程序
- 【快应用】如何处理服务端推送push消息,出现illegal tokens错误提示
- 【快应用】通知消息定时提醒
- 【AGC】如何在iOS上集成华为AGC应用内消息
- 太方便:OneDrive等应用也已支持虹膜解锁
- Flutter 精品项目大全之 漂亮的植物应用管理app 主页您支持搜索框教程含源码)
- Qt编写地图综合应用57-跨平台(win、linux、mac、uos、kylin等)
- 使用Web前端技术开发桌面应用---Electron 底部通知消息的制作
- windows下Oracle Tuxedo编译应用前需要配置的相关环境变量
- OneNET麒麟座应用开发之九:与SD卡通讯并保存数据
- IP语音:嵌入式系统新应用
- 【AGC】调测应用内消息服务的收不到弹窗的问题
- 【AGC】集成华为AGC应用内消息如何实现自定义样式
- H5应用转换快应用
- 微信小程序 | 微信公众平台SpringBoot开发实例 │ 模板消息的应用开发
- 微信小程序 | 微信公众平台SpringBoot开发实例 │ 模板消息的应用开发
- 大数据技术应用于上海基层金融风险综合监测服务平台
- RabbitMQ消息队列在PHP下的应用
- Global Tag推出新款RFID标签,可满足不同金属环境应用
- 谷歌新消息应用Allo试用体验:它能提前知道你想说什么
- Node的webpack打包的核心思想就是单页面富应用(SPA)
- 国内农业物联网推广及传感器技术应用现状