基于JS扩展的类Web开发范式

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

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

 





{{$item.item_name}}

②三方跳转

实现效果：

js 和 java 通信：js 打开三方应用目前还不知道如何操作，我们通过 js 调 java 方法来实现跳转。

JS LocalParticleAbility 机制请看官方链接：API 6 开始支持。

参考《JS LocalParticleAbility 机制-概述》：

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接口对象还未创建完成，请勿在onInit中调用。
this.javaInterface=createLocalParticleAbility('com.pvj.addresslistdemo.MyLocalParticleAbility');
}

onClickPhone(){
this.javaInterface.doDial(this.item_phone)
},
onClickMail(){
this.javaInterface.doMessage(this.item_phone)
}
}

java 实现：

publicclassMyLocalParticleAbilityimplementsLocalParticleAbility{
privatestaticMyLocalParticleAbilityinstance;
ContextapplicationContext;
Contextcontext;

privateMyLocalParticleAbility(Contextcontext){
this.context=context;
this.applicationContext=context.getApplicationContext();
}

publicstaticMyLocalParticleAbilitygetInstance(ContextapplicationContext){
if(instance==null){
instance=newMyLocalParticleAbility(applicationContext);

}
returninstance;
}

/**
*跳转系统拨打电话界面
*/
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);
}
}

拨打电话与发送短信：

/**
*跳转系统拨打电话界面
*/
publicvoiddoDial(StringdestinationNum){
Intentintent=newIntent();
Operationoperation=newIntent.OperationBuilder()
.withAction(IntentConstants.ACTION_DIAL)//系统应用拨号盘
.withUri(Uri.parse("tel:"+destinationNum))//设置号码
.withFlags(2)
.build();
intent.setOperation(operation);
//启动Ability
context.startAbility(intent,10);
}

//发送短信
publicvoiddoMessage(Stringtelephone){
Intentintent=newIntent();
Operationoperation=newIntent.OperationBuilder()
.withAction(IntentConstants.ACTION_SEND_SMS)
.withUri(Uri.parse("smsto:"+telephone))//设置号码
.withFlags(Intent.FLAG_NOT_OHOS_COMPONENT)
.build();
intent.setOperation(operation);
context.startAbility(intent,11);
}

③紧急联系人

实现效果：

js 数据存储：优先用关系型数据库，发现 JS 从 API Version 7 开始支持。

js 轻量级存储：它是 key-value 的存储的方法，从 API Version 6 开始支持。 参考《数据管理-轻量级存储》：

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

而 java 的轻量级存储与 JS 存储的不是同一目录，目录改成一致程序出错，最终只能采用 js 与 java 通信，由 java 侧统一完成数据新增与插入。

java 数据存储实现，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表示文件名，其取值不能为空，也不能包含路径，默认存储目录可以通过context.getPreferencesDir()获取。
preferences=databaseHelper.getPreferences(fileName);
}


publicstaticMyLocalParticleAbilitygetInstance(ContextapplicationContext){
if(instance==null){
instance=newMyLocalParticleAbility(applicationContext);

}
returninstance;
}


publicStringgetContactPersonList(){
// context入参类型为ohos.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;
//点击删除时弹出对话框
prompt.showDialog({
title:"操作提示",
message:"添加"+item.item_name+"为紧急联系人吗?",
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 服务卡片

实现效果：

创建卡片模板：

卡片数据绑定：

publicProviderFormInfobindFormData(longformId){
HiLog.info(TAG,"bindformdata");
ZSONObjectzsonObject=newZSONObject();
StringcontactPersonList=MyLocalParticleAbility.getInstance(context.getApplicationContext()).getContactPersonList();
JSONArrayjsonArray=JSON.parseArray(contactPersonList);
for(inti=0;i< jsonArray.size(); i++) {
        String name = jsonArray.getJSONObject(i).getString("item_name");
        String phone = jsonArray.getJSONObject(i).getString("item_phone");
        if (i == 0) {
            zsonObject.put("titleText", name);
            zsonObject.put("contentText", phone);
        } else if (i == 1) {
            zsonObject.put("titleText1", name); 
            zsonObject.put("contentText1", phone); //传递的是string；是否支持其他类型？比如数组
        } else {
            break;
        }
        HiLog.info(TAG, "bind form data :" + jsonArray.getJSONObject(i).get("item_name"));
        HiLog.info(TAG, "bind form data :" + jsonArray.getJSONObject(i).get("item_phone"));
    }

    ProviderFormInfo providerFormInfo = new ProviderFormInfo();
    providerFormInfo.setJsBindingData(new FormBindingData(zsonObject));

    return providerFormInfo;
}

事件处理：

{
"data":{
"appName":"紧急联系人",
"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"//
}
}
}
}

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;
}
}

注意事项

Demo 还有很多需要完善的地方。

①删除时，索引不会被删除。

②索引想要自定义样式，目前实现不了。

③运行在 api 为 7 的手机的 bug，一开始莫名的#显示。

④纯js 实现一个应用，目前还是行不通。 ⑤js 官方文档上，有些不是很完善和稳定，对入门选手极其不友好。

总结

有不对或者更优的处理威廉希尔官方网站 方案请多多指教，共同学习，共同进步。

代码地址：

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

原文标题：刚出炉的鸿蒙通讯录Demo！

文章出处：【微信公众号：HarmonyOS威廉希尔官方网站 社区】欢迎添加关注！文章转载请注明出处。