【小而美】HarmonyOS官方模板优秀案例 （第5期：工具行业 · 日历应用）​

​​岳鹰全景监控​​​​SDk​​​

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

​​穿山甲广告​​​​SDK​​​

​​快手联盟广告​​​​SDK​​​

​​友盟​​​​SDK​​​

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

​​腾讯优量汇​​​

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

​​高德地图​​​

​​百度地图​​​

​​腾讯地图定位​​​

​​高德地图定位​​​

日历模板

|-- 万年历

| |-- 日历选择

| |-- 吉日查询

| |-- 日期计算

| |-- 节日节气

| └-- 宜忌展示

|-- 黄历

| |-- 日期切换

| |-- 宜忌展示

| |-- 五行、冲煞

| |-- 彭祖百忌

└-- 我的

| |-- 个人信息

| └-- 设置

| └-- 主题切换

| └-- 隐私协议

| └-- 用户协议

Application

├──├──commons

│ ├──common // 公共能力层

│ ├──src/main/ets // 基础能力

│ │ └──components // 公共组件

│ │ └──dividerTmp // 下划线公共组件

│ │ └──https // 网络请求库

│ │ └──models // 公共接口常量

│ │ └──quickLogin // 华为账号一键登录

│ │ └──style // 公共样式

│ │ └──utils // 工具类

│ │ └──viewmodels // 接口层

│ └──Index.ets // 对外接口类

│ ├──router_module // 全局路由组件

├──├──components // 公共组件

│ ├──base_apis // 通用组件（模态框，弹窗，选择器等）

│ ├──base_calendar // 日历组件

│ ├──calendar_almanac // 黄历组件

│ ├──calendar_events // 重要提醒组件

│ ├──date_calculation // 日期计算组件

│ ├──festival_solar // 节日节气组件

│ ├──login_info // 登录组件组件

│ ├──vip_center // 开通会员组件

│ ├──traffic_restriction // 城市限行组件

│ ├──yiji_query // 宜忌查询组件

├──features // 基础特性层

│ ├──almanac/src/main/ets // 黄历

│ │ ├──pages // 首页入口

│ │ ├──AlmanacView// 黄历入口

│ ├──almanac/src/main/resources // 资源文件目录

│ ├──almanac/Index.ets // 对外接口类

│ ├──perpetual/src/main/ets // 万年历

│ │ ├──components // 万年历组件

│ │ ├──pages 

│ │ ├──PerpetualCalendar// 万年历组件入口

│ ├──perpetual/src/main/resources // 资源文件目录

│ ├──perpetual/Index.ets // 对外接口类

│ ├──mine/src/main/ets // 我的（包含一键登录）

│ │ └──pages // 我的入口页

│ │ ├──MinePage// 登录

│ │ └──components // 我的页面入口

│ └──mine/src/main/resources // 资源文件目录

└─product/entry/src/main 

├─ets

│ ├─widget

│ │ ├──pages 

│ │ ├──WidgetCard.ets // 服务卡片 

│ ├─entryability

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

│ ├─page

│ │ ├──Index.ets // 入口

│ │ ├──PrivacyPage.ets // 隐私协议 

│ │ ├──SafePage.ets // 隐私协议弹窗 

│ │ ├──SplashPage.ets // 闪屏页 

│ │ ├──TabContainer.ets // tab页入口

└─resources

typescript

getQuickLoginAnonymousPhone() {

// 创建授权请求，并设置参数

const authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();

// 获取手机号需要传如下scope，传参数之前需要先申请对应scope权限,才能返回对应数据

authRequest.scopes = ['quickLoginAnonymousPhone'];

authRequest.permissions = ['serviceauthcode'];

// 用户是否需要登录授权，该值为true且用户未登录或未授权时，会拉起用户登录或授权页面

authRequest.forceAuthorization = false;

// 用于防跨站点请求伪造

authRequest.state = util.generateRandomUUID();

try {

const controller = new authentication.AuthenticationController(getContext(this));

controller.executeRequest(authRequest).then((response) => {

const authorizationWithHuaweiIDResponse = response as authentication.AuthorizationWithHuaweiIDResponse;

const state = authorizationWithHuaweiIDResponse.state;

if (state !== undefined && authRequest.state !== state) {

hilog.error(0x0000, 'testTag', `Failed to authorize. The state is different, response state: ${state}`);

return;

}

hilog.info(0x0000, 'testTag', 'Succeeded in authentication.');

const authorizationWithHuaweiIDCredential = authorizationWithHuaweiIDResponse.data!;

const code = authorizationWithHuaweiIDCredential.authorizationCode;

const unionID = authorizationWithHuaweiIDCredential.unionID;

const openID = authorizationWithHuaweiIDCredential.openID;

const anonymousPhone = authorizationWithHuaweiIDCredential?.extraInfo?.quickLoginAnonymousPhone as string;

if (anonymousPhone) {

hilog.info(0x0000, 'testTag', 'Succeeded in authentication.');

this.quickLoginAnonymousPhone = anonymousPhone;

return;

} else {

this.quickLoginAnonymousPhone = '123xxxxxx456'

}

// 开发者处理code、unionID、openID

this.authorizationCode = code

}).catch((err: BusinessError) => {

this.dealAllPhoneError(err);

});

} catch (error) {

this.dealAllPhoneError(error);

}

}

typescript

