【推荐+1】HarmonyOS官方模板优秀案例 （第4期：餐饮行业 · 美食菜谱）​

​​支付宝​​​​SDK​​​

​​微信支付​​​​SDK​​​

​​银联​​​​SDK​​​

​​腾讯​​​​QQ SDK​​​

​​新浪微博​​​​SDK​​​

​​极光​​​​PUSH SDK​​​

​​友盟移动统计​​​​SDK​​​

​​腾讯微信​​​​SDK​​​

​​高德地图​​​​SDK​​​

​​个推​​​

​​Bugly​​​

​​ShareSDK​​​

​​听云​​​​SDK​​​

Recipes

├─commons/commonlib/src/main

│ ├─ets

│ │ ├─components

│ │ │ BaseHeader.ets // 一级页面标题组件

│ │ │ BuildTitleBar.ets // 二级页面标题组件

│ │ │ HeaderMenuBuilder.ets // 标题菜单内容组件

│ │ │ MenuItemBuilder.ets // 下拉菜单选项

│ │ ├─constants

│ │ │ CommonContants.ets // 公共常量

│ │ │ CommonEnums.ets // 公共枚举值

│ │ ├─types

│ │ │ Types.ets // 公共抽象类

│ │ └─utils

│ │ AccountUtil.ets // 账号工具类

│ │ DialogUtil.ets // 弹窗工具类

│ │ FormatUtil.ets // 格式化工具类

│ │ Logger.ets // 日志工具类

│ │ PermissionUtil.ets // 权限获取工具类

│ │ PreferenceUtil.ets // 数据持久化工具类

│ │ RouterModule.ets // 路由工具类

│ │ WindowUtil.ets // 窗口管理工具类

│ └─resources

├─commons/network/src/main

│ ├─ets

│ │ ├─apis

│ │ │ APIList.ets // 网络请求API

│ │ │ HttpRequest.ets // 网络请求

│ │ ├─mocks

│ │ │ └─MockData

│ │ │ Calories.ets // 热量mock数据

│ │ │ Mine.ets // 我的mock数据

│ │ │ Notice.ets // 通知mock数据

│ │ │ RecipeList.ets // 菜谱mock数据

│ │ │ AxiosMock.ets // mock请求

│ │ │ RequestMock.ets // mock API

│ │ └─types

│ │ Calories.ets // 热量抽象类

│ │ Member.ets // 会员抽象类

│ │ Notice.ets // 通知抽象类

│ │ Recipe.ets // 菜谱抽象类

│ └─resources

│─components/aggregated_ads/src/main 

│ ├─ets

│ │ ├─common

│ │ │ Constant.ets // 常量类

│ │ ├─components

│ │ │ AdServicePage.ets // 广告服务组件

│ │ │ HwAdService.ets // 华为广告

│ │ ├─util

│ │ │ UIUtil.ets // UI工具类

│ │ └─viewmodel

│ │ AggreagetedAdVM.ets // 广告页面数据模型

│ └─resources

│─components/aggregated_login/src/main 

│ ├─ets

│ │ ├─common

│ │ │ Constant.ets // 常量类

│ │ │ Logger.ets // 日志类

│ │ ├─components

│ │ │ AgreementDialog.ets // 协议弹窗组件

│ │ │ LoginService.ets // 登录组件

│ │ ├─model

│ │ │ Index.ets // 数据类型

│ │ │ WXApiWrap.ets // 微信登录数据类型

│ │ └─viewmodel

│ │ AggregatedLoginVM.ets // 登录组件数据模型

│ └─resources

│─components/aggregated_payment/src/main 

│ ├─ets

│ │ ├─common

│ │ │ Constant.ets // 常量类

│ │ ├─components

│ │ │ AggregatedPaymentPicker.ets // 支付组件

│ │ ├─model

│ │ │ Index.ets // 数据类型

│ │ │ WXApiWrap.ets // 微信支付数据类型

│ │ └─viewmodel

│ │ AggregatedPaymentVM.ets // 支付组件数据模型

│ └─resources

│─components/base_ui/src/main 

│ ├─ets

│ │ ├─components

│ │ │ BaseTabs.ets // Tabs组件

│ │ └──types

│ │ Index.ets // 数据类型

│ └─resources

│─components/calorie_calculation/src/main 

│ ├─ets

│ │ ├─components

│ │ │ BarChart.ets // 协议弹窗组件

