创作

完善资料让更多小伙伴认识你,还能领取20积分哦, 立即完善>

3天内不再提示

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

gh_834c4b3d87fe 来源:HarmonyOS技术社区 作者:HarmonyOS技术社区 2022-01-04 14:52 次阅读

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

审核编辑:彭菁

原文标题:刚出炉的鸿蒙通讯录Demo!

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

收藏 人收藏

    评论

    相关推荐

    利用JAVA向Mysql插入一亿数量级数据—效率测评

    所以通过随机生成人的姓名、年龄、性别、电话、email、地址 ,向mysql数据库大量插入数据,便于....
    的头像 Android编程精选 发表于 05-24 11:13 286次 阅读

    jBrowserDriver基于WebKit无图形化浏览器

    ./oschina_soft/jbrowserdriver.zip
    发表于 05-23 11:25 6次 阅读
    jBrowserDriver基于WebKit无图形化浏览器

    MailOtto邮件工具

    ./oschina_soft/MailOtto.zip
    发表于 05-23 11:01 3次 阅读
    MailOtto邮件工具

    Mail Importer for Gmail邮件导入工具

    ./oschina_soft/mail-importer.zip
    发表于 05-23 10:58 3次 阅读
    Mail Importer for Gmail邮件导入工具

    WSCH鉴权内容检索系统

    ./oschina_soft/gitee-wsch.zip
    发表于 05-23 10:30 3次 阅读
    WSCH鉴权内容检索系统

    TextSearcher文本批量搜索工具

    ./oschina_soft/gitee-text-searcher.zip
    发表于 05-23 09:44 3次 阅读
    TextSearcher文本批量搜索工具

    第四家华为openGauss “商业发行版”太阳塔科技

    随着国产数据库能力不断提升,逐步抢占海外厂商优势领域份额。以Oracle、MySQL、SQLServ....
    的头像 话说科技 发表于 05-23 09:30 121次 阅读
    第四家华为openGauss “商业发行版”太阳塔科技

    Evalon4J Java接口文档生成工具

    ./oschina_soft/gitee-evalon4j.zip
    发表于 05-23 09:14 14次 阅读
    Evalon4J Java接口文档生成工具

    请问鸿蒙Java UI怎么设置全屏,无标题栏和导航栏?

    鸿蒙 JavaUI 怎么设置全屏,无标题栏和导航栏? ...
    发表于 05-20 11:04 740次 阅读

    JCrypTool开源的密码学学习平台

    ./oschina_soft/crypto.zip
    发表于 05-20 09:41 6次 阅读
    JCrypTool开源的密码学学习平台

    easyEncryption文件加密工具

    ./oschina_soft/gitee-encryptTool.zip
    发表于 05-20 09:39 4次 阅读
    easyEncryption文件加密工具

    CAT-Java加密与解密算法调用工具包

    ./oschina_soft/gitee-cat.zip
    发表于 05-20 09:35 9次 阅读
    CAT-Java加密与解密算法调用工具包

    FinalCrypt开源文件加密工具

    ./oschina_soft/FinalCrypt.zip
    发表于 05-20 09:34 3次 阅读
    FinalCrypt开源文件加密工具

    KeyFingerprintLooker java密钥指纹获取器

    ./oschina_soft/KeyFingerprintLooker.zip
    发表于 05-20 09:25 6次 阅读
    KeyFingerprintLooker java密钥指纹获取器

    firefox-jsterm Firefox插件

    ./oschina_soft/firefox-jsterm.zip
    发表于 05-19 16:32 8次 阅读
    firefox-jsterm Firefox插件

    table2sql把表格转成insert语句的Chrome扩展

    ./oschina_soft/table2sql.zip
    发表于 05-19 15:53 8次 阅读
    table2sql把表格转成insert语句的Chrome扩展

    Stetho Realm用于Stetho的Realm模块

    ./oschina_soft/stetho-realm.zip
    发表于 05-19 15:45 3次 阅读
    Stetho Realm用于Stetho的Realm模块

    浪潮分布式存储AS13000搭建血液病检测平台

    因分析、基因诊断、白血病分型、指导治疗、判断预后等领域已经有了成熟应用,而其中血液学已成为了此类现代....
    的头像 科技绿洲 发表于 05-19 15:17 764次 阅读

    DevEco Studio里的java UI框架有没有必要做拖拽式编程呢?

      DevEco Studio已经支持js UI框架拖拽式编程,你觉得java UI框架有没有必要做拖拽式编程呢? ...
    发表于 05-18 15:32 796次 阅读

    IBM推出纯软Datapower解决方案 客户能更好更快拓展API网关集群

     IBM曾有一个品牌理念,“智者乐见难题”。很多科技在数字化转型中的应用正是难题中来的,创造出真正的....
    的头像 科技绿洲 发表于 05-18 14:37 203次 阅读

    Doc View IDEA文档辅助插件

    ./oschina_soft/gitee-doc-view.zip
    发表于 05-18 14:22 9次 阅读
    Doc View IDEA文档辅助插件

    MrtfGitFlow4Idea分支管理插件

    ./oschina_soft/mrtf-git-flow-4idea.zip
    发表于 05-18 14:17 5次 阅读
    MrtfGitFlow4Idea分支管理插件

    Idea Javadocs2 IntelliJ IDEA插件

    ./oschina_soft/idea-javadocs2.zip
    发表于 05-18 14:13 3次 阅读
    Idea Javadocs2 IntelliJ IDEA插件

    ClearBom清除utf8Bom插件

    ./oschina_soft/ClearBom-IDEA-Plugin.zip
    发表于 05-18 11:42 5次 阅读
    ClearBom清除utf8Bom插件

    GGSDoc Intellij IDEA生成getset插件

    ./oschina_soft/GGSDoc.zip
    发表于 05-18 11:41 5次 阅读
    GGSDoc Intellij IDEA生成getset插件

    jd-eclipse Eclipse的Java反编译插件

    ./oschina_soft/jd-eclipse.zip
    发表于 05-17 10:07 16次 阅读
    jd-eclipse Eclipse的Java反编译插件

    SmartIM4IntelliJ在IDEA中使用QQ或微信聊天

    ./oschina_soft/SmartIM4IntelliJ.zip
    发表于 05-17 10:06 21次 阅读
    SmartIM4IntelliJ在IDEA中使用QQ或微信聊天

    Xsemantics Xtext的类型系统

    ./oschina_soft/xsemantics.zip
    发表于 05-17 10:04 7次 阅读
    Xsemantics Xtext的类型系统

    Eclipse aCute Eclipse的C#插件

    ./oschina_soft/aCute.zip
    发表于 05-17 10:02 10次 阅读
    Eclipse aCute Eclipse的C#插件

    Buildship Eclipse插件集合

    ./oschina_soft/buildship.zip
    发表于 05-17 10:01 20次 阅读
    Buildship Eclipse插件集合

    Xiliary Eclipse辅助库

    ./oschina_soft/xiliary.zip
    发表于 05-17 10:00 13次 阅读
    Xiliary Eclipse辅助库

    Eclipse 4 Chrome Theme Eclipse的Chrome风格主题

    ./oschina_soft/eclipse-themes.zip
    发表于 05-17 09:55 7次 阅读
    Eclipse 4 Chrome Theme Eclipse的Chrome风格主题

    run-jetty-run jetty eclipse插件

    ./oschina_soft/run-jetty-run.zip
    发表于 05-17 09:46 7次 阅读
    run-jetty-run jetty eclipse插件

    如何调用CH579里面的Touch-Key库?

    第一次调CH579里面的Touch-Key,用的TKY_CH579库,有没有哪位大神用过,教教我调试的时候从哪一步开始调起?为啥我算的充...
    发表于 05-17 06:50 116次 阅读

    SQL优化经历:从30248.271s到0.001s

    正常情况下是先join再进行where过滤,但是我们这里的情况,如果先join,将会有70w条数据发....
    的头像 数据分析与开发 发表于 05-16 15:25 254次 阅读

    树莓派通过java语言通过DHT11读取环境温湿度

    基于java云平台,在树莓派+dth11传感器下,远程读取温湿度数据。
    的头像 树莓派-java-物联网 发表于 05-16 15:16 3306次 阅读
    树莓派通过java语言通过DHT11读取环境温湿度

    Shipwright Kubernetes容器镜像构建框架

    ./oschina_soft/build.zip
    发表于 05-16 10:06 5次 阅读
    Shipwright Kubernetes容器镜像构建框架

    如何用低代码实现简单的页面跳转功能

    HUAWEI DevEco Studio(后文简称:IDE)自2020年9月首次发布以来,经10次迭....
    的头像 科技绿洲 发表于 05-16 09:47 186次 阅读
    如何用低代码实现简单的页面跳转功能

    Cloudeploy云应用智能化编排

    ./oschina_soft/gitee-Cloudeploy.zip
    发表于 05-16 09:46 12次 阅读
    Cloudeploy云应用智能化编排

    Curve分布式存储系统

    ./oschina_soft/curve.zip
    发表于 05-16 09:41 7次 阅读
    Curve分布式存储系统

    MicroProfile云原生微服务开发编程模型

    ./oschina_soft/microprofile.zip
    发表于 05-16 09:28 10次 阅读
    MicroProfile云原生微服务开发编程模型

    分布式锁的设计与实现

    今天跟大家探讨一下分布式锁的设计与实现。希望对大家有帮助,如果有不正确的地方,欢迎指出,一起学习,一....
    的头像 数据分析与开发 发表于 05-13 15:36 119次 阅读

    服务端高并发分布式架构最基础的概念

    系统中的多个模块在不同服务器上部署,即可称为分布式系统。如 Tomcat 和数据库分别部署在不同的服....
    的头像 Linux爱好者 发表于 05-13 14:45 145次 阅读

    拓林思发布基于openEuler企业级Linux操作系统

    近日,拓林思正式发布基于 openEuler 22.03 LTS 的企业级 Linux 操作系统,T....
    的头像 科技绿洲 发表于 05-13 11:53 301次 阅读

    Dockerizor Gradle插件

    ./oschina_soft/dockerizor.zip
    发表于 05-13 11:31 5次 阅读
    Dockerizor Gradle插件

    OpenDaylight软件定义网络框架

    ./oschina_soft/controller.zip
    发表于 05-13 10:51 17次 阅读
    OpenDaylight软件定义网络框架

    鸿蒙Java API中aafwk是什么概念?有什么用途?

    1、鸿蒙Java API中的说明中aafwk是什么概念?什么文档的缩写?用途是什么?如ohos.aafwk.ability 2、和ohos.accessibility....
    发表于 05-13 10:06 194次 阅读

    请问DevEco Studio如何通过JAVA代码为TEXT的文本增加删除线?

    如何通过JAVA代码为TEXT的文本增加删除线?
    发表于 05-13 09:58 255次 阅读

    Okteto Kubernetes应用开发工具

    ./oschina_soft/okteto.zip
    发表于 05-13 09:35 11次 阅读
    Okteto Kubernetes应用开发工具

    DevEco Studio编译提示Java Runtime错误的原因?如何处理?

    编译错误并提示: java.lang.UnsupportedClassVersionError: com/huawei/ohos/build/HarmonyAppPluginMain 已由更新版本...
    发表于 05-12 16:42 1392次 阅读

    flashDB TSDB数据库插入数据时报错是为什么?

    flashDB TSDB的get_time函数时返回的系统时间戳,在使用中出现我偶然错误的将RTC时间设置得比现在的时间要大很多,后面...
    发表于 05-12 16:14 2200次 阅读

    Atomic运行Docker容器的原型系统

    ./oschina_soft/atomic.zip
    发表于 05-12 14:28 6次 阅读
    Atomic运行Docker容器的原型系统

    Missing Container Metrics容器指标收集工具

    ./oschina_soft/missing-container-metrics.zip
    发表于 05-12 14:24 7次 阅读
    Missing Container Metrics容器指标收集工具

    isula-build容器镜像构建工具

    ./oschina_soft/gitee-isula-build.zip
    发表于 05-12 14:13 11次 阅读
    isula-build容器镜像构建工具

    Habitus Docke镜像的构建过程工具

    ./oschina_soft/habitus.zip
    发表于 05-12 11:31 16次 阅读
    Habitus Docke镜像的构建过程工具

    docker-sshd Docker容器的sshd代理

    ./oschina_soft/docker-sshd.zip
    发表于 05-12 11:13 14次 阅读
    docker-sshd Docker容器的sshd代理

    protected void onUpdateForm java语言设置onUpdateForm回调不会调用怎么解决?

    "isDefault": false, "scheduledUpdateTime": "15:32", "defaultDimension": "2*4", "name": "WeatherCard", "descrip...
    发表于 05-11 11:00 460次 阅读

    鸿蒙UI分割线的效果是怎么开发的?

    如题,用Java还是JavaScript?还是用布局文件解决? 例如每一项的分割线,按压后有按压的效果。 如果用Java或者可否给个参...
    发表于 05-10 11:09 955次 阅读

    求助!请问如何在JS UI项目里增加java UI页面?

    项目用的js UI,视频解码无法在js视频播放;想增加一个java UI的视频播放器? 或者视频编解码的其他解决方案? ...
    发表于 05-10 10:48 1173次 阅读