class CalendarManage {

context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;

private static _instance: CalendarManage

static get instance() {

if (!CalendarManage._instance) {

CalendarManage._instance = new CalendarManage()

}

return CalendarManage._instance

}

public getCalendarPermission(): Promise<string> {

const permissions: Permissions[] = ['ohos.permission.READ_CALENDAR', 'ohos.permission.WRITE_CALENDAR'];

let atManager = abilityAccessCtrl.createAtManager();

return new Promise((resolve, reject) => {

atManager.requestPermissionsFromUser(this.context, permissions).then((result: PermissionRequestResult) => {

resolve('success')

}).catch((error: BusinessError) => {

reject('failed')

console.error(`get Permission error, error. Code: ${error.code}, message: ${error.message}`);

})

})

}

/*

* 添加提醒到日历

* */

private async calendarEvent(calendar: calendarManager.Calendar,

calendarInfo: UserEventItem): Promise<CalendarInfo> {

const event: calendarManager.Event = {

title: calendarInfo.content,

type: calendarManager.EventType.NORMAL,

id: calendarInfo.eventId,

isLunar:calendarInfo.date[0].isLunar,

startTime: new Date(dayjs(calendarInfo.date[0].date).format('YYYY-MM-DD') + ' ' +

calendarInfo.date[0].time).getTime(),

endTime: new Date(dayjs(calendarInfo.date[1].date).format('YYYY-MM-DD') + ' ' +

calendarInfo.date[1].time).getTime(),

reminderTime: CalendarManage.getReminderTime(calendarInfo.remindList),

recurrenceRule: {

recurrenceFrequency: repeatMap[calendarInfo.repeatType],

},

};

return new Promise(async (resolve, reject) => {

if (calendarInfo.eventId) {

calendar.updateEvent(event).then(() => {

resolve({

status: 'success',

})

}).catch((err: BusinessError) => {

console.error(`Failed to update event. Code: ${err.code}, message: ${err.message}`);

});

} else {

calendar.addEvent(event).then((data: number) => {

console.info(`Succeeded in adding event, id -> ${data}`);

resolve({

status: 'success',

data: data,

})

}).catch((err: BusinessError) => {

resolve({

status: 'failed',

})

});

}

})

}

/*

* 根据提醒参数创建日历参数

* */

public async calendarEventCreate(calendarInfo: UserEventItem, operationType?: string): Promise<CalendarInfo> {

if (calendarInfo.remindList[0] === '不提醒') {

return {

status: 'not need calendar',

}

}

let permission = await this.getCalendarPermission()

if (permission !== 'success') {

return {

status: 'permission failed',

}

}

let calendar: calendarManager.Calendar | undefined = undefined;

// 指定日历账户信息

const calendarAccount: calendarManager.CalendarAccount = {

name: '日历模板',

type: calendarManager.CalendarType.LOCAL,

// 日历账户显示名称，该字段如果不填，创建的日历账户在界面显示为空字符串。

displayName: '日历模板',

};

let calendarMgr: calendarManager.CalendarManager | null = calendarManager.getCalendarManager(this.context);

// 创建日历账户

try {

calendar = await calendarMgr?.createCalendar(calendarAccount)

let res: CalendarInfo

if (operationType === 'delete') {

res = await this.calendarEventDelete(calendar, calendarInfo)

} else {

res = await this.calendarEvent(calendar, calendarInfo)

}

return res

} catch (e) {

return {

status: 'calendar operation failed',

}

}

}

/*

* 删除已经添加到日历的提醒

* */

private async calendarEventDelete(calendar: calendarManager.Calendar,

calendarInfo: UserEventItem): Promise<CalendarInfo> {

try {

await calendar.deleteEvent(calendarInfo.eventId)

return {

status: 'success',

}

} catch (e) {

return {

status: 'failed',

}

}

}

}

typescript

/**

* 抛出句柄

*/

export class CalendarController {

public static vm: CalendarVM = CalendarVM.instance;

public setSelectDate(date: Date) {

CalendarController.vm.changeDate(date)

}

public getTodayYiJi() {

CalendarController.vm.getTodayYiJi()

}

}

typescript

/**

* 切换日期

*/ 

public changeDate(date: Date) {

let gap = (date.getFullYear() - this.curDate.year()) * 12 + date.getMonth() - this.curDate.month()

this.dateListSource.clearData()

let i = -2

while (i <= 2) {

let month = this.getDateList(i + gap)

this.dateListSource.pushData(month)

i++

}

this.curIndex = 2

this.selectDate = dayjs(date)

}

typescript

/**

* 获取今日宜和忌

*/ 

public getTodayYiJi() {

const todayLunar = Lunar.fromDate(new Date(this.selectDate.format('YYYY-MM-DD')));

const yi = todayLunar.getDayYi();

const ji = todayLunar.getDayJi();

this.todayYiJi = {

yi,

ji,

}

}

typescript

/**

* 展示日历

*/ 

Swiper(this.swiperController) {

LazyForEach(this.vm.dateListSource, (item: DateModelList) => {

Grid() {

ForEach(item, (item: DateModel) => {

GridItem() {

}

},(item: DateModel) => JSON.stringify(item));

}

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

.maxCount(7)

.columnsGap(0)

.rowsGap(0)

.padding({ bottom: 20 })

},(item: DateModelList) => JSON.stringify(item));

}

typescript

/**

* 获取位置权限

*/ 

getCurrentLocation() {

this.permissionRequestUtils.locationPermissionRequest().then(async (res) => {

if (res === 'success') {

this.locationPermission = res

this.permissionRequestUtils.getCurrentLocation().then((res: string) => {

this.location = res

}).catch((err:BusinessError) => {

this.location = '北京'

})

} else {

this.dealError()

}

}).catch(() => {

this.dealError()

})

}