# Contacts应用代码介绍

## 一、简介

#### 1、样例效果

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

![show](resources/contacts.gif)

#### 2.设计OpenHarmony技术特性

- JS UI  

####  3.支持OpenHarmony版本

OpenHarmony 3.0 LTS

#### 4.支持开发板

- 润和HiSpark Taurus AI Camera(Hi3516d)开发板套件

## 二、快速上手

#### 1.标准设备环境准备

以润和HiSpark Taurus AI Camera(Hi3516d)开发板套件为例

- [获取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.应用编译环境准备

- 下载DevEco Studio 3.0.0.601版本 [下载地址](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)；
- 配置SDK，参考 [配置OpenHarmony-SDK](https://www.openharmony.cn/pages/00090001/#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6)
- DevEco Studio 点击File -> Open 导入本下面的代码工程Contacts

#### 3.项目下载和导入

项目地址：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


#### 4.安装应用

- [配置应用签名信息](https://www.openharmony.cn/pages/00090003/#%E7%94%9F%E6%88%90%E5%AF%86%E9%92%A5%E5%92%8C%E8%AF%81%E4%B9%A6%E8%AF%B7%E6%B1%82%E6%96%87%E4%BB%B6)

- 安装应用

  打开**OpenHarmony SDK路径 \toolchains** 文件夹下，执行如下hdc_std命令，其中**path**为hap包所在绝对路径。

  ```
  hdc_std install -r path\entry-debug-standard-ark-signed.hap
  ```

  **PS**环境准备，源码下载，编译，烧录设备，应用部署的完整步骤请参考[这里](https://blog.csdn.net/sd2131512/article/details/121403543)

##  三、关键代码解读

#### 1.目录结构

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

#### 2.日志查看方法

```
hdc_std shell hilog > /C:\Users\china\Desktop\hilog.txt
```

#### 3.关键代码

- UI界面 index.hml

## 四、如何从零开发Contacts

[从零开发Contacts](quick_develop.md)

##  五、参考链接

- [OpenHarmony 基于JS扩展的类Web开发范式](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-js/Readme-CN.md)
- [OpenHarmony应用接口](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/Readme-CN.md)