【快應用】通知消息定時提醒

【現象描述】

當使用者使用快應用時，定時給使用者發送提醒，省去了去桌面找該快應用的圖示或者去快應用中心尋找該應用的過程。

在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