HarmonyOS 鸿蒙Next开发案例：社交类行业官方模板介绍 （Part1：相亲交友模板）

💡摘要： 本模板来自华为生态市场（Huawei Partner Market），本文选取了社交类行业的一个官方模板——相亲交友元服务模板，并进行了简要的介绍与分析。各位开发者伙伴们，更多行业模板与组件请进入生态市场查看！

一、概述

1. 行业洞察（待补充）

   1）行业痛点

2. 优秀案例概览

   基于以上行业分析，本期将介绍鸿蒙生态市场社交类行业模板——相亲交友元服务模板，为行业提供常用功能的开发案例，提供了用户推荐、相亲活动、广场、会员、个人中心等能力。模板主要分首页、广场、会员、我的四大模块

   • Stage开发模型 + 声明式UI开发范式
   • 分层架构设计 + 组件化拆分，支持开发者在开发时既可以选择完整使用模板，也可以根据需求单独选用其中的业务组件
   • 本模板已集成华为账号、支付等服务，只需做少量配置和定制即可快速实现华为账号的登录和购买会员套餐等功能

首页	广场	会员	我的

本模板主要页面及核心功能如下所示：

相亲平台模板
 |-- 首页
 |    |-- 推荐用户
 |    |    |-- 用户信息
 |    |    |    |-- 用户相册展示
 |    |    |    |-- 用户自我介绍
 |    |    |    |-- 用户基本信息
 |    |    |    |-- 用户择偶条件
 |    |    |    └-- 用户近期动态
 |    |    └-- 操作
 |    |    |    |-- 联系红娘
 |    |    |    |-- 关注用户
 |    |    |    └-- 对当前用户不感兴趣
 |    |-- 活动
 |    |    |-- 活动地区选择
 |    |    └-- 活动列表
 |    |    |    |-- 活动详情
 |    |    |    └-- 活动报名
 |-- 广场
 |    |-- 推荐
 |    |    |-- 动态列表  
 |    |    |    |-- 动态详情
 |    |    |    |-- 动态点赞
 |    |    |    |-- 动态评论 
 |    |    |    |-- 关注用户
 |    |    |    └-- 新增动态
 |    |-- 关注
 |    |    |-- 动态列表
 |    |    |    |-- 动态详情
 |    |    |    |-- 动态点赞
 |    |    |    |-- 动态评论 
 |    |    |    └-- 新增动态
 |-- 会员
 |    └-- 会员权益介绍
 |    └-- 会员订购
 |
 └-- 我的
 |    |-- 个人信息
 |    |    |-- 头像设置
 |    |    |-- 详细信息设置
 |    |    └-- 实名认证
 |    |-- 操作记录汇总
 |    |    |-- 关注总数及详情查看
 |    |    |-- 点赞总数及详情查看
 |    |    └-- 评论总数及详情查看
 |    |-- 择偶标准	    
 |    |    └--择偶标准设置 
 |    |-- 我的动态
 |    |    |-- 动态列表 
 |    |    └-- 新增动态 
 |    |-- 我的订单
 |    |    └-- 订单查看 
 |    |-- 设置
 |    |    └--  是否公开设置
 |    |    └--  销户

二、应用架构设计

1. 分层模块化设计

• **产品定制层：**专注于满足不同设备或使用场景的个性化需求，作为应用的入口，是用户直接互动的界面。

  • 本实践暂时只支持直板机，为单HAP包形式，包含路由根节点、底部导航栏等。

• **基础特性层：**用于存放相对独立的功能UI和业务逻辑实现。

  • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。
  • 每个功能模块都具备高内聚、低耦合、可定制的特点，支持产品的灵活部署。

• **公共能力层：**存放公共能力，包括公共UI组件、数据管理、外部交互和工具库等共享功能。

  • 本实践的公共能力层分为公共基础能力和可分可合组件，均打包为HAR包被上层业务组件引用。
  • 公共基础能力包含日志、文件处理等工具类，公共类型定义，网络库，以及弹窗、加载等公共组件。
  • 可分可合组件将包含行业特点、可完全自闭环的能力抽出独立的组件模块，支持开发者在开发中单独集成使用，详见业务组件设计章节。

本模板详细工程结构可见工程结构章节。

2. 业务组件设计

为支持开发者单独获取特定场景的页面和功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。

三、行业场景技术方案（待补充）

1. 账号管理

   1）场景说明

   2）技术方案

2. 会员订购

   1）场景说明

   2）技术方案

3. 推荐用户

   1）场景说明

   2）技术方案

4. 相亲广场

   1）场景说明

   2）技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示：

