共计 6079 个字符,预计需要花费 16 分钟才能阅读完成。
在制作一款打卡 App 的时候有这么一个需求 — 创建提醒到系统日历中,也就是利用系统日历来做事件的提醒,这么做的好处很明显,App 无需处理提醒的细节,也无需后台。这个 App 是基于 Cordova 开发的,并没有访问系统日历的接口,我们只能通过插件来完成,这是一个有趣的挑战。
APP 设计
请看下图,App 允许创建事项时,可以设置重复,开始,结束和提醒时间四个选项:
这四个选项对创建到日历的事件都有影响:
重复 可以设置一周中的任意几天,比如选择周一到周五表示只要工作日。
开始 从哪天天开始
结束 到哪天结束
提醒时间 在每天的哪个时间发出提醒
这个四个组合起来就构成一个日历事件。
插件
Cordova 平台实际上是一个基于 web 的平台,所以除了 webview 提供的能力,其他和设备交互的功能全部依赖于插件来完成,插件的安装和使用通常并不困难,比如增加一个关于状态栏控制的插件,可以在项目下这么做:
cordova plugin add cordova-plugin-statusbar
然后在 js 里调用插件提供的接口就可以了,更多的关于 cordova 平台和插件的使用,我有一个视频课程可以参考。很明显,创建系统日历事件也需要通过插件来做,搜索之后我们可以发现,完成这个功能的插件并不多,其中使用比较多的是 cordova-plugin-calendar,试着安装
cordova plugin add cordova-plugin-calendar
这个插件可以支持 android 和 iOS,我们现在 android 下测试,首先在 js 里写下下面的代码:
let calOptions = window.plugins.calendar.getCalendarOptions()
calOptions.firstReminderMinutes = 0
calOptions.secondReminderMinutes = null
calOptions.recurrenceEndDate = actionRemindEnd(action)
if (action.repeat.length === 7) {
calOptions.recurrence = ‘daily’
}
else {
calOptions.recurrence = ‘weekly’
calOptions.recurrenceByDay = dateRepeat2Calendar(action.repeat)
}
window.plugins.calendar.createEventWithOptions(
action.name, null, ‘dayday’, eventTime, new Date(eventTime.getTime() + 15 * 60000), calOptions,
(result) => {
}, (err) => {
})
action 保存了用户所创建的一个活动事件的所有信息,其中有两个函数就不展开了,看起来应该可以了,实测的结果却是,日历事件创建起来了,没有报错,但是重复有问题,并没有能一直重复下去,在重复数次之后,事件就停了,类似下图这样,到 15 号事件就没有了:
修改插件
在这种情况下,调试 js 代码已经没有什么帮助了,js 代码已经完全按照插件的要求来传递了参数,只能打开 android studio,加载 cordova 项目下 platforms/android 下的这个工程,这个工程就是一个标准的 android 项目,打开之后可以定位到这个插件所提供的源码文件,找到 AbstractCalendarAccessor.java,其中的 createEvent 函数完成在 android 下创建一个日历事件所做的事情,代码如下:
public String createEvent(Uri eventsUri, String title, long startTime, long endTime, String description,
String location, Long firstReminderMinutes, Long secondReminderMinutes,
String recurrence, int recurrenceInterval, String recurrenceWeekstart,
String recurrenceByDay, String recurrenceByMonthDay, Long recurrenceEndTime, Long recurrenceCount,
String allday,
Integer calendarId, String url) {
ContentResolver cr = this.cordova.getActivity().getContentResolver();
ContentValues values = new ContentValues();
final boolean allDayEvent = “true”.equals(allday) && isAllDayEvent(new Date(startTime), new Date(endTime));
if (allDayEvent) {
//all day events must be in UTC time zone per Android specification, getOffset accounts for daylight savings time
values.put(Events.EVENT_TIMEZONE, “UTC”);
values.put(Events.DTSTART, startTime + TimeZone.getDefault().getOffset(startTime));
values.put(Events.DTEND, endTime + TimeZone.getDefault().getOffset(endTime));
} else {
values.put(Events.EVENT_TIMEZONE, TimeZone.getDefault().getID());
values.put(Events.DTSTART, startTime);
values.put(Events.DTEND, endTime);
}
values.put(Events.ALL_DAY, allDayEvent ? 1 : 0);
values.put(Events.TITLE, title);
// there’s no separate url field, so adding it to the notes
if (url != null) {
if (description == null) {
description = url;
} else {
description += ” ” + url;
}
}
values.put(Events.DESCRIPTION, description);
values.put(Events.HAS_ALARM, firstReminderMinutes > -1 || secondReminderMinutes > -1 ? 1 : 0);
values.put(Events.CALENDAR_ID, calendarId);
values.put(Events.EVENT_LOCATION, location);
if (recurrence != null) {
String rrule = “FREQ=” + recurrence.toUpperCase() +
((recurrenceInterval > -1) ? “;INTERVAL=” + recurrenceInterval : “”) +
((recurrenceWeekstart != null) ? “;WKST=” + recurrenceWeekstart : “”) +
((recurrenceByDay != null) ? “;BYDAY=” + recurrenceByDay : “”) +
((recurrenceByMonthDay != null) ? “;BYMONTHDAY=” + recurrenceByMonthDay : “”) +
((recurrenceEndTime > -1) ? “;UNTIL=” + nl.xservices.plugins.Calendar.formatICalDateTime(new Date(recurrenceEndTime)) : “”) +
((recurrenceCount > -1) ? “;COUNT=” + recurrenceCount : “”);
values.put(Events.RRULE, rrule);
}
String createdEventID = null;
try {
Uri uri = cr.insert(eventsUri, values);
createdEventID = uri.getLastPathSegment();
Log.d(LOG_TAG, “Created event with ID ” + createdEventID);
if (firstReminderMinutes > -1) {
ContentValues reminderValues = new ContentValues();
reminderValues.put(“event_id”, Long.parseLong(uri.getLastPathSegment()));
reminderValues.put(“minutes”, firstReminderMinutes);
reminderValues.put(“method”, 1);
cr.insert(Uri.parse(CONTENT_PROVIDER + CONTENT_PROVIDER_PATH_REMINDERS), reminderValues);
}
if (secondReminderMinutes > -1) {
ContentValues reminderValues = new ContentValues();
reminderValues.put(“event_id”, Long.parseLong(uri.getLastPathSegment()));
reminderValues.put(“minutes”, secondReminderMinutes);
reminderValues.put(“method”, 1);
cr.insert(Uri.parse(CONTENT_PROVIDER + CONTENT_PROVIDER_PATH_REMINDERS), reminderValues);
}
} catch (Exception e) {
Log.e(LOG_TAG, “Creating reminders failed, ignoring since the event was created.”, e);
}
return createdEventID;
}
这段代码并不长,在 Android Studio 下设置断点,连接真机调试,发现整个过程没有任何错误,日历事件已经创建起来,但就是重复次数不正确。好吧,找到 android api 参考,看看官方文档中怎么说的:
Here are the rules for inserting a new event:
You must include CALENDAR_ID and DTSTART.
You must include an EVENT_TIMEZONE. To get a list of the system’s installed time zone IDs, use getAvailableIDs(). Note that this rule does not apply if you’re inserting an event through the INSERT Intent, described in Using an intent to insert an event—in that scenario, a default time zone is supplied.
For non-recurring events, you must include DTEND.
For recurring events, you must include a DURATION in addition to RRULE or RDATE. Note that this rule does not apply if you’re inserting an event through the INSERT Intent, described in Using an intent to insert an event—in that scenario, you can use an RRULE in conjunction with DTSTART and DTEND, and the Calendar application converts it to a duration automatically.
仔细对照代码和文档,我们发现 DURATION 这个参数并没有按照文档来传递,好吧,我们修改一下关键代码:
if (allDayEvent) {
//all day events must be in UTC time zone per Android specification, getOffset accounts for daylight savings time
values.put(Events.EVENT_TIMEZONE, “UTC”);
values.put(Events.DTSTART, startTime + TimeZone.getDefault().getOffset(startTime));
if (recurrence == null) {
values.put(Events.DTEND, endTime + TimeZone.getDefault().getOffset(endTime));
} else {
values.put(Events.DURATION, “P” + ((endTime – startTime) / (24 * 60 * 60000)) + “D”);
}
} else {
values.put(Events.EVENT_TIMEZONE, TimeZone.getDefault().getID());
values.put(Events.DTSTART, startTime);
if (recurrence == null) {
values.put(Events.DTEND, endTime);
} else {
values.put(Events.DURATION, “P” + ((endTime – startTime) / 60000) + “M”);
}
}
修改后的代码再次测试,这次 ok 了,这个例子表明了 cordova 生态的一个现象,插件质量参差不齐,有些插件可能需要我们的修改才能工作。
应用修改
为了使用修改后的插件,我们可以删除原来的插件,使用 fork 并修改后的插件,很简单,方法如下:
cordova plugin remove cordova-plugin-calendar
cordova plugin add https://github.com/i38/Calendar-PhoneGap-Plugin.git
所有其他代码都不用修改,这是 cordova 很灵活的一个地方,这样一切都 ok 了,最后附上完整 App 的链接,有兴趣可以参考:天天。