Contacts应用是基于OpenHarmony SDK开发的安装在L1(3516)设备上的应用;应用主要功能是展示联系人列表,并点击某一列弹出联系人详细信息;
完整的项目结构目录如下
├─entry\src\main
│ │ config.json //应用配置文件
│ │
│ ├─js
│ │ └─MainAbility
│ │ │ app.js // 应用程序入口
│ │ │
│ │ ├─common // 公共资源
│ │ │ │ checkbutton.png
│ │ │ │ delete.png
│ │ │ │ done.png
│ │ │ │ head0.png
│ │ │ │ head1.png
│ │ │ │ head2.png
│ │ │ │ head3.png
│ │ │ │ head4.png
│ │ │ │ right.png
│ │ │ │
│ │ │ └─images
│ │ │ bg-tv.jpg
│ │ │ Wallpaper.png
│ │ │
│ │ ├─i18n // 多语言文件
│ │ │ en-US.json
│ │ │ zh-CN.json
│ │ │
│ │ └─pages
│ │ └─index
│ │ index.css //页面样式
│ │ index.hml //首页展示
│ │ index.js //页面逻辑
│ │
│ └─resources
│ ├─base
│ │ ├─element
│ │ │ string.json
│ │ │
│ │ └─media
│ │ icon.png
│ │
│ └─rawfile
在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next,Language 选择JS语言,最后点击Finish即创建成功。
1)最外层是div容器;
2)再通过list包裹list-item 并设置点击事件onclick;
3)list_item 包括头像image 和包括姓名和电话号码的div 按行布局容器,以及右尖括号图标;
4)dialog对话框容器包裹div容器和以及button组件,且div容器里面也是两个label和输入框的input
<div class="container">
<list class="list">
<list-item for="{{ contactList }}" class="list-item" onfocus="listFocus({{ $idx }})"
onclick="clickItem({{ $idx }})">
<image src="{{ $item.imageSrc }}" class="list-image"></image>
<div class="content">
<text class="list-text">
{{ $item.name }}
</text>
<text class="list-text" focusable="true">
{{ $item.phone }}
</text>
</div>
<image class="right-image" src="/common/right.png">
</image>
</list-item>
</list>
<dialog id="detailDialog" class="dialog-main" @cancel="dialogCancel">
<div class="dialog-div">
<image src="{{ imageSrc }}" class="avatar"></image>
<div class="input-box">
<div class="flex-row">
<label class="label" target="name">名字</label>
<input id="name" class="input" type="text" value="{{ name }}" @change="changeName">
</input>
</div>
<div class="flex-row">
<label class="label" target="phone">电话</label>
<input id="phone" class="input" type="text" value="{{ phone }}" @change="changePhone">
</input>
</div>
</div>
<div class="inner-btn">
<button class="btn" type="text" onclick="cancel">取消</button>
<button class="btn" type="text" onclick="confirm">确认</button>
</div>
</div>
</dialog>
</div>
点击某一行后,并根据当前行的id 弹出dialog对话框,展示对应的头像和名字和电话
clickItem(idx) {
this.imageSrc = this.contactList[idx].imageSrc;
this.name = this.contactList[idx].name;
this.phone = this.contactList[idx].phone;
this.showDialog();
this.index = idx;
},
点击对话框名字框/电话框,会弹出软键盘,输入完成后会修改对应内容
// 更新input Name值
changeName(e) {
let changeValue = e.text
this.name = changeValue;
},
// 更新input Phone值
changePhone(e) {
let changeValue = e.text;
this.phone = changeValue;
},
点击对话框确定按钮后,会将修改的姓名和电话号码存储到联系人列表
confirm() {
//修改对应行后保存到列表中
this.contactList[this.index].name = this.name;
this.contactList[this.index].phone = this.phone;
this.$element('detailDialog').close();
},
项目地址:https://gitee.com/openharmony-sig/knowledge_demo_smart_home/tree/master/FA/Contacts
1)git下载
git clone git@gitee.com:openharmony-sig/knowledge_demo_smart_home.git
2)项目导入
打开DevEco Studio,点击File->Open->下载路径FA/Contacts