[文章]基于鸿蒙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 = 0
        this.listArr = []
        return
      }
      return
    })
  }

  //拨打电话
  callPhone(currentNum:string):void {
    let isP = call.hasVoiceCapability();
    console.log(`hasVoiceCapability: ${JSON.stringify(isP)}`);
    if (isP){
      this.isObserver = true
      call.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 = false
          this.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. 导入声明：

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