# API Native Event

# API Native Event Listener

In the APICloud project, listening for native events looks like this:

api.addEventListener({
  name: 'eventName'
}, (ret, err) => {
  if (ret) {
    // TODO
  } else {
    // Error Handle
  }
});

In vue-apicloud-quickstart, you can directly use the addEventListener method to listen to native events, as shown below.

<script>
export default {
  name: 'event-demo',
  methods: {
    listenKeyBack () {
      this.api.addEventListener({
        name: 'keyback'
      }, (ret, err) => {
        if (ret) {
          this.$toast({ msg: 'Back key pressed' })
        } else {
          // Error Handle
        }
      });
    },
    loadMore () {
      this.api.addEventListener({
        name: 'scrolltobottom',
        extra: { threshold: 0 }
      }, (ret, err) => {
        // loadMore TODO
        this.$toast({ msg: 'Scrolled to the bottom' });
      });
    }
  },
  onReady () {
    this.listenKeyBack();
    this.loadMore();
  }
}
</script>

You can also use the more convenient apiEvent syntactic sugar, as shown below

<script>
export default {
  name: 'event-demo',
  apiEvent: {
    keyback (ret, err) {
      if (ret) {
        this.$toast({ msg: 'Back key pressed' });
      } else {
        // Error Handle
      }
    },
    scrolltobottom: {
      extra: {
        threshold: 0
      },
      handle (/*ret, err*/) {
        // loadMore TODO
        this.$toast({ msg: 'Scrolled to the bottom' });
      }
    }
  }
}
</script>

# Supported native events

Supports all native events except apiready, including custom events.

Sending custom events is shown below,

<template>
  <div @click="sendMyEvent">
    content
  </div>
</template>

<script>
export default {
  name: 'send-event-demo',
  methods: {
    sendMyEvent () {
      this.api.sendEvent({
        name: 'myEventName',
        extra: {
          key1: 'value1',
          key2: 'value2'
        }
      });
    },
  }
}
</script>

Listening to custom events is shown below,

<script>
export default {
  name: 'event-listener-demo',
  apiEvent: {
    myEventName (ret, err) {
      if (ret) {
        const { key1, key2 } = ret.value;
        // TODO width  key1, key2 
      } else {
        // Error Handle
      }
    },
  }
}
</script>

TIP

The following is a list of native events that support apiEvent listening, from the official APICloud documentation. For detailed native event parameters, please refer to APICloud Official Documentation - API Object - Event (opens new window)

