HarmonyOS 鸿蒙Next电话拨打

发布于 1周前 作者 eggper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next电话拨打
找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

关于HarmonyOS 鸿蒙Next电话拨打的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。

Harmonyos Next教程
2 回复

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

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

f44d07b023b56909d1e9697dd301119a901630.jpg

五：代码展示：

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: ${<span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.stringify(isP)});
if (isP){
this.isObserver = true
call.makeCall(currentNum, err => {
console.log(makeCall callback: err-&gt;${<span class="hljs-built_in"><span class="hljs-built_in">JSON</span></span>.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(<span class="hljs-string"><span class="hljs-string">'app.media.ic_public_more'</span></span>)).width(<span class="hljs-number"><span class="hljs-number">24</span></span>).height(<span class="hljs-number"><span class="hljs-number">24</span></span>)
      .bindMenu(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.setMenu)

  }.width(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
  .height(<span class="hljs-number"><span class="hljs-number">40</span></span>)
  .padding({ left: <span class="hljs-number"><span class="hljs-number">15</span></span>, right: <span class="hljs-number"><span class="hljs-number">10</span></span> })

  List() {
    <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listArr.length != <span class="hljs-number"><span class="hljs-number">0</span></span>) {
      ForEach(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.listArr, (item: dataType, index: number) =&gt; {
        ListItem() {
          Row() {
            Row(){
              <span class="hljs-keyword"><span class="hljs-keyword">if</span></span> (item.phoneName.length ==<span class="hljs-number"><span class="hljs-number">11</span></span>) {
                Image($r(<span class="hljs-string"><span class="hljs-string">'app.media.ic_public_contacts_filled'</span></span>)).width(<span class="hljs-number"><span class="hljs-number">32</span></span>).height(<span class="hljs-number"><span class="hljs-number">32</span></span>)
                  .margin({ left: <span class="hljs-number"><span class="hljs-number">15</span></span>, right: <span class="hljs-number"><span class="hljs-number">10</span></span> })
              }<span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
                Column(){
                  Text(item.phoneName.charAt(<span class="hljs-number"><span class="hljs-number">0</span></span>)).fontColor(<span class="hljs-number"><span class="hljs-number">0xffffff</span></span>)
                }.width(<span class="hljs-number"><span class="hljs-number">36</span></span>).height(<span class="hljs-number"><span class="hljs-number">36</span></span>)
                .borderRadius(<span class="hljs-number"><span class="hljs-number">20</span></span>)
                .backgroundColor(<span class="hljs-number"><span class="hljs-number">0x999999</span></span>)
                .margin({ left: <span class="hljs-number"><span class="hljs-number">15</span></span>, right: <span class="hljs-number"><span class="hljs-number">10</span></span> })
                .justifyContent(FlexAlign.Center)
              }

              Text(item.phoneName)
                .height(<span class="hljs-number"><span class="hljs-number">60</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">20</span></span>)
                .textAlign(TextAlign.Center)
            }.width(<span class="hljs-string"><span class="hljs-string">"74%"</span></span>)
            .stateStyles({
              pressed: {.backgroundColor(<span class="hljs-number"><span class="hljs-number">0xdfdfdf</span></span>)
              },
              normal: {.backgroundColor(<span class="hljs-number"><span class="hljs-number">0xFFFFFF</span></span>)
              }
            })
            Blank()
            Row(){
              Text(<span class="hljs-string"><span class="hljs-string">"|"</span></span>).height(<span class="hljs-number"><span class="hljs-number">30</span></span>)
                .fontSize(<span class="hljs-number"><span class="hljs-number">18</span></span>)
                .textAlign(TextAlign.Center)
                .borderRadius(<span class="hljs-number"><span class="hljs-number">4</span></span>)
              Text(<span class="hljs-string"><span class="hljs-string">"拨打"</span></span>).height(<span class="hljs-number"><span class="hljs-number">30</span></span>)
                .textAlign(TextAlign.Center)
                .borderRadius(<span class="hljs-number"><span class="hljs-number">4</span></span>)
                .margin({  left: <span class="hljs-number"><span class="hljs-number">5</span></span> })
              Image($r(<span class="hljs-string"><span class="hljs-string">'app.media.ic_contacts_set_aside_filled'</span></span>)).width(<span class="hljs-number"><span class="hljs-number">16</span></span>).height(<span class="hljs-number"><span class="hljs-number">16</span></span>)
                .margin({  right: <span class="hljs-number"><span class="hljs-number">15</span></span>,left:<span class="hljs-number"><span class="hljs-number">4</span></span> })
            }
            .height(<span class="hljs-number"><span class="hljs-number">60</span></span>)
            .justifyContent(FlexAlign.Center)
            .onClick(()=&gt;<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.callPhone(item.phoneNum))
            .stateStyles({
              pressed: {.backgroundColor(<span class="hljs-number"><span class="hljs-number">0xdfdfdf</span></span>)
              },
              normal: {.backgroundColor(<span class="hljs-number"><span class="hljs-number">0xFFFFFF</span></span>)
              }
            })

          }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
          .backgroundColor(<span class="hljs-number"><span class="hljs-number">0xFFFFFF</span></span>)
          .onClick(() =&gt; {
            router.pushUrl({
              url:<span class="hljs-string"><span class="hljs-string">"viewPhone/contactDetailsPage"</span></span>,
              params:{
                phoneName:item.phoneName,
                phoneNum:item.phoneNum,
                notesInfo:item.notesInfo,
                companyName:item.companyName,
                idx:index
              }
            })
          })
          <span class="hljs-comment"><span class="hljs-comment">// .gesture(</span></span>
          <span class="hljs-comment"><span class="hljs-comment">//   LongPressGesture({repeat:false,fingers:1,duration:1000})</span></span>
          <span class="hljs-comment"><span class="hljs-comment">//     .onAction(()=&gt;{</span></span>
          <span class="hljs-comment"><span class="hljs-comment">//       this.delMenu()</span></span>
          <span class="hljs-comment"><span class="hljs-comment">//     })</span></span>
          <span class="hljs-comment"><span class="hljs-comment">// )</span></span>
        }
      }, (item:string) =&gt; item)

    }<span class="hljs-keyword"><span class="hljs-keyword">else</span></span> {
      ListItem(){
        Column(){
          Text(<span class="hljs-string"><span class="hljs-string">"暂无联系人"</span></span>).fontColor(<span class="hljs-number"><span class="hljs-number">24</span></span>)
        }.width(<span class="hljs-string"><span class="hljs-string">"100%"</span></span>)
        .height(<span class="hljs-string"><span class="hljs-string">"50%"</span></span>)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
      }
    }
  }
  .padding({ top: <span class="hljs-number"><span class="hljs-number">15</span></span> })
  .listDirection(Axis.Vertical) <span class="hljs-comment"><span class="hljs-comment">// 排列方向</span></span>
  .divider({ strokeWidth: <span class="hljs-number"><span class="hljs-number">2</span></span>, color: <span class="hljs-number"><span class="hljs-number">0xeeeeee</span></span>, startMargin: <span class="hljs-number"><span class="hljs-number">0</span></span>, endMargin: <span class="hljs-number"><span class="hljs-number">0</span></span> }) <span class="hljs-comment"><span class="hljs-comment">// 每行之间的分界线</span></span>
  .edgeEffect(EdgeEffect.Spring) <span class="hljs-comment"><span class="hljs-comment">// 滑动到边缘无效果</span></span>
  .onScrollIndex((firstIndex: number, lastIndex: number) =&gt; {
    console.info(<span class="hljs-string"><span class="hljs-string">'first'</span></span> + firstIndex)
    console.info(<span class="hljs-string"><span class="hljs-string">'last'</span></span> + lastIndex)
  })
  .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)

}
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.backgroundColor(<span class="hljs-number"><span class="hljs-number">0xeeeeee</span></span>)
.padding({ top: <span class="hljs-number"><span class="hljs-number">5</span></span> })

}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

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

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

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

找HarmonyOS工作还需要会Flutter技术的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

回到顶部