文档开发者中心
我的
|

HarmonyOS组件模板

示例代码

行业应用

软件开发

HarmonyOS 5

【HarmonyOS开发案例】生活服务类行业官方模板介绍 (Part2:政务应用模板)

![](https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/881/839/934/0010086000881839934.20250807214452.78098736412774540466470150321296:50001231000000:2800:1415B7C8D67E32C4F39AE68BCC00AA62D5F843EA52FE8069F087D437ADB8DC70.png)


💡摘要: 本模板来自华为生态市场(Huawei Partner Market),本文选取了生活服务类行业的一个官方模板——政务应用模板,并进行了简要的介绍与分析。各位开发者伙伴们,更多行业模板与组件请进入生态市场查看!


一、概述

  1. 行业洞察(待补充)

    1)行业痛点


  2. 优秀案例概览

    基于以上行业分析,本期将介绍鸿蒙生态市场生活服务类行业模板——政务应用模板,为行业提供常用功能的开发案例,模板主要分首页、办事、互动、和我的四大模块

    • Stage开发模型 + 声明式UI开发范式

    • 分层架构设计 + 组件化拆分,支持开发者在开发时既可以选择完整使用模板,也可以根据需求单独选用其中的业务组件

    • 本模板已集成华为账号、广告、定位、推送等服务,只需做少量配置和定制即可快速实现华为账号的登录、定位、推送等功能,从而快速完成相关功能的实现

首页 办事 我的 互动

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

政务模板
 |-- 首页
 |    |-- 福利专区
 |    |-- 身份码
 |    |-- 公交出行
 |    |-- 区域banner
 |    |     |-- 健康医保
 |    |     |-- 社保
 |    |     |-- 公积金
 |    |     |-- 教育就业
 |    |     |-- 行驶驾驶
 |    └-- 资讯公告
 |          |-- 资讯滚动
 |          |-- 新闻轮播
 |-- 办事
 |    |-- 按主题
 |          |-- 健康医保
 |          |-- 公积金 
 |          |-- 教育就业 
 |          |-- 行驶驾驶 
 |    |-- 按人生事
 |          |-- 生活服务
 |          |-- 身份户籍 
 |          |-- 文旅体育 
 |          |-- 优待抚恤
 |          |-- 不动产 
 |          |-- 婚育 
 |    |-- 按部门
 |          |-- 司法公正
 |          |-- 出境入境 
 |          |-- 其他 
 └-- 我的
      |-- 用户信息
      |     |-- 个人信息
      |     └-- 退出登录
      |-- 民声在线
      |     |-- 我的办件
      |     |-- 我的材料
      |     |-- 我的授权
      |     |-- 积分商城
      |-- 我的证照
      |     |-- 居民身份证
      |     |-- 社保卡
      └-- 设置
      └-- 关于

二、应用架构设计

1. 分层模块化设计

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

    • 本实践暂时只支持直板机,为单HAP包形式,包含路由根节点、底部导航栏等。
  • **基础特性层:**用于存放相对独立的功能UI和业务逻辑实现。

    • 本实践的基础特性层将应用底部导航栏的每个选项拆分成一个独立的业务功能模块。

    • 每个功能模块都具备高内聚、低耦合、可定制的特点,支持产品的灵活部署。

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

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

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


2. 业务组件设计

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


三、行业场景技术方案(待补充)

  1. 个人信息

    1)场景说明

    2)技术方案

  2. 办事大区

    1)场景说明

    2)技术方案

  3. 咨询公告

    1)场景说明

    2)技术方案

  4. 我的证照

    1)场景说明

    2)技术方案

四、模板代码

1. 工程结构

详细代码结构如下所示:

