## Contacts

### 简介

Contacts应用是基于OpenHarmony SDK开发的安装在L1(3516)设备上的应用；应用主要功能是展示联系人列表，并点击某一列弹出联系人详细信息；

![show](resources/contacts.gif)

### 工程目录

完整的项目结构目录如下

```
├─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
```



### 开发步骤

#### 1. 新建OpenHarmony ETS项目

在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next，Language 选择JS语言，最后点击Finish即创建成功。
![image-20211124092813545](resources/new_project.png)

#### 2. 编写主页面

![image-20211124093106260](resources/home.png)



##### 2.1页面展示

1）最外层是[div](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md)容器；

2）再通过[list](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md)包裹[list-item](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md) 并设置点击事件[onclick](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md)；

3）list_item 包括头像[image](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md) 和包括姓名和电话号码的div 按行布局容器，以及右尖括号图标；

4）[dialog](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-container-dialog.md)对话框容器包裹div容器和以及[button](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md)组件,且div容器里面也是两个[label](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md)和输入框的[input](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md)

```
<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>
```

  

##### 2.2点击事件

点击某一行后，并根据当前行的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;
    },
```

##### 2.3对话框姓名和电话修改

点击对话框名字框/电话框，会弹出软键盘，输入完成后会修改对应内容

```
 // 更新input Name值
    changeName(e) {
        let changeValue = e.text
        this.name = changeValue;
    },
    // 更新input Phone值
    changePhone(e) {
        let changeValue = e.text;
        this.phone = changeValue;
    },
```

##### 2.4对话框确定按钮

点击对话框确定按钮后，会将修改的姓名和电话号码存储到联系人列表

```
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

### 约束与限制

#### 1. 设备编译约束

- [获取OpenHarmony源码](https://www.openharmony.cn/pages/0001000202/#%E5%AE%89%E8%A3%85%E5%BF%85%E8%A6%81%E7%9A%84%E5%BA%93%E5%92%8C%E5%B7%A5%E5%85%B7)，OpenHarmony版本须3.0LTS；
- [安装开发板环境](https://www.openharmony.cn/pages/0001000400/#hi3516%E5%B7%A5%E5%85%B7%E8%A6%81%E6%B1%82)
- [开发板烧录](https://www.openharmony.cn/pages/0001000401/#%E4%BD%BF%E7%94%A8%E7%BD%91%E5%8F%A3%E7%83%A7%E5%BD%95)

#### 2. 应用编译约束

- 参考 [应用开发快速入门](https://www.openharmony.cn/pages/00090000/)
- 集成开发环境：DevEco Studio 3.0.0.601版本[下载地址](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)；
- OpenHarmony SDK 3.0.0.0；