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. 工程结构

详细代码结构如下所示：

MuseumTicket
  |- commons                                       // 公共层
  |   |- commonlib/src/main/ets                    // 公共工具模块(har)
  |   |    |- constants 
  |   |    |     CommonContants.ets                // 公共常量
  |   |    |     CommonEnum.ets                    // 公共枚举
  |   |    |- types 
  |   |    |     Types.ets                         // 公共类型
  |   |    └- utils 
  |   |          AccountUtil.ets                   // 账号管理工具
  |   |          FormatUtil.ets                    // 日历、图片等格式管理工具
  |   |          Logger.ets                        // 日志管理工具
  |   |          NextDaysUtil.ets                  // 生成模拟时间工具
  |   |          PermissionUtil.ets                // 权限管理工具
  |   |          PopViewUtils.ets                  // 公共弹窗
  |   |          PreferenceUtil.ets                // Preference存储和获取
  |   |          RouterModule.ets                  // 路由管理类
  |   |          WindowUtil.ets                    // 窗口管理工具
  |   |           
  |   |   
  |   |- network/src/main/ets                      // 网络模块(har)
  |   |    |- apis                                 // 网络接口  
  |   |    |- mocks                                // 数据mock
  |   |    |- constants                            // api路径常量    
  |   |    |- models                               // 网络库封装    
  |   |    └- types                                // 请求和响应类型 
  |   └- uicalendarpicker                          // 日历组件
  |
  |- products/entry                                // 应用层主包(hap)  
  |   └-  src/main/ets                                               
  |        |- entryability                                                               
  |        |- entryformability                                                        
  |        |- pages                              
  |        |    EmptyPage.ets                      // 入口页面
  |        |    MainEntry.ets                      // 主页面
  |        |- types                                // interface接口定义
  |        |- viewmodels                           // 与页面一一对应的vm层          
  |        └- widget                               // 卡片页面
  |                                            
  └- features                                      // 特性层
      |- home/src/main/ets                         // 首页模块(hsp)
      |    |- components                           // 抽离组件         
      |    |- pages                               
      |    |    HomePage.ets                       // 首页
      |    |    ExplainPage.ets                    // 讲解服务详情页
      |    |    IntroducePage.ets                  // 省博介绍详情页
      |    |    MapPage.ets                        // 场馆地图详情页
      |    |    ParkingPage.ets                    // 停车缴费详情页
      |    |- types                                // interface类型定义
      |    └- viewmodels                           // 与页面一一对应的vm层          
      |     
      |- mine/src/main/ets                         // 我的模块(hsp)
      |    |- components                           // 抽离组件      
      |    |- pages                               
      |    |    AddVisitorPage.ets                 // 常用参观人添加页
      |    |    EditVisitorPage.ets                // 常用参观人编辑页
      |    |    MinePage.ets                       // 我的页面
      |    |    PrivacyPage.ets                    // 隐私政策详情页
      |    |    ProfileEditPage.ets                // 个人信息编辑页
      |    |    VisitorPage.ets                    // 常用参观人展示页
      |    └- viewmodels                           // 与页面一一对应的vm层  
      |  
      |- order/src/main/ets                         // 预订模块(hsp)    
      |    |- pages                               
      |    |    ContactsPage.ets                   // 参观预约选择常用参观人页
      |    |    MyOrders.ets                       // 订单列表页
      |    |    OrderInfo.ets                      // 预约信息页
      |    |    OrderSuccess.ets                   // 预约成功页
      |    |    OrderTicket.ets                    // 参观预约页
      |    |    TicketDetail.ets                   // 订单详情页
      |    |- types                                // interface类型定义
      |    └- viewmodels                             
      |         MyOrdersVM.ets                     // 订单相关的VM层
      |         OrderTicketVM.ets                  // 预订相关的VM层   
      | 
      └- performance/src/main/ets                  // 特展模块(hsp)
           |- components                           // 抽离组件    
           |- pages                               
           |    BuyInfo.ets                        // 购票信息页
           |    BuySuccess.ets                     // 购票成功页
           |    BuyTicket.ets                      // 购票页
           |    PerformanceDetail.ets              // 特展详情页
           |    PerformancePage.ets                // 特展列表页
           |    TicketOwner.ets                    // 购票常用参观人添加页
           |- types                                // interface类型定义
           └- viewmodels                             
                BuyVM.ets                          // 购票相关的VM层
                PerformanceVM.ets                  // 特展相关的VM层  

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插件创建模板工程，开发指导。
  • 通过生态市场下载源码， 下载地址。

• 下载组件源码，根据README中的说明，将组件包配置在自己的工程中。

• 根据API参考和示例代码，将组件集成在自己的对应场景中。