HarmonyOS 鸿蒙Next电话拨打
HarmonyOS 鸿蒙Next电话拨打
找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17
关于HarmonyOS 鸿蒙Next电话拨打的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。
一、介绍
基于鸿蒙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: ${<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->${<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) => { 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(()=><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(() => { 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(()=>{</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) => 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) => { 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 鸿蒙Next电话拨打的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
找HarmonyOS工作还需要会Flutter技术的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17