SocialDating
  ├─commons/src/main
  │  ├─ets
  │  │  ├─model                               // 公共数据模型
  │  │  ├─page                                // 公共页面
  │  │  ├─service                             // 基础服务，其中MockService为本地桩的实现类，在本地模拟服务端的实现
  │  │  └─utils                               // 常量、工具类
  │  │                                       
  │  └─resources                             
  │  │  ├─base
  │  │  │  ├─element                         // 公共的资源变量定义，如颜色、字符串等
  │  │  │  ├─media                           // 公共的图标、媒体文件 
  │  │  │  └─profile                         // 路由页面配置                                          
  │  │                             
  │─features                   
  │  ├─activity/src/main                     // 活动模块                                   
  │  │  ├─ ets
  │  │  │  ├─model                           // 活动模块相关的模型定义，如活动对象、参加的活动对象、请求和响应对象等
  │  │  │  ├─pages                           // 活动页面，主要是活动详情页和我参加的活动列表页  
  │  │  │  └─service                         // 活动服务类，该类负责对接后端进行数据处理                             
  │  │  └─resources                          // 资源文件目录， 同commons模块，不再赘述
  │  │                                
  │  ├─composite/src/main                    // 组合模块，这个模块在活动、用户、动态、会员这些基础模块的上一层，
  │  │  │                                    // 组合各基础模块的能力以提供组合服务，当前主要包括首页和个人中心两部分                       
  │  │  ├─ ets
  │  │  │  ├─model                           // 首页和个人中心相关的模型定义，如操作记录页参数等
  │  │  │  ├─pages                           // 页面，主要包括首页、个人中心页、我的操作记录（关注、点赞、评论）页 
  │  │  └─resources                          // 资源文件目录， 同commons模块，不再赘述    
  │  │     
  │  ├─feed/src/main                         // 动态（feed）模块                                   
  │  │  ├─ ets
  │  │  │  ├─model                           // 动态相关的模型定义，如动态对象、评论、动态相关的请求和响应对象等
  │  │  │  ├─pages                           // 动态页面，包括动态列表、动态详情、新增动态页等  
  │  │  │  └─service                         // 动态服务类，该类负责对接后端进行数据处理                             
  │  │  └─resources                          // 资源文件目录， 同commons模块，不再赘述
  │  │     
  │  ├─member/src/main                       // 会员模块                                   
  │  │  ├─ ets
  │  │  │  ├─model                           // 会员相关的模型定义，如红娘对象。
  │  │  │  ├─pages                           // 会员页面，当前主要是会员服务页  
  │  │  │  └─service                         // 会员服务类，该类负责对接后端进行数据处理                             
  │  │  └─resources                          // 资源文件目录， 同commons模块，不再赘述
  │  │     
  │  ├─user/src/main                         // 用户模块                                   
  │  │  ├─ ets
  │  │  │  ├─model                           // 用户相关的模型和数据对象定义。
  │  │  │  ├─pages                           // 用户页面，包括用户配置、用户信息编辑页、择偶条件设置页、用户列表、用户详情、用户注册、 
  │  │  │  │                                 // 和用户搜索、实名认证等页面
  │  │  │  └─service                         // 用户服务类，该类负责对接后端进行数据处理                             
  │  │  └─resources                          // 资源文件目录， 同commons模块，不再赘述                                            
  │─products                       
  │  ├─phone/src/main                                  
  │  │  ├─ets                        
  │  │  │  ├─model                           // 模型和数据对象定义
  │  │  │  └─pages                           // 主页                                                     
  │  │  │                                    
  │  │  └─resources                
  │  │  │  ├─base                           
  │  │  │  │  ├─element                      // 产品相关的资源变量定义，如颜色、字符串等
  │  │  │  │  ├─media                        // 产品相关的图标等
  │  │  │  │  └─profile                      // 主页和路由表配置文件
  │  │  │  │                        
  │  │  │  └─rawfile                         // mock数据。本模板仅实现了端侧，与后端相关的数据请求由本目录下的json文件进行mock                      

2. 关键代码解读（待补充）

• 待补充

3. 模板集成

本模板提供了两种代码集成方式，供开发者自由使用。

1）整体集成

开发者可以选择直接基于模板工程开发自己的应用工程。

• 模板代码获取：

  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。
  • 通过开源仓访问源码，仓库地址。

• 打开模板工程，根据README说明中的快速入门章节，将自己的应用信息配置在模板工程内，即可运行并查看模板效果。

• 对接开发者自己的服务器接口，转换数据结构，展示真实的云侧数据。

  • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。
  • 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

• 根据自己的业务内容修改模板，进行定制化开发。

2）按需集成

若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。

• 组件代码获取：
  • 通过IDE插件创建模板工程，开发指导。
  • 通过生态市场下载源码， [下载地址](https://developer.huawei.com/consumer/cn/market/prod-list/4437348