当前位置：网站首页>Constantly changing the emergency dialing of harmonyos ETS during the new year

Constantly changing the emergency dialing of harmonyos ETS during the new year

2022-06-24 17:33:00 【Harmonyos technology community】

The Spring Festival keeps changing , This article is being attended 「 Project starlight - Spring festival activities 」
author ： Chenlongjia

Preface

I have been learning about the official documents of Hongmeng , Learning is mainly based on JS Extended classes web Development paradigm , As the development documents are constantly updated ,SDK It's also updated to 8, With TS Has been widely used , So I came into contact with people based on TS Extended classes web Development paradigm , That is to say ArkUI. This article is mainly based on ArkUI Implementation of a small project , It can also be said to be a demo, Mainly through ETS Complete some interface related 、 Simple data communication and interaction .

Effect display

# The Chinese New Year keeps changing #HarmonyOS-ETS Emergency dialing _javascript

Create project

Start by opening devEco Studio Editor , Find... In the upper left corner File–>New–>New project, Then go to the following page , The most annoying thing about using the editor for the first time should be sdk The problem of , First ETS The project must require SDK7 The above can be used , So if you have failed to create children's shoes, please check your SDK Is the version correct .

# The Chinese New Year keeps changing #HarmonyOS-ETS Emergency dialing _ Emergency dialing _02

Project framework

Catalog	describe
src	The source code main folder of the project
components	Storage folder of public components
Model	The storage folder of the primary data source
pages	Project page folder
app.ets	Entry documents for the project
resources	Applied resource folder （ character string 、 picture 、 Audio etc. ）
config.json	Application profile

Data model construction

1. Define an interface to constrain urgentDialList

//  Use here TS Medium interface To constrain the interface 
interface UrgentDialList {
  id: number,
  EmergencyNumber: number,
  type: string
}

const urgentDialList: UrgentDialList[] = [
  {
    id: 1,
    EmergencyNumber: 110,
    type: " Bandit police "
  },
  {
    id: 2,
    EmergencyNumber: 120,
    type: " Medical emergency "
  },
  {
    id: 3,
    EmergencyNumber: 119,
    type: " Fire Alarm "
  }
]

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

2. structure initializeOnStartup Method to initialize the page data

export function initializeOnStartup(): Array<UrgentListData> {
  let urgentDialListArray: Array<UrgentListData> = []
  urgentDialList.forEach(item => {
    urgentDialListArray.push(new UrgentListData(item.id, item.EmergencyNumber, item.type))
  })
  return urgentDialListArray
}

     1.
2.
3.
4.
5.
6.
7.

Mainly related to the state variable decorator

Decorator	describe
@State	State attributes owned by components . whenever @State When the variable of decoration changes , The component will be re rendered and updated UI
@Link	A component depends on certain state properties owned by its parent component . Whenever the data in any component is updated , The status of the other component is updated , Both parent and child components will be re rendered .
@Prop	It works in a similar way @Link, Only the changes made by the child component will not be synchronized to the parent component , It belongs to one-way transmission .

What I want to say here is about @Link Follow @Prop Can transfer component data , But by @Prop Decorated variable , The parent component cannot modify the data , Because this will destroy the unidirectionality of the data , and @Link It's two-way data binding , Data can be re rendered and modified .

It mainly involves function nodes

Open the pop-up box to get the geographical location
Jump to the emergency dial page
Incoming and outgoing calls from the dial-up keyboard
Gesture event sliding call emergency number

Main tool function classes

1.showToast function

effect : It is mainly used to show the bullet box , Here we need to introduce a bag from hongmengli (import prompt from ‘@system.prompt’

async function showToast(message: string,duration:number = 5000) {
  await prompt.showToast({
    message,
    duration
  })
}

     1.
2.
3.
4.
5.
6.

2.routerPage function

effect : Mainly used for page Jump , Here we need to introduce a bag from hongmengli (import routerfrom ‘@system.router’

async function routerPage(path) {
  let option = {
    uri: `pages/${path}`
  }
  try {
    await router.push(option)
  } catch (err) {
    console.log(`fail callback, code: ${err.code}, msg: ${err.msg}`)
  }
}


     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

Component encapsulation

keyword Components

The keyboard assembly mainly uses Grid Palace layout , It is recommended to use this kind of layout similar to the keyboard or the Jiugong grid grid Layout ,
Using grid containers , Two dimensional layout , Divide containers into " That's ok " and " Column ", Generate cells , Then designate " Where the project is " Cells of , You can combine different meshes at will , Make all kinds of layouts .
But be careful ,Text Components can only be used to display strings , So if you want to show the numbers, you need to pass toString() Change my , This is a small problem I encountered before .

@Component
export default struct Keyword {
  @State keySign: (string | number)[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, "*", 0, "#"]
  @State key: number | string= ""
  @Link inputNumber: string

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.keySign, key => {
          GridItem() {
            Text(key.toString())
              .fontSize(52)
              .fontColor("#fff")
              .fontWeight(500)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
              .onClick(() => {
                console.log(key);
                this.key = this.inputNumber
              })
          }
        })
      }
       //  It's used here grid Medium columnsTemplate as well as rowsTemplate attribute , He will partition the elements 
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .height(360)
    }
  }
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

urgentList Components

