通訊錄 demo 主要分為聯(lián)系人界面、設(shè)置緊急聯(lián)系人、服務(wù)卡片 3 個(gè)模塊,分為 Java 和 JS 兩個(gè)版本,本篇主要講解用盡可能的用純 JS 去實(shí)現(xiàn),實(shí)在無(wú)法實(shí)現(xiàn)的地方采用 JS 與 Java 結(jié)合。
感興趣的小伙伴,可以自己根據(jù)原型效果自己嘗試著去實(shí)現(xiàn)通訊錄 demo 簡(jiǎn)易原型:
https://modao.cc/app/56d61f79d8390a50dbfbd4c0f17fb8a6006692f1#screen=sku2aiuwknvl3jn通過(guò)學(xué)習(xí)與練習(xí)本 demo,可以延伸至以下場(chǎng)景:
功能開(kāi)發(fā)
①聯(lián)系人列表
實(shí)現(xiàn)效果:
核心代碼參考《基于 JS 擴(kuò)展的類 Web 開(kāi)發(fā)范式-組件-容器組件-list》:
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496
關(guān)鍵屬性 indexer=“true”:
{{$item.item_name}}
②三方跳轉(zhuǎn)
實(shí)現(xiàn)效果:
js 和 java 通信:js 打開(kāi)三方應(yīng)用目前還不知道如何操作,我們通過(guò) js 調(diào) java 方法來(lái)實(shí)現(xiàn)跳轉(zhuǎn)。
JS LocalParticleAbility 機(jī)制請(qǐng)看官方鏈接:API 6 開(kāi)始支持。
參考《JS LocalParticleAbility 機(jī)制-概述》:
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-localparticleability-overview-0000001064156060
通過(guò) js 獲取到 java 接口:
exportdefault{ data:{ javaInterface:{} }, onInit(){ console.log(TAG+";onInit())"); }, onShow(){ console.log(TAG+";onShow())"); // onInit生命周期中Java接口對(duì)象還未創(chuàng)建完成,請(qǐng)勿在onInit中調(diào)用。 this.javaInterface=createLocalParticleAbility('com.pvj.addresslistdemo.MyLocalParticleAbility'); } onClickPhone(){ this.javaInterface.doDial(this.item_phone) }, onClickMail(){ this.javaInterface.doMessage(this.item_phone) } }
java 實(shí)現(xiàn):
publicclassMyLocalParticleAbilityimplementsLocalParticleAbility{ privatestaticMyLocalParticleAbilityinstance; ContextapplicationContext; Contextcontext; privateMyLocalParticleAbility(Contextcontext){ this.context=context; this.applicationContext=context.getApplicationContext(); } publicstaticMyLocalParticleAbilitygetInstance(ContextapplicationContext){ if(instance==null){ instance=newMyLocalParticleAbility(applicationContext); } returninstance; } /** *跳轉(zhuǎn)系統(tǒng)撥打電話界面 */ publicvoiddoDial(StringdestinationNum){ ... } publicvoiddoMessage(Stringtelephone){ .... } }
LocalParticleAbility 需要 register 與 deregister。
publicclassMainAbilityextendsAceAbility{ @Override publicvoidonStart(Intentintent){ super.onStart(intent); .... MyLocalParticleAbility.getInstance(getContext()).register(this); } @Override publicvoidonStop(){ super.onStop(); MyLocalParticleAbility.getInstance(getContext()).deregister(this); } }
撥打電話與發(fā)送短信:
/** *跳轉(zhuǎn)系統(tǒng)撥打電話界面 */ publicvoiddoDial(StringdestinationNum){ Intentintent=newIntent(); Operationoperation=newIntent.OperationBuilder() .withAction(IntentConstants.ACTION_DIAL)//系統(tǒng)應(yīng)用撥號(hào)盤(pán) .withUri(Uri.parse("tel:"+destinationNum))//設(shè)置號(hào)碼 .withFlags(2) .build(); intent.setOperation(operation); //啟動(dòng)Ability context.startAbility(intent,10); } //發(fā)送短信 publicvoiddoMessage(Stringtelephone){ Intentintent=newIntent(); Operationoperation=newIntent.OperationBuilder() .withAction(IntentConstants.ACTION_SEND_SMS) .withUri(Uri.parse("smsto:"+telephone))//設(shè)置號(hào)碼 .withFlags(Intent.FLAG_NOT_OHOS_COMPONENT) .build(); intent.setOperation(operation); context.startAbility(intent,11); }
③緊急聯(lián)系人
實(shí)現(xiàn)效果:
js 數(shù)據(jù)存儲(chǔ):優(yōu)先用關(guān)系型數(shù)據(jù)庫(kù),發(fā)現(xiàn) JS 從 API Version 7 開(kāi)始支持。
js 輕量級(jí)存儲(chǔ):它是 key-value 的存儲(chǔ)的方法,從 API Version 6 開(kāi)始支持。 參考《數(shù)據(jù)管理-輕量級(jí)存儲(chǔ)》:
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-data-storage-0000001117163542麻煩的是:每次存數(shù)據(jù)前,需要取一次,再新增數(shù)據(jù);在實(shí)現(xiàn)服務(wù)卡片更新信息時(shí),需要?jiǎng)討B(tài)的更新數(shù)據(jù)。
而 java 的輕量級(jí)存儲(chǔ)與 JS 存儲(chǔ)的不是同一目錄,目錄改成一致程序出錯(cuò),最終只能采用 js 與 java 通信,由 java 側(cè)統(tǒng)一完成數(shù)據(jù)新增與插入。
java 數(shù)據(jù)存儲(chǔ)實(shí)現(xiàn),java 代碼如下:
publicclassMyLocalParticleAbilityimplementsLocalParticleAbility{ privatestaticMyLocalParticleAbilityinstance; privatestaticfinalHiLogLabelTAG=newHiLogLabel(HiLog.DEBUG,0x0,MyLocalParticleAbility.class.getName()); Preferencespreferences; publicstaticfinalStringKEY="key_list"; ContextapplicationContext; Contextcontext; privateMyLocalParticleAbility(Contextcontext){ this.context=context; this.applicationContext=context.getApplicationContext(); DatabaseHelperdatabaseHelper=newDatabaseHelper(applicationContext); StringfileName="main_list.xml"; // fileName表示文件名,其取值不能為空,也不能包含路徑,默認(rèn)存儲(chǔ)目錄可以通過(guò)context.getPreferencesDir()獲取。 preferences=databaseHelper.getPreferences(fileName); } publicstaticMyLocalParticleAbilitygetInstance(ContextapplicationContext){ if(instance==null){ instance=newMyLocalParticleAbility(applicationContext); } returninstance; } publicStringgetContactPersonList(){ // context入?yún)㈩愋蜑閛hos.app.Context。 StringpreferencesString=preferences.getString(KEY,""); HiLog.info(TAG,"getContactPersonListpreferencesString:"+preferencesString); returnpreferencesString; } publicvoidaddContactPersonList(Stringcontent){ HiLog.info(TAG,"addContactPersonListcontent:"+content); preferences.putString(KEY,content); preferences.flushSync(); } }
js 代碼:
importpromptfrom'@system.prompt'; onItemLongPress(item){ console.log(TAG+";onItemLongPress:"+item.item_name); letTHIS=this; //點(diǎn)擊刪除時(shí)彈出對(duì)話框 prompt.showDialog({ title:"操作提示", message:"添加"+item.item_name+"為緊急聯(lián)系人嗎?", buttons:[{ "text":"確定", "color":"" }, { "text":"取消", "color":"" }], success:function(data){ if(data.index==0){ THIS.addContactPersonList(item); } } }); } asyncaddContactPersonList(item){ letcontent=awaitthis.getContactPersonList(); console.info(TAG+"addContactPersonListcontent:"+content); letlist=[] if(content!=""){ list=JSON.parse(content); } list.push(item); lettemp=JSON.stringify(list); console.info(TAG+"addContactPersonListtemp:"+temp); this.javaInterface.addContactPersonList(temp).then(); returntrue //store.putSync(key,temp); }, asyncgetContactPersonList(){ letret=awaitthis.javaInterface.getContactPersonList() console.info(TAG+"getContactPersonListret:"+ret); returnret }
④js 服務(wù)卡片
實(shí)現(xiàn)效果:
創(chuàng)建卡片模板:
卡片數(shù)據(jù)綁定:
publicProviderFormInfobindFormData(longformId){ HiLog.info(TAG,"bindformdata"); ZSONObjectzsonObject=newZSONObject(); StringcontactPersonList=MyLocalParticleAbility.getInstance(context.getApplicationContext()).getContactPersonList(); JSONArrayjsonArray=JSON.parseArray(contactPersonList); for(inti=0;i
事件處理:
{ "data":{ "appName":"緊急聯(lián)系人", "contactPersonList":"", "titleText":"Title", "contentText":"Introduction", "titleText1":"", "contentText1":"", "actionName1":"Action1", "actionName2":"Action2" }, "actions":{ "routerEvent":{ "action":"router", "abilityName":"com.pvj.addresslistdemo.MainAbility", "params":{ "message":"weather" } }, "callEvent1":{ "action":"message", "params":{ "mAction":"callEvent1" } }, "callEvent2":{ "action":"message", "params":{ "mAction":"callEvent2"http:// } } } }
call 就是前面的播打電話的方法:
@Override publicvoidonTriggerFormEvent(longformId,Stringmessage){ HiLog.info(TAG,"handlecardclickevent."+message); ZSONObjectzsonObject=ZSONObject.stringToZSON(message); //Dosomethinghereafterreceivethemessagefromjscard ZSONObjectresult=newZSONObject(); switch(zsonObject.getString("mAction")){ case"callEvent1": call(0); break; case"callEvent2": call(1); break; } }
注意事項(xiàng)
Demo 還有很多需要完善的地方。
①刪除時(shí),索引不會(huì)被刪除。
②索引想要自定義樣式,目前實(shí)現(xiàn)不了。
③運(yùn)行在 api 為 7 的手機(jī)的 bug,一開(kāi)始莫名的#顯示。
④純js 實(shí)現(xiàn)一個(gè)應(yīng)用,目前還是行不通。 ⑤js 官方文檔上,有些不是很完善和穩(wěn)定,對(duì)入門(mén)選手極其不友好。
總結(jié)
有不對(duì)或者更優(yōu)的處理技術(shù)方案請(qǐng)多多指教,共同學(xué)習(xí),共同進(jìn)步。
代碼地址:
https://gitee.com/guangdong-wangduoyu/addresslistdemo
原文標(biāo)題:剛出爐的鴻蒙通訊錄Demo!
文章出處:【微信公眾號(hào):HarmonyOS技術(shù)社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
審核編輯:彭菁
-
JAVA
+關(guān)注
關(guān)注
19文章
2975瀏覽量
105197 -
數(shù)據(jù)庫(kù)
+關(guān)注
關(guān)注
7文章
3851瀏覽量
64717 -
容器
+關(guān)注
關(guān)注
0文章
499瀏覽量
22130
原文標(biāo)題:剛出爐的鴻蒙通訊錄Demo!
文章出處:【微信號(hào):gh_834c4b3d87fe,微信公眾號(hào):OpenHarmony技術(shù)社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
鴻蒙ArkTS的起源和簡(jiǎn)介
HarmonyOS應(yīng)用開(kāi)發(fā)-JS相關(guān)整體梳理
HarmonyOS API Version 7版本特性說(shuō)明
HarmonyOS API Version 7版本特性說(shuō)明
HarmonyOS-API7相對(duì)API6差異主要變更內(nèi)容
OpenHarmony 應(yīng)用開(kāi)發(fā)快速入門(mén)
開(kāi)啟OpenHarmony應(yīng)用開(kāi)發(fā)之旅
OpenHarmony快速入門(mén)及開(kāi)發(fā)應(yīng)用所必備的基礎(chǔ)知識(shí)
淺析eTS的起源和演進(jìn)
【開(kāi)發(fā)樣例】用JS寫(xiě)一個(gè)OpenHarmony拼圖小游戲
使用FeatureAbility模塊啟動(dòng)其他Ability
HarmonyOS/OpenHarmony應(yīng)用開(kāi)發(fā)-類Web開(kāi)發(fā)范式
OpenHarmony應(yīng)用開(kāi)發(fā)-ArkUI方舟開(kāi)發(fā)框架簡(jiǎn)析
基于ETS開(kāi)發(fā)范式制作Loading組件
鴻蒙OS元服務(wù)開(kāi)發(fā)說(shuō)明:【W(wǎng)ebGL網(wǎng)頁(yè)圖形庫(kù)開(kāi)發(fā)接口】
![鴻蒙OS元服務(wù)<b class='flag-5'>開(kāi)發(fā)</b>說(shuō)明:【W(wǎng)ebGL網(wǎng)頁(yè)圖形庫(kù)<b class='flag-5'>開(kāi)發(fā)</b>接口】](https://file1.elecfans.com/web2/M00/C5/D1/wKgZomYChGOAUaiiAADe1d8SeRY102.jpg)
評(píng)論