HarmonyOS NEXT 体验电话拨打

一、介绍
基于鸿蒙Next模拟电话通讯录，可以拨打电话，删除电话等
二、场景需求
客户服务、业务咨询、回访处理、沟通交流、信息交流等等

三、业务步骤
第一步：点击拨打点电话，先判断设备是否具备通讯能力。
第二部：如果具备通讯能力，将跳转至拨号页面
第三步：拨打电话即可
四、效果展示

五：代码展示：

import promptAction from '@ohos.promptAction'
import router from '@ohos.router'
import call from '@ohos.telephony.call';
import observer from '@ohos.telephony.observer';
import { listData,dataType} from "../common/phoneNumData"@Entry
@Component
struct contactsPage {@State listArr: dataType[] = listData //联系人数据@State isObserver: boolean = false // 是否拨打电话aboutToAppear(){}@Builder setMenu() {Menu() {MenuItem({ startIcon: $r("app.media.ic_public_delete"), content: "删除全部" }).onClick(()=>this.delListData())}}//删除全部电话数据delListData():void {promptAction.showDialog({message:"数据不可恢复，确认全部删除？",buttons:[{text:"否",color:"#191919"},{text:"是",color:"red"}]}).then((idx)=>{if (idx.index == 1) {listData.length = 0this.listArr = []return}return})}//拨打电话callPhone(currentNum:string):void {let isP = call.hasVoiceCapability();console.log(`hasVoiceCapability: ${JSON.stringify(isP)}`);if (isP){this.isObserver = truecall.makeCall(currentNum, err => {console.log(`makeCall callback: err->${JSON.stringify(err)}`);});}else {promptAction.showToast({message:"当前设备不支持通话"})}}//监听通话状态listenTel(){// 订阅通话业务状态变化if (this.isObserver) {observer.on("callStateChange", (data) => {if (data.state == 0||data.state == -1) {this.isObserver = falsethis.listenOff() //取消订阅状态}console.log("call state change, data is:" + JSON.stringify(data.state));});}}listenOff(){observer.off('callStateChange');}build() {Column() {Row() {Text(this.listArr.length.toString() + "个联系人").fontSize(20).fontColor(0x0091FF).height(26)Blank()Image($r('app.media.ic_public_add')).width(24).height(24).margin({right:10}).onClick(() => {router.pushUrl({url: "viewPhone/addContactPage"})})Image($r('app.media.ic_public_more')).width(24).height(24).bindMenu(this.setMenu)}.width("100%").height(40).padding({ left: 15, right: 10 })List() {if (this.listArr.length != 0) {ForEach(this.listArr, (item: dataType, index: number) => {ListItem() {Row() {Row(){if (item.phoneName.length ==11) {Image($r('app.media.ic_public_contacts_filled')).width(32).height(32).margin({ left: 15, right: 10 })}else {Column(){Text(item.phoneName.charAt(0)).fontColor(0xffffff)}.width(36).height(36).borderRadius(20).backgroundColor(0x999999).margin({ left: 15, right: 10 }).justifyContent(FlexAlign.Center)}Text(item.phoneName).height(60).fontSize(20).textAlign(TextAlign.Center)}.width("74%").stateStyles({pressed: {.backgroundColor(0xdfdfdf)},normal: {.backgroundColor(0xFFFFFF)}})Blank()Row(){Text("|").height(30).fontSize(18).textAlign(TextAlign.Center).borderRadius(4)Text("拨打").height(30).textAlign(TextAlign.Center).borderRadius(4).margin({  left: 5 })Image($r('app.media.ic_contacts_set_aside_filled')).width(16).height(16).margin({  right: 15,left:4 })}.height(60).justifyContent(FlexAlign.Center).onClick(()=>this.callPhone(item.phoneNum)).stateStyles({pressed: {.backgroundColor(0xdfdfdf)},normal: {.backgroundColor(0xFFFFFF)}})}.width('100%').backgroundColor(0xFFFFFF).onClick(() => {router.pushUrl({url:"viewPhone/contactDetailsPage",params:{phoneName:item.phoneName,phoneNum:item.phoneNum,notesInfo:item.notesInfo,companyName:item.companyName,idx:index}})})// .gesture(//   LongPressGesture({repeat:false,fingers:1,duration:1000})//     .onAction(()=>{//       this.delMenu()//     })// )}}, (item:string) => item)}else {ListItem(){Column(){Text("暂无联系人").fontColor(24)}.width("100%").height("50%").justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}}}.padding({ top: 15 }).listDirection(Axis.Vertical) // 排列方向.divider({ strokeWidth: 2, color: 0xeeeeee, startMargin: 0, endMargin: 0 }) // 每行之间的分界线.edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果.onScrollIndex((firstIndex: number, lastIndex: number) => {console.info('first' + firstIndex)console.info('last' + lastIndex)}).width('100%')}.width('100%').height('100%').backgroundColor(0xeeeeee).padding({ top: 5 })}
}

六、代码结构及原理：
1.整体结构：
使用了ArkTS的装饰器语法，如@Entry和@Component组件。使用了ArkTS的渲染语法if/else等
2.状态管理：
组件使用@State装饰器定义了几个响应式状态变量,
使用了如@Builder 装饰器自定义了组件

3.样式和布局：
整个界面使用Column布局，将各个元素垂直排列。
使用Row布局来组织水平方向的元素，如拨打按钮。
应用了一些通用样式，如字体大小、颜色、边距等，以确保界面的一致性和美观性。
使用.backgroundColor(0xeeeeee)作为整个面板的背景色

4. 导入声明：
代码开始部分导入了必要的常量、类型和函数。这包括背景颜色常量、文档大小相关类型、