• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 聊天实例应用
2
3### 介绍
4
5这是一个仿聊天类应用，使用了静态布局搭建了不同的页面。为了优化内存与性能体验，在部分list场景使用了懒加载。
6
7本示例用到了
8图片处理能力接口[@ohos.multimedia.image](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-image-kit/js-apis-image.md )。
9
10文件存储管理能力接口[@ohos.fileio](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-core-file-kit/js-apis-fileio.md) 。
11
12### 效果预览
13
14[README_en.md](README_en.md)
15| 主页 | 通讯录 | 发现 | 个人页面 |
16| ------------------------------------- | ---------------------------------------- | -------------------------------------- | ----------------------------------- |
17| ![](screenshots/device/chat_home.jpeg) | ![](screenshots/device/chat_address.jpeg) | ![](screenshots/device/chat_found.jpeg) | ![](screenshots/device/chat_me.jpeg) |
18
19使用说明
20
211.应用包含“聊天”、”通讯录“、”发现“、”我“四个主页面，使用Tabs组件实现模块的切换，“聊天”和“通讯录”模块使用了LazyForEach懒加载功能。
22
232.二级及以上页面左上角都有一个返回按钮。
24
253.聊天内容页面的下方输入框点击可以输入内容，表情的图标点击可以发送图片。
26
274.“发现”页面的“朋友圈”点击会进入“朋友圈”页面。
28
29### 工程目录
30
31```
32features/chatlist/src/main/ets             // 列表类功能HAR共享包
33|---/pages
34|   |---ChatDetailPage.ets                 // 具体的某一聊天页面
35|   |---ChatListPage.ets                   // 整体聊天页面
36|---/utils
37|   |---Constants.ets                      // 封装只读常量
38|   |---DataFactory.ets                    // 封装对数据处理方法
39|   |---FriendMomentJsonUrl.ets            // 封装朋友圈json地址
40|   |---Logger.ets                         // 封装整个日志
41|   |---PageConstants.ets                  // 封装页面地址只读常量
42|---/view
43|   |---ChatView.ets                       // 聊天列表每个单独模块
44|   |---OptLayoutChatView.ets              // 可复用的列表模块
45|---/viewmodel
46|   |---BasicDataSource.ets                // 封装朋友列表数据方法
47|   |---ChatListDataSource.ets             // 封装聊天列表数据方法
48|   |---MsgBase.ets                        // 封装聊天列表对象方法
49products/phone/entry/src/main/ets
50|---/entryability
51|   |---EntryAbility.ts                    // 封装整个模块启用，监听Ability对应的窗口等逻辑
52|---/utils
53|   |---Logger.ets                         // 封装整个日志
54|---/view
55|   |---CustomDialogExample.ets            // 自定义功能弹窗页面
56|   |---TopBar.ets                         // 定义应用头部导航栏
57|---/pages
58|   |---/workers
59|   |   |---worker.ts                      // worker线程逻辑处理
60|   |---Detail.ets                         // 聊天详情页面
61|   |---DiscoverPage.ets                   // 发现页面
62|   |---FriendsMomentsPage.ets             // 朋友圈页面
63|   |---FriendsPage.ets                    // 通讯录页面
64|   |---FullImagePage.ets                  // 点击朋友圈图片放大图
65|   |---Index.ets                          // 首页
66|   |---SettingPage.ets                    // 我的页面
67|---resources/images                       // 放置图片，icon资源等
68```
69
70#### 相关概念
71
72懒加载：开发框架提供数据懒加载（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
73
74### 具体实现
75
761、定义要跳转子页面：在products/phone/entry/pages/index.ets中通过TabContent()
77定义要跳转的子页面，[源码参考](./products/phone/entry/src/main/ets/pages/Index.ets)
78例如：跳转通讯录界面：TabContent() {
79FriendsPage() }。
802、使用LazyForEach数据懒加载对“聊天”和“通讯录”模块进行数据渲染：当LazyForEach在滚动容器中使用，框架会根据滚动容器可视区域按需创建组件，当组件划出可视区域外时，框架会进行组件销毁回收以降低内存占用，[源码参考](./products/phone/entry/src/main/ets/pages/FriendsPage.ets )。
813、页面之间的跳转通过在config.json中先配置好相关路由，并通过router.push()进行页面跳转,例如：跳转到搜索页面router.push({
82url: 'pages/SearchPage' })。
834、页面组件加载前，通过fileio.readSync以同步的方式读取数据，在EntryAbility生命周期中获取对应的Want信息。
84
85### AOT开启方式
86
871. 打开Chat工程，完成同步，并将工程编译模式调整为 release。
882. 指定热点ap文件储存路径，并关闭混淆功能。即，在模块级 build-profile.json5 文件中，配置如下：
89
90   ```ts
91   {
92     "apiType": "stageMode",
93     "buildOption": {
94       "arkOptions": {
95         "apPath": "./modules.ap"
96       }
97     },
98     "buildOptionSet": [
99       {
100         "name": "release",
101         "arkOptions": {
102           "obfuscation": {
103             "ruleOptions": {
104               "enable": false
105             }
106           }
107         }
108       }
109     ],
110     ...
111   }
112   ```
1133. 从设备端采集热点ap文件：
114   - 通过命令行开启设备ap文件开关。
115     ```shell
116     hdc shell param set ark.profile true
117     ```
118   - 将应用按步骤1中release模式打包出hap并安装到设备上，在需要优化的场景进行操作，记录高频操作后，通过命令行导出ap文件。
119     ```shell
120     hdc file recv /data/local/ark-profile/100/{bundleName}/modules.ap {apPath}
121     ```
1224. 将步骤3中获取到的ap文件，放入步骤2中指定的apPath路径。
1235. 按照步骤1中的release编译模式进行编译，并安装到设备，等待设备端侧AOT编译优化完成后，应用运行性能即可得到相应的提升。
124
125> **AOT前置约束说明**
126> - 仅支持API10及以上版本Stage模型的ArkTS工程
127> - 目前仅HAP和HSP支持该功能
128> - IDE需要4.0.1.400及以上版本
129> - Node.js需要14.19.1及以上版本
130> - SDK建议升级到OpenHarmony 4.0 beta2（4.0.9.2）及以上版本
131
132### 相关权限
133
134不涉及。
135
136### 依赖
137
138不涉及。
139
140### 约束与限制
141
1421.本示例已适配API version 10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0Release)。
143
1442.本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。
145
146### 下载
147
148如需单独下载本工程，执行如下命令：
149
150```
151git init
152git config core.sparsecheckout true
153echo code/Solutions/IM/Chat/ > .git/info/sparse-checkout
154git remote add origin https://gitee.com/openharmony/applications_app_samples.git
155git pull origin master
156```