│ │ │ CalorieCalculation.ets // 热量计算组件

│ │ │ CaloriesSummary.ets // 热量汇总组件

│ │ │ FoodDiary.ets // 饮食计划组件

│ │ ├─types

│ │ │ Index.ets // 数据类型

│ │ └─viewModels

│ │ CaloriesSummaryVM.ets // 热量计算数据模型

│ └─resources

│─components/featured_recipes/src/main 

│ ├─ets

│ │ ├─components

│ │ │ FeaturedRecipes.ets // 菜谱瀑布流组件

│ │ │ RecommendedCard.ets // 菜谱卡片

│ │ │─types

│ │ │ Index.ets // 数据类型

│ │ └─utils

│ │ LazyDataSource.ets // 懒加载对象

│ │ Logger.ets // 日志工具

│ │ ObservedArray.ets // 数组监听工具

│ └─resources

│─components/home_search/src/main 

│ ├─ets

│ │ ├─components

│ │ │ HomeSearch.ets // 搜索组件

│ │ │ SearchKeys.ets // 热搜词组件

│ │ │ SearchResult.ets // 搜索结果组件

│ │ └─types

│ │ Index.ets // 数据类型

│ └─resources

│─components/link_category/src/main 

│ ├─ets

│ │ ├─components

│ │ │ LinkCategory.ets // 分类列表组件

│ │ └─types

│ │ Index.ets // 数据类型

│ └─resources

│─components/personal_homepage/src/main 

│ ├─ets

│ │ ├─components

│ │ │ BloggerInfomation.ets // 个人介绍组件

│ │ │ PersonalHomepage.ets // 个人中心组件

│ │ └─types

│ │ Index.ets // 数据类型

│ └─resources

│─components/shopping_basket/src/main 

│ ├─ets

│ │ ├─components

│ │ │ IngredientList.ets // 用料列表

│ │ │ PurchaseIngredients.ets // 用料组件

│ │ │ ShoppingBasket.ets // 菜篮子组件

│ │ └─types

│ │ Index.ets // 数据类型

│ └─resources

│─components/upload_recipe/src/main 

│ ├─ets

│ │ ├─components

│ │ │ UploadRecipe.ets // 上传菜谱组件

│ │ ├─types

│ │ │ Index.ets // 数据类型

│ │ └─viewmodel

│ │ UploadRecipeVM.ets // 上传菜谱数据模型

│ └─resources

│─features/calories/src/main 

│ ├─ets

│ │ ├─pages

│ │ │ CaloriesPage.ets // 热量页面

│ │ │ DietPlanPage.ets // 饮食计划食物列表页面

│ │ │ SearchFoodPage.ets // 食物搜索页面

│ │ ├─types

│ │ │ Index.ets // 数据对象

│ │ └─viewModels

│ │ CaloriesPageVM.ets // 热量页面数据模型

│ │ DietPlanPageVM.ets // 食物列表页面数据模型

│ │ SearchFoodPageVM.ets // 食物搜索页面数据模型

│ └─resources

│─features/classification/src/main 

│ ├─ets

│ │ ├─constants

│ │ │ Enums.ets // 枚举数据

│ │ ├─pages

│ │ │ ClassificationPage.ets // 分类页面

│ │ │ DishesPage.ets // 菜谱详情页面

│ │ │ ShoppingBasketPage.ets // 菜篮子页面

│ │ ├─types

│ │ │ Index.ets // 菜谱数据对象

│ │ └─viewModels

│ │ ClassificationVM.ets // 分类页面数据模型

│ │ DishesVM.ets // 菜谱详情页面数据模型

│ └─resources

│─features/home/src/main 

│ ├─ets

│ │ ├─pages

│ │ │ BloggerProfilePage.ets // 博主信息页面

│ │ │ FollowersPage.ets // 博主关注页面

│ │ │ HomePage.ets // 首页页面

│ │ │ SearchPage.ets // 搜索页面

│ │ ├─types

│ │ │ Index.ets // 首页数据对象

│ │ └─viewModels

│ │ BloggerProfilePageVM.ets // 博主信息页面数据模型

│ │ FollowersPageVM.ets // 博主关注页面数据模型

│ │ HomePageVM.ets // 首页页面数据模型

│ │ SearchPageVM.ets // 搜索页面数据模型

│─features/mine/src/main 

│ ├─ets

│ │ ├─components

│ │ │ ConfirmDialogComponent.ets // 确认弹窗组件

