基于JS扩展的类Web开发范式-电子发烧友网

通讯录 demo 主要分为联系人界面、设置紧急联系人、服务卡片 3 个模块，分为 Java 和 JS 两个版本，本篇主要讲解用尽可能的用纯 JS 去实现，实在无法实现的地方采用 JS 与 Java 结合。

感兴趣的小伙伴，可以自己根据原型效果自己尝试着去实现通讯录 demo 简易原型：

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

通过学习与练习本 demo，可以延伸至以下场景：

功能开发

①联系人列表

实现效果：

核心代码参考《基于 JS 扩展的类 Web 开发范式-组件-容器组件-list》：

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

关键属性 indexer=“true”：

 





{{$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技术社区】欢迎添加关注！文章转载请注明出处。

审核编辑：彭菁

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。举报投诉

JAVA

JAVA

+关注

关注
19

文章
2903

浏览量
102966
数据库

数据库

+关注

关注
7

文章
3583

浏览量
63338
容器

容器

+关注

关注
0

文章
479

浏览量
21874

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

文章出处：【微信号：gh_834c4b3d87fe，微信公众号：OpenHarmony技术社区】欢迎添加关注！文章转载请注明出处。

鸿蒙ArkTS的起源和简介

者生态，语言也比较中立友好，有相应的标准组织可以逐步演进，JS/TS语言成了比较自然的选择。以JS/TS为基础，在开发框架的维度，我们做了如下的架构演进设计：通过基于JS

发表于 01-16 16:23

鸿蒙原生应用元服务开发-WebGL网页图形库开发接口说明

一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理，比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web

发表于 03-11 15:51

HarmonyOS应用开发-JS相关整体梳理

：基于JS扩展的类Web开发范式、基于TS扩展的声明

发表于 11-29 10:44

HarmonyOS API Version 7版本特性说明

HDC2021上正式推出了ArkUI 3.0开发框架，在原有基于JS扩展的类Web开发

发表于 11-30 15:19

HarmonyOS API Version 7版本特性说明

HDC2021上正式推出了ArkUI 3.0开发框架，在原有基于JS扩展的类Web开发

发表于 12-01 10:35

HarmonyOS-API7相对API6差异主要变更内容

JS UI正式命名为ArkUI，并在原有基于JS扩展的类Web开发

发表于 02-15 14:35

OpenHarmony 应用开发快速入门

）。方舟开发框架可为开发者提供应用UI开发所必须的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等等。方舟开发框架针对不同目的和技术背景的

发表于 05-06 16:03

开启OpenHarmony应用开发之旅

，提升开发效率。API参考API参考提供了OpenHarmony全量组件和接口的参考文档，可以帮助开发者快速查找到指定接口的详细描述和调用方法。内容包括：组件参考（基于JS扩展的

发表于 05-12 13:49

OpenHarmony快速入门及开发应用所必备的基础知识

）。方舟开发框架可为开发者提供应用UI开发所必须的能力，比如多种组件、布局计算、动画能力、UI交互、绘制等等。方舟开发框架针对不同目的和技术背景的开

发表于 05-12 14:11

浅析eTS的起源和演进

者生态，语言也比较中立友好，有相应的标准组织可以逐步演进，JS/TS语言成了比较自然的选择。以JS/TS为基础，在开发框架的维度，我们做了如下的架构演进设计：通过基于JS

发表于 07-14 11:04

【开发样例】用JS写一个OpenHarmony拼图小游戏

、关键代码解读拼图游戏代码解读四、参考链接OpenHarmony基于JS扩展的类Web开发范式O

发表于 07-29 14:25

使用FeatureAbility模块启动其他Ability

，用于呈现特定信息的入口界面。JS/eTS语言是方舟开发框架(ArkUI)为开发者开发应用程序提供的两种开发

发表于 09-02 15:04

HarmonyOS/OpenHarmony应用开发-类Web开发范式

兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式

发表于 01-18 19:15

OpenHarmony应用开发-ArkUI方舟开发框架简析

，方舟开发框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发

发表于 04-23 09:35

基于ETS开发范式制作Loading组件

最近刚接触基于 OpenHarmony 开源框架的应用开发，特别是基于 JS/ETS 开发范式。

发表于 04-12 08:56 •1101次阅读

搜索历史

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

评论

鸿蒙ArkTS的起源和简介

鸿蒙原生应用元服务开发-WebGL网页图形库开发接口说明

HarmonyOS应用开发-JS相关整体梳理

HarmonyOS API Version 7版本特性说明

HarmonyOS API Version 7版本特性说明

HarmonyOS-API7相对API6差异主要变更内容

OpenHarmony 应用开发快速入门

开启OpenHarmony应用开发之旅

OpenHarmony快速入门及开发应用所必备的基础知识

浅析eTS的起源和演进

【开发样例】用JS写一个OpenHarmony拼图小游戏

使用FeatureAbility模块启动其他Ability

HarmonyOS/OpenHarmony应用开发-类Web开发范式

OpenHarmony应用开发-ArkUI方舟开发框架简析

基于ETS开发范式制作Loading组件