This component is mainly used to render the emergency dial list , stay ArkUI in , The main use of forEach To traverse the data , Display the page .

import urgentListItem from "./urgentListItem.ets"
import {UrgentListData} from "../Model/urgentListData.ets"
import {initializeOnStartup} from "../Model/urgentListModel.ets"

@Component
export default struct UrgentList {
  private urgentItems: UrgentListData[]= initializeOnStartup()

  build() {
    List() {
      ForEach(this.urgentItems, item => {
        ListItem() {
          urgentListItem({ urgentItems: item })
        }
      }, item => item.id.toString())
    }
    .width("90%")
  }
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

urgentListItem Components

Gesture events are used in this component , adopt PanGesture() Medium onActionEnd、onActionStart、onActionUpdate Three methods to control the distance triggered by gestures , When this.offsetX Above a certain critical value , Slide to change the menu layout or content layout left Offset , The gesture lifts the completion offset to update the view .

1. First , Gesture events will be used , By judging the offset of gesture sliding offsetX To control the color change after sliding

gesture()：gesture: GestureType,mask?: GestureMask

Hongmeng system provides the following Gesture type ：

LongPressGesture	Long press gesture
PanGesture	Pan gestures
PinchGesture	Kneading gestures
RotationGesture	Rotating gestures

2. Respond to gesture events

Components through gesture Method to bind a gesture object , The gesture operation can be responded to by the event provided by the gesture object . Such as through TapGesture Object's onAction Event response click event .

// Gesture events 
      .gesture(
      PanGesture()
        .onActionStart((event: GestureEvent) => {
          console.info('Pan start')
        })
        .onActionUpdate((event: GestureEvent) => {
          // console.log(typeof `${this.offsetX}`);
        })
        .onActionEnd((event: GestureEvent) => {
          console.info('Pan end')
          this.offsetX = event.offsetX
          console.log(`${this.offsetX}`);
          if (Number(this.offsetX) > 60) {
            this.bgc = "#d94838"
            this.isSlide = true
             //  Use the timer to turn off the sliding state 
            this.closeISettimeOut();
          }
        })
      )

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

When the response event is over , Turn off the timer to turn off the slide , Reset effect .

// off timer  
  closeISettimeOut() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
    this.timer = setTimeout(() => {
      this.isSlide = false;
      this.bgc = "rgba(255,255,255,0.30)"
    }, 2000)
  }

       1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

positionInfoDialog Components

The function point ： Ask if you want to get the geographic location automatically , If continue , The current geographical location is displayed , If you cancel, close the pop-up box , Displays the initial value

@Component
export default struct PositionInfoDialog {
 //  there @Link It is mainly used to transfer data between components 
  @Link isShowDialog: boolean
  @Link userPosition: string

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Column() {
        Text(" Automatically get location information service ")
          .height(100)
          .fontSize(28)
          .fontWeight(500)
          .width("100%")
      }

      Column() {
        Text(" To help you better initiate help , When entering the emergency call , The system will automatically get your location information , And displayed on the top of the cleanser . Click the location information to jump to the third-party map application .")
          .fontSize(16)
          .lineHeight(28)
          .letterSpacing(2)
          .margin({ bottom: 10 })
          .fontColor("rgba(0,0,0,0.90)")
        Text(" This service needs to be connected to the network and call your location permission . In an emergency call , Relevant permissions will remain open . Whether or not to continue ?")
          .fontSize(16)
          .lineHeight(28)
          .letterSpacing(2)
          .fontColor("rgba(0,0,0,0.90)")
      }.height(220)

      Row() {
        Button(' Cancel ', { type: ButtonType.Normal, stateEffect: true })
          .width(150)
          .backgroundColor("#fff")
          .fontColor("#0a59f7")
          .fontSize(30)
          .onClick(() => {
            this.isShowDialog = false
          })

        Button(' continue ', { type: ButtonType.Normal, stateEffect: true })
          .width(150)
          .backgroundColor("#fff")
          .fontColor("#0a59f7")
          .fontSize(30)
          .onClick(() => {
            if (this.userPosition) {
              this.userPosition=" Shenzhen, Guangdong Province "
              this.isShowDialog = false
            }
          })
      }
    }
    .padding({ left: 14, right: 14, bottom: 20 })
    .margin({ bottom: 40 })
    .width("96%")
    .height(360)
    .backgroundColor("#fff")
    .borderRadius(24)
  }
}

     1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

summary

This article is just a rough use of ArkUI Simple layout of the page and interaction of events , It does not involve too complex logical function business .
Hongmeng still has a long way to go , Youth is just right , The story is not over , And we are on the way of exploration . If you want to learn more about Hongmeng Ecology , You can refer to ： ArkUI

Project source code

https://gitee.com/chen_longjia/ark-ui-emergency

For more original content, please pay attention to ： China soft International HarmonyOS Technical team

Beginner to master 、 Skills to cases , Systematic sharing HarmonyOS Development technology , Welcome to contribute and subscribe , Let's move forward hand in hand to build Hongmeng ecology .

Want to know more about Hongmeng , Please visit ：

51CTO Hongmeng technology community jointly built with Huawei officials

https://harmonyos.51cto.com/#bkwz

# The Chinese New Year keeps changing #HarmonyOS-ETS Emergency dialing _javascript_03