│ │ │ Recipes.ets // 菜谱卡片组件

│ │ ├─mapper

│ │ │ Index.ets // 数据映射

│ │ ├─model

│ │ │ Index.ets // 数据类型

│ │ ├─pages

│ │ │ BrowsingHistory.ets // 浏览历史页面

│ │ │ MemberCenterPage.ets // 会员中心页面

│ │ │ MinePage.ets // 我的页面

│ │ │ MyCollection.ets // 我的收藏页面

│ │ │ NoticeCenterPage.ets // 通知中心页面

│ │ │ NoticeDetailPage.ets // 通知详情页面

│ │ │ PersonalInfo.ets // 个人信息页面

│ │ │ PrivacyPolicyDetailPage.ets // 用户协议页面

│ │ │ QuickLoginPage.ets // 一键登录页面

│ │ │ SettingsPage.ets // 设置页面

│ │ │ SideBarPage.ets // 服务菜单页面

│ │ │ TermsOfServicePage.ets // 隐私政策页面

│ │ │ UploadRecipe.ets // 上传菜谱页面

│ │ ├─types

│ │ │ Index.ets // 抽象类

│ │ ├─util

│ │ │ MockApi.ets // 支付mock数据

│ │ │ OrderInfoUtil.ets // 支付mock参数工具

│ │ │ SignUtils.ets // 支付mock签名工具

│ │ └─viewModels

│ │ BrowsingHistoryVM.ets // 浏览历史页面数据模型

│ │ MemberCenterPageVM.ets // 会员中心页面数据模型

│ │ MinePageVM.ets // 我的页面数据模型

│ │ MyCollectionVM.ets // 我的收藏页面数据模型

│ │ MyRecipeVM.ets // 我的菜谱页面数据模型

│ │ NoticeCenterPageVM.ets // 通知中心页面数据模型

│ │ SettingsPageVM.ets // 设置页面数据模型

│ │ UploadRecipeVM.ets // 上传菜谱页面数据模型

│ └─resources

└─products/entry/src/main 

├─ets

│ ├─entryability

│ │ EntryAbility.ets // 应用程序入口

│ ├─entryformability

│ │ EntryFormAbility.ets // 卡片程序入口

│ ├─pages

│ │ Index.ets // 入口页面

│ │ LaunchAdPage.ets // 广告页面

│ │ LaunchPage.ets // 开屏页面

│ │ MainEntry.ets // 主页面

│ │ PrivacyPolicyPage.ets // 隐私协议页面

│ ├─types

│ │ Types.ets // 抽象类

│ ├─viewModels

│ │ MainEntryVM.ets // 入口页面数据

│ └─widget/pages

│ WidgetCard.ets // 卡片页面

└─resources

javascript

// components/aggregated_login/src/main/ets/components/LoginService.ets

// 登录组件

LoginWithHuaweiIDButton({

params: {

style: loginComponentManager.Style.BUTTON_CUSTOM,

loginType: loginComponentManager.LoginType.QUICK_LOGIN,

supportDarkMode: true,

customButtonParams: {

fontColor: loginComponentManager.FontColor.WHITE,

backgroundColor: this.loginBtnBgColor,

},

},

controller: this.controller,

});

...

// 登录方法控制器

controller: loginComponentManager.LoginWithHuaweiIDButtonController =

new loginComponentManager.LoginWithHuaweiIDButtonController()

// 需要用户同意协议才能完成华为账号登录，请先设置协议状态为NOT_ACCEPTED，当用户同意协议后设置协议状态为ACCEPTED，才可以完成华为账号登录

.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)

.onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {

// 处理用户点击一键登录按钮逻辑，灰度传入undefined模拟流程，应用申请权限后，传入error

this.handleLoginWithHuaweiIDButton(undefined, response);

});

...

// 处理点击一键登录后的方法

