时间：2025-07-29 14:47
人气：
作者：admin
???? 鸿蒙生态为开发者提供海量的HarmonyOS模板/组件，助力开发效率原地起飞 ????
★ 一键直达生态市场组件&模板市场 , 快速应用DevEco Studio插件市场集成组件&模板 ★
如何通过行业模板，快速高效完成项目开发？
HarmonyOS官方模板优秀案例，带您找到答案！
???? 覆盖20+行业，本帖下方以汇总形式持续更新中，点击收藏！一键三连！常看常新！
|
功能类别 |
SDK名称示例 |
共性收集数据类型 |
特殊收集项/行为 |
SDK链接 |
|
支付类 |
支付宝、微信支付、银联云闪付、全民付、星图金融、京东支付、数字人民币支付 |
设备标识符（IMEI/Android ID/OAID）、网络信息（IP/运营商）、设备型号/系统版本、应用包名 |
银联SDK额外收集SIM卡国家码；星图金融收集生物识别信息（指纹/面部） |
|
|
推送通知类 |
极光推送、华为推送、小米推送、OPPO推送、vivo推送、魅族推送、荣耀推送、TPNS |
设备标识符（OAID/Android ID）、应用信息（包名/版本）、网络类型、通知栏状态 |
厂商SDK（如OPPO）收集锁屏状态；极光推送收集应用列表活跃状态 |
|
|
地图定位类 |
高德地图、百度地图、腾讯地图、高德定位SDK、百度定位SDK、 |
精确位置（经纬度/GNSS）、WiFi信息（BSSID/SSID/信号强度）、基站信息、设备传感器数据、IP地址 |
百度地图收集陀螺仪角度；高德收集地磁传感器数据 |
|
|
登录认证类 |
极光认证、友盟智能认证、运营商一键登录（移动/电信/联通） |
手机号码、SIM卡信息（ICCID/IMSI）、网络类型、设备标识符 |
电信SDK收集国际移动用户标识码；联通SDK需读取本机号码 |
|
|
数据统计/风控类 |
友盟+SDK、Bugly、神策SDK、灯塔SDK、同盾设备指纹、腾讯天御 |
设备标识符、应用崩溃日志、网络状态、设备型号/系统版本、磁盘/内存使用情况 |
同盾SDK收集运行中进程信息；灯塔SDK用于防会员卡共享 |
|
|
广告营销类 |
优量汇（腾讯广告）、穿山甲（字节）、倍孜广告、火山引擎增长营销SDK |
设备标识符、粗略位置、应用安装列表、广告交互数据、IP地址 |
穿山甲SDK后台获取OAID/Android ID；倍孜广告收集USB调试模式/ CPU信息 |
|
|
社交分享类 |
微信Open SDK、QQ互联SDK、微博SDK |
用户主动分享的内容、微信/QQ头像昵称、剪切板信息（iOS）、应用安装状态（微信/QQ） |
QQ SDK请求相册/存储权限；微博SDK收集设备厂商 |
|
|
浏览器内核类 |
腾讯浏览服务（TBS/X5）、Chromium、UC |
设备型号、网络类型、WiFi列表、页面性能数据 |
X5浏览器收集页面加载耗时/DNS解析耗时；Chromium收集剪切板内容 |
|
|
音视频类 |
声网agora、腾讯云视频播放（LiteAVSDK）、ijkplayer |
设备型号/分辨率、IP地址、网络类型、电池电量、CPU信息 |
声网SDK用于直播连麦；LiteAV监控WiFi信号强度 |
购物中心元服务模板是基于以上行业分析实现的参考，为行业元服务提供了常用功能的开发样例，涵盖停车缴费、自助积分、店铺导购、个人钱包、券包等多个实用场景。
基于本模板构建的【XX购物中心】元服务已正式发布上线，开发者反馈模板高度适配业务需求，显著提升了团队开发效率。
本模板主要页面及核心功能如下所示：
本模板整体工程共分为7个包：
为支持开发者单独获取特定场景的页面和功能，例如开发者已搭建了一个自己的购物中心元服务工程，只想单独取用本模板中的优惠券或积分功能，本模板将功能完全自闭环的部分能力抽离出独立的行业组件模块，不依赖公共基础能力包，开发者可以单独集成，开箱即用，降低使用难度。
元服务打开后无需用户手动登录，通过静默登录后展示默认头像和默认昵称。
用户可自行选择点击关联账号按钮获取华为账号关联手机号，可将静默登录账号与用户历史注册账号关联，同步用户历史数据资产，例如头像、昵称、生日等。
点击车牌号输入框拉起自定义键盘，根据车牌的位数展示省份、市区编号、车牌等自定义内容。
点击新增车牌支持存储常用车牌。
通过TextInput组件的customKeyboard属性，传入自定义UI，实现特殊键盘和输入框的关联。
将车牌输入能力封装成独立组件，通过bindSheet方法对当前页面绑定半模态弹框，并复用车牌输入组件。
用户在商场内消费后，可通过扫描小票二维码或拍摄小票照片等方式提交自助积分申请。
详细代码结构如下所示：
ShoppingMall
├─commons
│ └─lib_common/src/main/ets
│ ├─components
│ │ ├── AlertDialog.ets // 警告对话框
│ │ ├── AsWebRichText.ets // 富文本编辑器
│ │ ├── CallTelSheet.ets // 电话呼叫
│ │ ├── EmptyComp.ets // 空白组件
│ │ ├── LoadingDialog.ets // 加载组件
│ │ ├── LoginComp.ets // 登录组件
│ │ ├── NavHeaderBar.ets // 页面导航栏头部组件
│ │ ├── PageHeaderComp.ets // 页面标题组件
│ │ └── SheetHeaderComp.ets // 半模态标题组件
│ │
│ ├─constants
│ │ ├── Common.ets // 通用常量
│ │ └── RouterMap.ets // 路由表常量
│ │
│ ├─httprequest
│ │ ├── AxiosHttp.ets // axios二次封装
│ │ ├── AxiomRequest.ets // 创建请求实例
│ │ ├── HttpRequest.ets // 业务接口封装
│ │ └── HttpRequestApi.ets // 业务接口定义
│ │
│ ├─mock/MockData.ets // mock数据
│ │
│ ├─models
│ │ ├── ParamsModel.ets // 接口参数模型
│ │ ├── RequestModel.ets // 接口请求模型
│ │ ├── ResponseModel.ets // 接口响应模型
│ │ ├── RouterModel.ets // 路由跳转模型
│ │ ├── StorageModel.ets // 状态变量模型
│ │ └── TabBarModel.ets // Tab模型
│ │
│ ├─utils
│ │ ├── EmitUtils.ets // 全局事件方法类
│ │ ├── FileUtils.ets // 文件处理方法类
│ │ ├── FormatUtils.ets // 格式化方法类
│ │ ├── GlobalUtils.ets // 全局变量类
│ │ ├── Logger.ets // 日志类
│ │ ├── LoginUtils.ets // 登录方法
│ │ ├── RouterUtil.ets // 路由管理类
│ │ └── Utils.ets // 通用方法
│ │
│ └─viewmodels/BaseViewModel.ets // 基础viewmodel抽象类
│
├─components
│ ├── module_coupon // 优惠券组件
│ ├── module_keyboard // 车牌键盘组件
│ └── module_points // 自助积分组件
│
├─features
│ ├─business_home/src/main/ets // 首页模块
│ │ ├─components
│ │ │ ├── AddPlateComp.ets // 添加车牌组件
│ │ │ └── GuideListComp.ets // 指南列表组件
│ │ ├─constants
│ │ │ └── Constants.ets // 常量定义
│ │ ├─pages
│ │ │ ├── ConsiderateServicePage.ets // 尊享服务页面
│ │ │ ├── FindCarPage.ets // 寻车页面
│ │ │ ├── FindCarResultPage.ets // 寻车结果页面
│ │ │ ├── ParkingPaymentPage.ets // 停车缴费入口页面
│ │ │ ├── PayDetailPage.ets // 支付详情页
│ │ │ ├── PayRecordPage.ets // 缴费记录页面
│ │ │ ├── PaySuccessPage.ets // 支付成功页面
│ │ │ ├── PlateNumberMgtPage.ets // 车牌管理页面
│ │ │ ├── PlateNumberPage.ets // 停车缴费页面
│ │ │ ├── ServiceDetailPage.ets // 贴心服务二级页面
│ │ │ ├── StoreGuideDetailPage.ets // 店铺详情页面
│ │ │ ├── StoreGuidePage.ets // 店铺导航页面
│ │ │ └── WebPage.ets // 网页页面
│ │ └─viewmodel
│ │ ├── PayDetailViewModel.ets // 支付详情视图模型
│ │ ├── PayRecordViewModel.ets // 缴费记录视图模型
│ │ ├── PaySuccessViewModel.ets // 支付成功视图模型
│ │ ├── ServiceDetailViewModel.ets // 服务详细视图模型
│ │ ├── StoreGuideDetailViewModel.ets // 店铺指南详细视图模型
│ │ └── StoreGuideViewModel.ets // 店铺指南视图模型
│ │
│ └─business_mine/src/main/ets // 我的模块
│ ├──components
│ │ ├── MenuComp.ets // 菜单组件
│ │ └── UserInfoComp.ets // 用户信息组件
│ ├──constants
│ │ └── WalletConstants.ets // 钱包常量
│ ├──pages
│ │ ├── MembershipManualPage.ets // 成员手册页面
│ │ ├── MembershipPage.ets // 成员页面
│ │ ├── MinePage.ets // 我的页面
│ │ ├── MyCouponsPage.ets // 我的优惠券页面
│ │ ├── MyWalletPage.ets // 我的钱包页面
│ │ ├── PrivacyPage.ets // 隐私政策页面
│ │ ├── RechargeWalletPage.ets // 充值钱包页面
│ │ ├── SettingPage.ets // 设置页面
│ │ └── UserInfoPage.ets // 用户信息页面
│ └──viewmodel
│ ├── MinePageViewModel.ets // 我的页面视图模型
│ ├── MyWalletViewModel.ets // 我的钱包页面视图模型
│ ├── RechargeWalletViewModel.ets // 充值钱包页面视图模型
│ ├── SettingPageViewModel.ets // 设置页面视图模型
│ └── UserInfoViewModel.ets // 用户信息页面视图模型
│
└─products
└─entry/src/main/ets
├── common/Constants.ets // 常量定义
├── components/CustomTabBar.ets // 自定义标签栏组件
├── entryability/EntryAbility.ets // 主入口能力
├── entryformability/EntryFormAbility.ets // 表单主入口能力
├── pages
│ ├── HomePage.ets // 首页
│ ├── Index.ets // 入口页面
│ ├── IndexPage.ets // Tab页面
│ └── IntroducePage.ets // 商场介绍页面
├── utils/WidgetUtil.ets // 卡片工具类
├── viewModels/IndexViewModel.ets // Tab页面ViewModel
└── widget/pages/WidgetCard.ets // 服务卡片 // products/phone/src/main/ets/viewmodel/IndexViewModel.ets
private loginWithHuaweiID(): Promise<HuaweiIDResp> {
return new Promise((resolve, reject) => {
// 创建静默登录请求
let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();
loginRequest.forceLogin = false;
let controller = new authentication.AuthenticationController();
controller.executeRequest(loginRequest).then((data) => {
let loginWithHuaweiIDResponse = data as authentication.LoginWithHuaweiIDResponse;
let authCode = loginWithHuaweiIDResponse.data?.authorizationCode;
let openId = loginWithHuaweiIDResponse.data?.openID;
let unionId = loginWithHuaweiIDResponse.data?.unionID;
// 静默登录成功，返回账号相关的ID数据
resolve({ openId, unionId, authCode } as HuaweiIDResp);
}).catch((error: BusinessError) => {
Logger.error(TAG, 'loginWithHuaweiID error: ' + JSON.stringify(error));
}).finally(() => {
// 静默登录失败，返回空值
resolve({
openId: '',
unionId: '',
authCode: '',
} as HuaweiIDResp);
});
});
}// commons/lib_common/src/main/ets/components/LoginComp.ets
FunctionalButton({
params: {
openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,
label: '',
styleOption: {
styleConfig: new functionalButtonComponentManager
.ButtonConfig()
.size({ width: 48, height: 48 })
.borderRadius(24)
.backgroundImage($r('app.media.ic_tab_code_pass'))
.backgroundImageSize(ImageSize.Cover)
},
},
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onGetPhoneNumber((err, data) => {
if (err) {
// 使用该方法的元服务未获取scope权限时，使用mock账户返回结果。获取权限参考上一节【代码使用效果】的第三步【开发前提工作】
LoginUtils.onBindFail(this.callback);
return;
}
LoginUtils.onBindSuccess(data.code || '', this.callback);
}),
})// commons/lib_common/src/main/ets/utils/LoginUtils.ets
export class LoginUtils {
/**
* 关联成功
* @param code
* @param callback
*/
static onBindSuccess(code: string, callback?: () => void) {
HttpRequestApi.getOpenLoginHm(encodeURIComponent(code)).then((res) => {
if (res.code === HttpCode.SUCCESS) {
let tel = res.data.userTel ?? ''
let userInfo: UserInfoModel = AppStorageV2.connect(UserInfoModel, () => new UserInfoModel())!;
userInfo.userInfo.userTel = `${tel.substring(0, tel.length - 8)}****${tel.substring(tel.length - 4)}`
userInfo.isRelative = true
if (callback) {
callback();
}
} else {
promptAction.showToast({ message: '账号关联失败，请重试~' })
}
}).catch(() => {
promptAction.showToast({ message: '账号关联失败' })
}).finally(() => {
LoadingDialogUtil.close()
})
};
}
import { preferences } from '@kit.ArkData';
import { BusinessError, commonEventManager } from '@kit.BasicServicesKit';
import { formBindingData, formProvider } from '@kit.FormKit';
import { Logger } from 'lib_common';
import { CardManager } from 'module_points';
const TAG = '[WidgetUtil]';
export class WidgetUtil {
// ...
private static readonly _formClickEventName: string = 'form_click_event_name';
// 发布卡片按钮点击事件
public static publishFormClick(formId: string) {
commonEventManager.publish(
WidgetUtil._formClickEventName,
{ data: formId },
(err: BusinessError) => {
if (err) {
Logger.error(
TAG,
`Failed to publish form_click_event_name. Code is ${err.code}, message is ${err.message}`,
);
} else {
Logger.info(TAG, 'Succeeded in publishing form_click_event_name.');
}
},
);
}
// 订阅卡片按钮点击事件
public static async subscribeFormClick(ctx: Context) {
let subscriber: commonEventManager.CommonEventSubscriber | undefined =
undefined;
let subscribeInfo: commonEventManager.CommonEventSubscribeInfo = {
events: [WidgetUtil._formClickEventName],
publisherPermission: '',
};
commonEventManager.createSubscriber(subscribeInfo, (err1, data1) => {
if (data1) {
subscriber = data1;
// 订阅公共事件回调
commonEventManager.subscribe(subscriber, async (err2, data2) => {
if (data2) {
Logger.info(TAG, 'Succeeded in creating subscribeFormClick.');
const formData = CardManager.get().getCardData(true);
// 在回调中获取当前的卡片数据，并通过formProvider.updateForm方法刷新卡片数据
formProvider.updateForm(
data2.data,
formBindingData.createFormBindingData(formData),
);
}
});
}
});
}
// ...
}本模板提供了两种代码集成方式，供开发者自由选用。
开发者可以选择直接基于模板工程开发自己的应用工程。
若开发者已搭建好自己的应用工程，但暂未实现其中的部分场景能力，可以选择取用其中的业务组件，集成在自己的工程中。
以上是本期“便捷生活行业”行业优秀案例的内容，更多行业敬请期待~
欢迎下载使用行业模板“点击下载”，若您有体验和开发问题，或者迫不及待想了解XX行业的优秀案例，欢迎在评论区留言，小编会快马加鞭为您解答~
同时诚邀您添加下方二维码加入“组件模板活动社群”，精彩上新&活动不错过！
???? 本系列持续更新，欢迎点击帖子末尾左下角“
”收藏本帖！
|
期数 |
帖子 |
链接 |
|
第1期 |
HarmonyOS官方模板优秀案例 | 便捷生活行业 · 购物中心 |
|
|
第2期 |
小编加急整理中，敬请期待 |
关注微信