【宝藏贴】HarmonyOS官方模板优秀案例（第1期：便捷生活 · 购物中心）​

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> {
returnnewPromise((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
exportclassLoginUtils {
/**
* 关联成功
* @param code
* @param callback
*/
staticonBindSuccess(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]';

exportclassWidgetUtil {
// ...
privatestaticreadonly _formClickEventName: string = 'form_click_event_name';

// 发布卡片按钮点击事件
publicstaticpublishFormClick(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.');
}
},
);
}

// 订阅卡片按钮点击事件
publicstaticasyncsubscribeFormClick(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),
);
}
});
}
});
}

// ...
}