handleLoginWithHuaweiIDButton(error: BusinessError | undefined,

response: loginComponentManager.HuaweiIDCredential) {

this.enableStatus = false;

// if部分内容配置好可用的调试证书和client_id后再放开

if (error) {

Logger.error(this.domainId, this.logTag,

`Failed to click LoginWithHuaweiIDButton. Code is ${error.code}, message is ${error.message}`);

this.error = error;

if (error.code === LoginErrorCode.ERROR_CODE_NETWORK_ERROR) {

AlertDialog.show(

{

message: 'No Internet connection. Check your network settings. ',

offset: { dx: 0, dy: -12 },

alignment: DialogAlignment.Bottom,

autoCancel: false,

confirm: {

value: 'OK',

action: () => {

},

},

},

);

} else if (error.code === LoginErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) {

// 未同意协议，弹出协议弹框，推荐使用该回调方式

this.agreementDialog.open();

this.customerDiaLogOpen = true;

} else if (error.code === LoginErrorCode.ERROR_CODE_LOGIN_OUT) {

// 华为账号未登录提示

this.showToast($r('app.string.not_login_in'));

} else if (error.code === LoginErrorCode.ERROR_CODE_NOT_SUPPORTED) {

// 账号不支持该scopes或permissions提示

this.showToast($r('app.string.scope_not_supported'));

} else if (error.code === LoginErrorCode.ERROR_CODE_NOT_REQUIRED_SCOPE_OR_PERMISSION) {

// 应用没有申请scope权限

this.showToast($r('app.string.app_not_required_scopes_or_permissions'));

} else {

// 其他提示系统或服务异常

this.showToast($r('app.string.service_error'));

}

this.enableStatus = true;

return;

}

try {

if (this.isSelected) {

// 配置好可用的调试证书和client_id后需要处理response

Logger.info(this.domainId, this.logTag, 'Succeed in clicking LoginWithHuaweiIDButton.');

if (this.response.idToken !== undefined) {

this.response = response;

// 模拟登录成功后回调

this.loginFinishedCb(true, this.unionID)

}

// 模拟登录成功后回调

this.loginFinishedCb(false)

} else {

this.agreementDialog.open();

this.customerDiaLogOpen = true;

}

} catch (e) {

Logger.info(this.domainId, this.logTag,

`Failed to LoginWithHuaweiIDButton, errCode: ${e.code}, errMessage: ${e.message}`);

AlertDialog.show(

{

message: $r('app.string.service_error'),

offset: { dx: 0, dy: -12 },

alignment: DialogAlignment.Bottom,

autoCancel: false,

confirm: {

value: 'OK',

action: () => {

},

},

},

);

} finally {

this.enableStatus = true;

}

}

javascript

// components/link_category/src/main/ets/components/LinkCategory.ets

// 列表页

Row() {

List({ space: 8, scroller: this.titleItemScroller }) {

ForEach(this.recipeCategoryList, (item: RecipeCategory, index: number) => {

ListItem() {

this.leftListBuilder(item.name, index)

}

}, (item: RecipeCategory, index: number) => item.name + index)

}

.width(92)

.height('100%')

.backgroundColor('#F1F3F5')

.listDirection(Axis.Vertical) // 排列方向

.scrollBar(BarState.Off)

.contentStartOffset(12)

.contentEndOffset(12)

List({ space: 12, scroller: this.scroller }) {

ForEach(this.recipeCategoryList, (item: RecipeCategory) => {

ListItemGroup({

header: this.listTitleBuilder(item.name),

space: 12,

}) {

ListItem() {

Grid() {

ForEach(item.recipeList, (listItem: RecipeBriefInfo) => {

GridItem() {

Column() {

Image($r(`app.media.${listItem.thumbnail}`)).width(76).height(76).borderRadius(8)

Text(listItem.title)

.fontSize(14)

.fontWeight(FontWeight.Medium)

.fontColor($r('sys.color.font_primary'))

.textAlign(TextAlign.Center)

.constraintSize({ maxWidth: 76 })

.maxLines(2)

.margin({ top: 4 })

.textOverflow({ overflow: TextOverflow.Ellipsis })

}

}.onClick(() => {

this.onRecipeClick(listItem)

})

}, (listItem: RecipeBriefInfo) => `${item.id}${listItem.id}`)

}

.rowsGap(8)

.columnsGap(8)

.columnsTemplate('1fr 1fr 1fr')

}

}

}, (item: RecipeCategory) => item.id.toString())

}

.layoutWeight(1)

.height('100%')

.margin({ left: 8, right: 16 })

.scrollBar(BarState.Off)

.sticky(StickyStyle.None)

.contentStartOffset(12)

.contentEndOffset(12)

.onScrollIndex((start: number) => this.currentIndexChangeAction(start, false))

}.layoutWeight(1)

...

// 下标索引处理

