目前为止,我们完成了应用的主体功能的制作:我们可以拍照,将他们展示到一个列表上,删除照片,从存储加载照片,播放一个slideshow等等。我们现在要加入的功能是“有了更好”的这种类型的功能,可以用来改善我们的用户体验。
我们将添加本地通知功能,用于向提醒用户记得每天拍个照,我们也会带来社交分享功能这样用户可以跟他们的朋友分享他们的照片。在准备工作部分我们已经安装好了这些插件,所以现在我们只要实现功能就可以了。
预备,开始!
本地通知Local Notification
在实现本地通知之前,给大家普及一下推送通知push notification和本地通知local notification的区别。他们看起来的行为是一致的,他允许你向用户提醒是否打开了应用,大概这样子:
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
import { LocalNotifications } from 'ionic-native';
@Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
if(platform.is('cordova')){
LocalNotifications.isScheduled(1).then( (scheduled) => {
if(!scheduled){
let firstNotificationTime = new Date();
firstNotificationTime.setHours(firstNotificationTime.getHours()+24);
LocalNotifications.schedule({
id: 1,
title: 'Snapaday',
text: 'Have you taken your snap today?',
at: firstNotificationTime,
every: 'day'
});
}
});
}
});
}
}
社交分享
我们现在来添加社交分享插件。这是个非常好的插件,用于通过网络向不同的社交媒体分享数据,甚至SMS和邮件。手动整合不同的API(例如Facebook,Twitter等等)很烦的说,这个插件很好的解决了这些问题。
你可以分享一些东西到指定平台,或者你可以触发一个统一分享弹出框供用户选择分享平台。为实现此功能,我们现在要完善takePhoto函数已经调用了的sharePhoto函数。
> 修改 src/pages/home/home.ts 的 Ionic Native导入部分为如下:
import { Camera, File, SocialSharing } from 'ionic-native';
> 修改 src/pages/home/home.ts 的 sharePhoto函数为如下:
sharePhoto(image): void {
let alert = this.alertCtrl.create({
title: 'Nice one!',
message: 'You\'ve taken your photo for today, would you also like to share it?',
buttons: [
{
text: 'No, Thanks'
},
{
text: 'Share',
handler: () => {
SocialSharing.share('I\'m taking a selfie every day with #Snapaday', null, image, null)
}
}
]
});
alert.present();
}
总结
我们添加的功能都有助于应用吸引用户。即使用户每天想要来个自拍,没有提醒功能的话,忘掉的几率还是比较大的。轻松分享照片到社交媒体的能力可以帮助将应用推广到全世界希望能够带来更多的下载量。
接下来只剩下样式定义这一个事情要做了,他可以让我们的应用看起来没那么丑。