基于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 接口：
export default {    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 实现：
public class mylocalparticleability implements localparticleability {    private static mylocalparticleability instance;    context applicationcontext;    context context;    private mylocalparticleability(context context) {        this.context = context;        this.applicationcontext = context.getapplicationcontext();    }    public static mylocalparticleability getinstance(context applicationcontext) {        if (instance == null) {            instance = new mylocalparticleability(applicationcontext);        }        return instance;    }    /**     * 跳转系统拨打电话界面     */    public void dodial(string destinationnum) {      ...    }    public void domessage(string telephone) {      ....    }}
localparticleability 需要 register 与 deregister。
public class mainability extends aceability {    @override    public void onstart(intent intent) {        super.onstart(intent);        ....        mylocalparticleability.getinstance(getcontext()).register(this);    }    @override    public void onstop() {        super.onstop();        mylocalparticleability.getinstance(getcontext()).deregister(this);    } }
拨打电话与发送短信：
/** * 跳转系统拨打电话界面 */public void dodial(string destinationnum) {    intent intent = new intent();    operation operation = new intent.operationbuilder()        .withaction(intentconstants.action_dial) // 系统应用拨号盘        .withuri(uri.parse(tel: + destinationnum)) // 设置号码        .withflags(2)        .build();    intent.setoperation(operation);    // 启动ability    context.startability(intent, 10);}//发送短信public void domessage(string telephone) {    intent intent = new intent();    operation operation = new intent.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 代码如下：
public class mylocalparticleability implements localparticleability {    private static mylocalparticleability instance;    private static final hiloglabel tag = new hiloglabel(hilog.debug, 0x0, mylocalparticleability.class.getname());    preferences preferences;    public static final string key = key_list;    context applicationcontext;    context context;    private mylocalparticleability(context context) {        this.context = context;        this.applicationcontext = context.getapplicationcontext();        databasehelper databasehelper = new databasehelper(applicationcontext);        string filename = main_list.xml;         // filename表示文件名，其取值不能为空，也不能包含路径，默认存储目录可以通过context.getpreferencesdir()获取。        preferences = databasehelper.getpreferences(filename);    }    public static mylocalparticleability getinstance(context applicationcontext) {        if (instance == null) {            instance = new mylocalparticleability(applicationcontext);        }        return instance;    }    public string getcontactpersonlist() {        // context入参类型为ohos.app.context。        string preferencesstring = preferences.getstring(key, );        hilog.info(tag, getcontactpersonlist preferencesstring :  + preferencesstring);        return preferencesstring;    }    public void addcontactpersonlist(string content) {        hilog.info(tag, addcontactpersonlist content :  + content);        preferences.putstring(key, content);        preferences.flushsync();    }}
js 代码：
import prompt from '@system.prompt'; onitemlongpress(item) {        console.log(tag +  ;onitemlongpress: + item.item_name);        let this = this;        //点击删除时弹出对话框        prompt.showdialog({            title: 操作提示,            message: 添加 + item.item_name + 为紧急联系人吗?,            buttons: [{                          text: 确定,                          color:                       },                      {                          text: 取消,                          color:                       }],            success: function (data) {                if (data.index == 0) {                    this.addcontactpersonlist(item);                }             }        });    }  async addcontactpersonlist(item) {        let content =  await this.getcontactpersonlist();        console.info(tag + addcontactpersonlist content:  + content);        let list = []        if(content != ){            list = json.parse(content);        }        list.push(item);        let temp = json.stringify(list);        console.info(tag + addcontactpersonlist temp:  + temp);        this.javainterface.addcontactpersonlist(temp).then();        return true        // store.putsync(key, temp);    },   async getcontactpersonlist() {        let ret = await this.javainterface.getcontactpersonlist()        console.info(tag + getcontactpersonlist ret: + ret);        return ret    }
④js 服务卡片
实现效果：
创建卡片模板：
卡片数据绑定：
public providerforminfo bindformdata(long formid) {    hilog.info(tag, bind form data);    zsonobject zsonobject = new zsonobject();    string contactpersonlist = mylocalparticleability.getinstance(context.getapplicationcontext()).getcontactpersonlist();    jsonarray jsonarray = json.parsearray(contactpersonlist);    for (int i = 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: action 1,    actionname2: action 2  },  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 就是前面的播打电话的方法：
@overridepublic void ontriggerformevent(long formid, string message) {    hilog.info(tag, handle card click event. + message);    zsonobject zsonobject = zsonobject.stringtozson(message);    // do something here after receive the message from js card    zsonobject result = new zsonobject();    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技术社区】欢迎添加关注！文章转载请注明出处。