基于JS擴(kuò)展的類Web開發(fā)范式

https://modao.cc/app/56d61f79d8390a50dbfbd4c0f17fb8a6006692f1#screen=sku2aiuwknvl3jn

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-list-0000000000611496

 





{{$item.item_name}}

②三方跳轉(zhuǎn)

實(shí)現(xiàn)效果：

js 和 java 通信：js 打開三方應(yīng)用目前還不知道如何操作，我們通過 js 調(diào) java 方法來實(shí)現(xiàn)跳轉(zhuǎn)。

JS LocalParticleAbility 機(jī)制請看官方鏈接：API 6 開始支持。

參考《JS LocalParticleAbility 機(jī)制-概述》：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-localparticleability-overview-0000001064156060

通過 js 獲取到 java 接口：

exportdefault{
data:{
javaInterface:{}
},

onInit(){
console.log(TAG+";onInit())");
},

onShow(){
console.log(TAG+";onShow())");
// onInit生命周期中Java接口對象還未創(chuà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)用撥號盤
.withUri(Uri.parse("tel:"+destinationNum))//設(shè)置號碼
.withFlags(2)
.build();
intent.setOperation(operation);
//啟動Ability
context.startAbility(intent,10);
}

//發(fā)送短信
publicvoiddoMessage(Stringtelephone){
Intentintent=newIntent();
Operationoperation=newIntent.OperationBuilder()
.withAction(IntentConstants.ACTION_SEND_SMS)
.withUri(Uri.parse("smsto:"+telephone))//設(shè)置號碼
.withFlags(Intent.FLAG_NOT_OHOS_COMPONENT)
.build();
intent.setOperation(operation);
context.startAbility(intent,11);
}

③緊急聯(lián)系人

實(shí)現(xiàn)效果：

js 數(shù)據(jù)存儲：優(yōu)先用關(guān)系型數(shù)據(jù)庫，發(fā)現(xiàn) JS 從 API Version 7 開始支持。

js 輕量級存儲：它是 key-value 的存儲的方法，從 API Version 6 開始支持。 參考《數(shù)據(jù)管理-輕量級存儲》：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-data-storage-0000001117163542

而 java 的輕量級存儲與 JS 存儲的不是同一目錄，目錄改成一致程序出錯，最終只能采用 js 與 java 通信，由 java 側(cè)統(tǒng)一完成數(shù)據(jù)新增與插入。

java 數(shù)據(jù)存儲實(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)存儲目錄可以通過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)擊刪除時彈出對話框
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í)現(xiàn)不了。 

	③運(yùn)行在 api 為 7 的手機(jī)的 bug，一開始莫名的#顯示。

	④純js 實(shí)現(xiàn)一個應(yīng)用，目前還是行不通。  ⑤js 官方文檔上，有些不是很完善和穩(wěn)定，對入門選手極其不友好。  

	總結(jié)

	有不對或者更優(yōu)的處理技術(shù)方案請多多指教，共同學(xué)習(xí)，共同進(jìn)步。

	代碼地址：

	
https://gitee.com/guangdong-wangduoyu/addresslistdemo


	

	原文標(biāo)題：剛出爐的鴻蒙通訊錄Demo！

	文章出處：【微信公眾號：HarmonyOS技術(shù)社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請注明出處。

	審核編輯：彭菁