Application
├──├──commons
│   ├──common                                // 公共能力层
│     ├──src/main/ets                        // 基础能力
│     │  └──cloudFunction                    // 云函数
│     │  └──dividerTmp                       // 下划线公共组件
│     │  └──Interface                        // 公共接口常量
│     │  └──Model                            // 公共接口常量
│     │  └──Utils                            // 公共方法
│     └──Index.ets                           // 对外接口类
│   ├──components                            // 细化业务组件
│     ├──src/main/ets/components             // 基础能力
│     │  ├──AboutUs                          // 关于我们组件
│     │  └──buildSwiperArea                  // 轮播组件
│     │  └──CodeMockPage                     // 身份码展示组件
│     │  └──FeedbackList                     // 反馈列表组件
│     │  └──PersonInformation                // 个人信息
│     │  └──PrivacyPolicyPage                // 隐私政策
│     │  └──ScanCodeResult                   // 扫码结果
│     │  └──TermsOfServicePage               // 隐私服务
│     │  └──NoDataPage                       // 暂无数据组件
│     │  └──Suggestion                       // 问题反馈组件
│     └──Index.ets                           // 对外接口类
│   ├──H5                                    // h5页面
│     ├──src/main/ets/pages                  // 基础能力
│     │  ├──H5                               // h5公共页面
│     │  ├──utils                            // h5工具类
│     └──Index.ets                           // 对外接口类 
├──features                                  // 基础特性层
│  ├──home/src/main/ets                      // 首页
│  │  ├──pages                               // 首页入口
│     │  ├──home                             // 首页入口
│     │  ├──ServiceManage                    // 全部服务管理
│     │  ├──ServiceSearch                    // 全部服务搜索
│  ├──home/src/main/resources                // 资源文件目录
│  ├──home/Index.ets                         // 对外接口类
│  ├──office/src/main/ets                    // 全部服务
│  │  ├──pages                               // 全部服务入口
│     │  ├──OfficePage                       // 全部服务入口
│     │  ├──SiteList                         // 位置选择
│  ├──office/src/main/resources              // 资源文件目录
│  ├──office/Index.ets                       // 对外接口类
│  ├──interaction/src/main/ets               // 互动
│  │  ├──pages                               // 互动入口
│     │  ├──InteractionPage                  // 互动入口
│  ├──interaction/src/main/resources         // 资源文件目录
│  ├──mine/src/main/ets                      // 我的(包含一键登录)
│  │  └──pages                               // 我的入口页
│     │  ├──Login                            // 登录
│     │  ├──LoginWithHuaweiID                // 华为账号一键登录
│     │  ├──Message                          // 消息页面
│     │  ├──MinePage                         // 我的页面主入口
│     │  ├──Settings                         // 全部设置
│  └──mine/src/main/resources                // 资源文件目录
└─products/entry/src/main   
   ├─ets
   │  ├─entrybackupability
   │  │      ├──EntryBackupAbility            
   │  ├─entryability
   │  │      ├──EntryAbility.ets              // 应用程序入口
   │  ├─pages
   │  │  ├─components
   │  │  │   ├──CustomTabBar.ets             // 自定义底部tab栏组件
   │  │  ├──MainPage                         // 首页
   │  │  ├──SplashFullScreenAdPage           // 广告页
   │  │  ├──SplashPage                       // 闪屏页
   └─resources     
CloudProgram
├──clouddb                                   // 云数据库
│  ├──dataentry                              // 云数据库描述文件
│  │  ├──d_govn_template_userInfo            // 用户信息描述文件
│  ├──objecttype                             // 云数据库描述文件
│  │  ├──govn_template_userInfo              // 用户信息部署文件
├──cloudfunctions                            // 云函数
│  ├──govn-template-push                     // 消息通知云函数
│  ├──govn-template-userinfo                 // 用户信息云函数

2. 关键代码解读(待补充)

  • 待补充

3. 模板集成

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

1)整体集成

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

  • 模板代码获取:

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

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

    • 将commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替换为真实的服务器接口。

    • 在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中将云侧开发者自定义的数据结构转换为端侧数据结构。

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


2)按需集成

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

  • 组件代码获取:

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

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

点赞
收藏
回复
分享
举报
浏览202 编辑于2025-08-08 13:46江苏
全部评论
最多点赞
最新发布
最早发布
写回答
新增插入模板功能
一键使用模板,快速填写内容,轻松发帖~
知道了
  • 为了保障您的信息安全,请勿上传您的敏感个人信息(如您的密码等信息)和您的敏感资产信息(如关键源代码、签名私钥、调试安装包、业务日志等信息),且您需自行承担由此产生的信息泄露等安全风险。
  • 如您发布的内容为转载内容,请注明内容来源。

我要发帖子

了解社区公约,与您携手共创和谐专业的开发者社区。