#星光计划2.0# HarmonyOS 项目实战之通讯录Demo(JS) 原创 精华
作者:彭为杰
【本文正在参与51CTO HarmonyOS技术社区创作者激励计划-星光计划2.0】
1 简介
通讯录demo主要分为联系人界面、设置紧急联系人、服务卡片3个模块,分为Java
和JS
两个版本,本篇主要讲解用尽可能的用纯JS
去实现,实在无法实现的地方采用JS
与Java
结合。
1.1 原型
感兴趣的小伙伴,可以自己根据原型效果自己尝试着去实现【通讯录demo简易原型】
![]() |
![]() |
![]() |
---|
1.2 场景延伸
通过学习与练习本demo,可以延伸至以下场景
![]() |
![]() |
![]() |
---|
2 功能开发
2.1 联系人列表
2.1.1 实现效果
2.1.2 核心代码
参考:基于JS扩展的类Web开发范式-组件-容器组件-list
- 关键属性 indexer=“true”
2.2 三方跳转
2.2.1 实现效果
2.2.2 js和java通信
js
打开三方应用目前还不知道如何操作,我们通过js
调java
方法来实现跳转。
JS LocalParticleAbility
机制请看官方链接:API 6
开始支持
参考:JS LocalParticleAbility机制-概述
通过js
获取到java
接口
java
实现
LocalParticleAbility
需要 register
与 deregister
2.2.3 拨打电话与发送短信
2.3 紧急联系人
2.3.1 实现效果
2.3.2 js数据存储
js
关系型数据库: 优先用关系型数据库,发现 JS
从API Version 7
开始支持。
js
轻量级存储:
① 它是key-value的存储的方法,从 API Version 6
开始支持;
参考:数据管理-轻量级存储
② 麻烦的是:每次存数据前,需要取一次,再新增数据;
在实现服务卡片更新信息时,需要动态的更新数据,而java
的轻量级存储与JS
存储的不是同一目录,目录改成一致程序出错,最终只能采用js
与java
通信,由java
侧统一完成数据新增与插入。
2.3.3 java数据存储实现
java
代码:
js
代码:
2.4 js服务卡片
2.4.1 实现效果
2.4.2 创建卡片模板
2.4.3 卡片数据绑定
2.4.4 事件处理
call 就是前面的播打电话的方法
3 注意事项
Demo还有很多需要完善的地方
- 删除时,索引不会被删除;
-
索引想要自定义样式,目前实现不了;
-
运行在api为7的手机的bug,一开始莫名的#显示;
-
纯js实现一个应用,目前还是行不通;
-
js官方文档上,有些不是很完善和稳定,对入门选手极其不友好;
4 总结
有不对或者更优的处理技术方案请多多指教,共同学习,共同进步。
代码地址: https://gitee.com/guangdong-wangduoyu/addresslistdemo
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
开鸿老师对鸿蒙的热情还是一如既往的高,感谢老师分享
哈哈哈,还有更多的内容,感谢关注。