Event name	Event description
batterylow (opens new window)	Device Battery Low Event, String Type
batterystatus (opens new window)	Device battery status change event, such as battery change or charging, string type
keyback (opens new window)	Device back key click event, only valid for Android platform, string type. This event must be registered in the Window to be effective, the registration in the Frame is invalid, and only the window on the current screen can receive the callback
keymenu (opens new window)	Device menu key click event, only available on Android platform. This event must be registered in the Window to be effective, the registration in the Frame is invalid, and only the window on the current screen can receive the callback
volumeup (opens new window)	Device volume plus key click event, only valid on Android platform. This event must be registered in the Window to be effective, the registration in the Frame is invalid, and only the window on the current screen can receive the callback
volumedown (opens new window)	Device volume down key click event, only available on Android platform. This event must be registered in the Window to be effective, the registration in the Frame is invalid, and only the window on the current screen can receive the callback
offline (opens new window)	Listen for events when the device is disconnected from the network, string type
online (opens new window)	Listen for events when the device connects to the network, string type
pause (opens new window)	Application enters background event, string type
resume (opens new window)	Application returns to the foreground event from the background, string type
scrolltobottom (opens new window)	Window or Frame page slide to bottom event, string type. Can be used to scroll to the bottom to load more features
shake (opens new window)	Device shake event, string type. After this monitoring is set, the current APP will immediately turn on the shake detection function. Can be used to implement the shake function
takescreenshot (opens new window)	While the application is running in the foreground, the user's screenshot event (such as pressing the home button and the power button at the same time), only supports iOS
appidle (opens new window)	How long does it take for the app to not trigger the screen? String type
swipedown (opens new window)	Window or Frame page global swipe down event, string type
swipeleft (opens new window)	Window or Frame page global swipe event to the left, string type
swiperight (opens new window)	Window or Frame page global swipe right event, string type
swipeup (opens new window)	Window or Frame page global swipe up event, string type
tap (opens new window)	Window or Frame page global click event, string type. After listening to this event, clicking anywhere on the window or frame will receive a tap callback.
longpress (opens new window)	Window or Frame page global long-press event, string type.
viewappear (opens new window)	Window Event displayed on the screen, string type. Receive a viewappear event callback, which indicates that the current Window has been animated and completely displayed on the screen. The object of this event is Window. The display of Frame will not receive the event.
viewdisappear (opens new window)	Window leave screen event, string type. Receive a viewdisappear event callback, which indicates that the current Window has been animated and completely removed from the screen. The object of this event is Window. The hiding of the Frame will not receive the event. If the Window is closed, this event will not be called back.
noticeclicked (opens new window)	Callback when status bar notification is clicked by user, string type. Note: This event is only valid for status bar notifications issued by api.notification and the official push module, and cannot receive status bar notifications from third-party modules or SDKs
appintent (opens new window)	When this application is called up by other applications (Android platform can also be opened through Activity), receive the callback of related data, string Types of. After registering the listener on any page, if this application is called by another application, the listener function will be triggered, and the data passed to the application will be called back to the web page
smartupdatefinish (opens new window)	Cloud repair When the silent repair is used, the update completion event. You can listen to this event to notify the user to perform operations or prompts such as whether to force restart the application, so that the update takes effect, a string type. This event will not be triggered if prompted to repair
launchviewclicked (opens new window)	Callback after the user clicks on the splash screen ad, string type
keyboardshow (opens new window)	Callback for system keyboard popup, only supports iOS, string type
keyboardhide (opens new window)	Callback hidden by system keyboard, only supports iOS, string type
safeareachanged (opens new window)	Callback where the safe area of the page changes, you can adjust the page as needed in the callback. Only iOS 11 and above systems are valid. String Type
navtitle (opens new window)	Listen for navigation bar title click events in tabLayout
navbackbtn (opens new window)	Listen to the default button click event of the navigation bar in tabLayout. When you click the back button, the current window will be closed by default. If you listen to this event, it will not close automatically.
navitembtn (opens new window)	Listen for custom button click events on the left and right sides of the navigation bar in tabLayout, string type
tabitembtn (opens new window)	Listen for click events on tabBar items in tabLayout. By default, each item is clicked to switch to the corresponding page. If this event is monitored, the page will not automatically switch over. You can set the selected item through setTabBarAttr. String type
tabframe (opens new window)	Listen for the frame item's switching event when there is a tabBar in the tabLayout. String type

# Screen orientation changes listener

The listener for screen orientation changes is different as follows:

<script>
export default {
  name: 'on-window-change-demo',
  onWindowChange () {
    // TODO
    this.$toast({ msg: 'Screen orientation changed' })
  }
}
</script>

# Using Typescript

If you use Typescript, two decorators VueAPICloud and APIEvent will be used, and the onWindowChange does not require a decorator

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { VueAPICloud, APIEvent } from 'vue-apicloud-quickstart'

@VueAPICloud
@Component
export default class APIEventDemo extends Vue {

  @APIEvent({ extra: { threshold: 0 } })
  scrolltobottom () {
    this.$toast({ msg: 'Scrolled to the bottom' });
  }

  @APIEvent()
  myEventName (ret: any, err: any) {
    if (ret) {
      const { key1, key2 } = ret.value;
      // TODO width  key1, key2 
    } else {
      // Error Handle
    }
  }

  onWindowChange () {
    // TODO
    this.$toast({ msg: 'Screen orientation changed' })
  }
}
</script>

← Life Cycle Network Request →