currentIndexChangeAction(index: number, isClassify: boolean): void {

if (this.currentIndex !== index) {

this.changeCurrentIndex(index);

if (isClassify) {

this.scroller.scrollToIndex(index);

} else {

this.titleItemScroller.scrollToIndex(index);

}

}

}

javascript

// commons/lib_common/src/main/ets/utils/LoginUtils.ets

// 环形组件

Progress({ value: this.todayCalories, total: 2000, type: ProgressType.Ring })

.width(176).style({ strokeWidth: 20 })

.color(this.vm.gradientColor)

...

// components/calorie_calculation/src/main/ets/viewModels/CaloriesSummaryVM.ets

// 渐变色设置

gradientColor: LinearGradient =

new LinearGradient([{ color: '#C6F093', offset: 0.25 }, { color: '#83CE26', offset: 0.5 },

{ color: '#88DB23', offset: 0.85 }, { color: '#88DB24', offset: 1.0 }])

javascript

// components/calorie_calculation/src/main/ets/components/BarChart.ets

// 柱状图参数设置

this.name = this.xData[this.xData.length - 1]

this.rate = this.seriesData[this.seriesData.length - 1]

// Step1:必须：初始化图表配置构建类

this.model = new BarChartModel();

// Step2:配置图表指定样式，各部件间没有先后之分

// 为图表添加数据选择的监听器

this.model.setOnChartValueSelectedListener(this.valueSelectedListener);

// 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件

let description: Description | null = this.model.getDescription()

if (description) {

description.setEnabled(false);

}

// 获取图表图例部件，设置图表图例部件不可用

let legend: Legend | null = this.model.getLegend();

if (legend) {

legend.setEnabled(false);

}

// 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签

this.model.setMaxVisibleValueCount(7);

// 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等

this.limitLine1 = new LimitLine(120, 'Upper Limit');

this.limitLine1.setLineWidth(4);

//设置虚线样式

this.limitLine1.enableDashedLine(10, 10, 0);

//设置标签位置

this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);

this.limitLine1.setTextSize(10);

this.limitLine2 = new LimitLine(50, 'Lower Limit');

this.limitLine2.setLineWidth(4);

this.limitLine2.enableDashedLine(10, 10, 0);

this.limitLine2.setLineColor(Color.Yellow);

this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM);

this.limitLine2.setTextSize(10);

// 设置图表左Y轴信息

this.leftAxis = this.model.getAxisLeft();

if (this.leftAxis) {

//设置绘制标签个数

this.leftAxis.setLabelCount(7, false);

//设置标签位置

this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART)

//设置距离顶部距离

this.leftAxis.setSpaceTop(15);

//设置最小值

this.leftAxis.setAxisMinimum(0);

//设置最大值

this.leftAxis.setAxisMaximum(2000);

this.leftAxis.setGridDashedLine({ dash: [2, 2, 0], offset: 0 })

this.leftAxis.setTextColor('#E6000000')

this.leftAxis.setTextSize(12)

}

// 设置图表右Y轴信息

this.rightAxis = this.model.getAxisRight();

if (this.rightAxis) {

this.rightAxis.setEnabled(false);

}

class YAxisValueFormatter implements IAxisValueFormatter {

getFormattedValue(value: number, axis: AxisBase): string {

//将原本存在的对应的value转换成需要的字符串

return value.toString();

}

}

this.leftAxis?.setValueFormatter(new YAxisValueFormatter())

// 设置X轴信息

this.xAxis = this.model.getXAxis();

if (this.xAxis) {

this.xAxis.setPosition(XAxisPosition.BOTTOM);

this.xAxis.setDrawGridLines(false);

this.xAxis.setGranularity(1);

this.xAxis.setLabelCount(this.xData.length);

this.xAxis.setTextColor('#E6000000')

this.xAxis.setTextSize(12)

}

class XAxisValueFormatter implements IAxisValueFormatter {

data: string[] = []

constructor(data: string[]) {

this.data = data

}

getFormattedValue(value: number, axis: AxisBase): string {

//将原本存在的对应的value转换成需要的字符串

let day = new Date().getDay() - 1

if (day === value) {

return '今日'

}

return xMap[value];

}

}

this.xAxis?.setValueFormatter(new XAxisValueFormatter(this.xData))

// 生成图表数据

let barData: BarData = this.getBarData();

// 将数据与图表配置类绑定

this.model.setData(barData);

// 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据

this.model.setVisibleXRangeMaximum(20);

...

// 柱状图组件

BarChart({ model: this.model }).width('100%').height(190)