QQ提醒组件

当前版本:V1 最近更新:2013-07-05 组件作者:darklordli

组件说明

针对部分有QQ提醒需求的页面,这里将SNG同事提供的QQ提醒组件的接入方式分享。
注:QQ提醒不是发tips,效果为来自"QQ提醒"账号发送的QQ信息。 截图如下:

更新日志

  • 2013/07/18 kaireewu添加定制内容
  • 2013/07/05 发布

1. 接入流程:

1 产品申请接入,提交模板,获取appid(应用ID)、mid(模版ID)、tik(密钥)
2 在需要添加提醒的页面嵌入提醒公共API组件

<script type="text/javascript" charset="UTF-8" src="http://qzs.qq.com/snsapp/app/bee/widget/js/qqreminder.js"></script>

3 在前端使用QQ提醒组件API,参考提醒demo进行添加查询操作

/*
* 请修改下面js对象的内容以完成定制
* 内容:请定制为需要提醒用户的内容,
* 时间:请定制为事件发生的时间,格式为:年-月-日 时:分
* advance:请定制为需要提前提醒用户的时间,0为准时提醒
* url: 请定制为提醒用户访问的url链接
* icon: 生成的icon的大小,可选值为1,2,3,尺寸分别为90*24,63*24,50*16
* 注意:如果不使用标准接口,而是按需要自己生成链接地址
* 请用encodeURIComponent对内容和时间进行编码。
*/
var __qqClockShare = {
content: "提醒内容", //要提醒的文字内容
time: "2013-7-18 9:00", //事件的时间
advance: 15, //提前多久,单位分钟(取值为0、5、15、30)
url: "http://tgp.qq.com/", //目标网址
icon: "1_1" //按钮样式(1_1:90x24、2_1:63x24、3_1:50x16)
};
var _qqClockLink = "http://qzs.qq.com/snsapp/app/bee/widget/open.htm#content=' + encodeURIComponent(__qqClockShare.content) +'&time=' + encodeURIComponent(__qqClockShare.time) +'&advance=' + __qqClockShare.advance +'&url=' + encodeURIComponent(__qqClockShare.url) + ";
var _qqClockIcon = "http://i.gtimg.cn/snsapp/app/bee/widget/img/' + __qqClockShare.icon + '.png";

上述代码运行后,_qqClockLink是添加提醒的链接,_qqClockIcon是图标,就可以当一个普通的链接或按钮在网页中使用了。

2. 组件API列表:

QQReminder.dialog. addRemind

功能:打开添加提醒的二次确认框,提示用户添加提醒
使用场景:通常是用户点击"添加提醒"按钮之后调用,最常用的一个API。

调用参数

参数名称 是否必须 类型 描述
appid 必须 Number 业务在开平的appid或者接入时分配
mid 必须 Number 接入时分配
tik 必须 String 接入时分配
uniqid 必须 Number 业务自定义,该条提醒的标识,如果同一个模板下用户可以添加多条提醒,需要传入不同的uniqid
option 可选 JSON 见下面option说明
showOpt 可选 JSON 控制位置,如:{left:10,top:10,hasNoBg:0}

option说明

参数名称 是否必须 类型 描述
onSuccess 可选 Function 添加提醒成功后的回调函数
onClose 可选 Function 关闭弹窗的回调函数
params 可选 JSON 见下面 params说明

params说明

参数名称 是否必须 类型 描述
begin 可选 String 设置的提醒时间,不能早于添加提醒的当前时间,根据场景不同,可能需要传入一个动态的时间,格式如:2012-11-20 10:00
advance 可选 Number 默认选择的提前提醒时间选项,单位:分钟;可选值:0、5、15、30;默认0(准时提醒)
editable 可选 Boolean 日期时间是否允许用户编辑,editable为1的时候,两个都可以编辑;editable为0的时候,根据timeedit和dateeidt来确定。
dateedit 可选 Boolean 日期是否允许用户编辑
timeedit 可选 Boolean 时间是否允许用户编辑
urltail 可选 String 点击日程的跳转地址,依赖业务申请中填写的base地址,详见业务申请流程说明
自定义参数 可选 - 参数名为申请的模版中的模版元,详见下面 自定义参数说明

自定义参数说明
自定义参数用于填充模版变量用,比如:
a、模版:
b、自定义参数则是:

producdtName:"洗发水",
btime:"8点"

c、最终显示效果:

调用示例

// QQReminder.dialog.addRemind(appid,mid,tik,uniqid,option,showOpt)
QQReminder.dialog.addRemind(1500000001,1001,'D3E88FCB06DC2F5A9F527B2099D053E7',1,
{
onSuccess:function(){
console.log('添加成功');
},
onClose:function(){
},
params:{
begin: '2012-11-20 10:00',
advance:5,
cycle:3,
editable:0
}
},
{                       //显示参数,包括是否有遮罩层,left和top
top:  555,
left:  100,
hasNoBg: 0              //是否有遮罩层,0有,1没有。
});


QQReminder.query.isSet

说明

功能:查询用户是否添加了指定uniqid的提醒。须用户拥有qq.com下的登录态

使用场景:查询用户是否已经添加过此uniqid对应的提醒,已判断展示给用户的按钮是"添加提醒",还是"已添加,取消",通常和删除提醒(QQReminder. dialog. delRemind)配套使用。

调用参数

参数名称 是否必须 类型 描述
appid 必须 Number 接入时分配
mid 必须 Number 接入时分配
tik 必须 String 接入时分配
uniqid 必须 Number 业务自定义,表示该条提醒的唯一编号

调用示例

QQReminder.query.isSet(1500000001,1001,'D3E88FCB06DC2F5A9F527B2099D053E7',1,
function(isSet){
isSet&&console.log('已经添加提醒');
});



QQReminder. dialog. delRemind

说明

功能:删除(取消)用户已经订阅的单条提醒,需要qq.com下的登陆态。
使用场景:提供删除入口(循环提醒必须必须提供删除入口,避免对用户的骚扰),需要和查询(QQReminder.query.isSet)配套使用。

调用参数

参数名称 是否必须 类型 描述
appid 必须 Number 接入时分配
mid 必须 Number 接入时分配
tik 必须 String 接入时分配
uniqid 必须 Number 业务自定义,表示该条提醒的唯一编号
option 可选 JSON {onSuccess:function(){},onClose:function(){}}
showOpt 可选 JSON 控制位置,如:{left:10,top:10,hasNoBg:0}

调用示例

QQReminder.dialog. delRemind (1500000001,1001,'D3E88FCB06DC2F5A9F527B2099D053E7',1,
{
	onSuccess:function(){
console.log('删除成功');
},
	onClose:function(){
}
},
{                       //显示参数,包括是否有遮罩层,left和top
	top:  555,
	left:  100,
  hasNoBg: 0              //是否有遮罩层,0有,1没有。
});



QQReminder.dialog.subscribe

说明

添加一条订阅信息

调用参数

参数名称 是否必须 类型 描述
appid 必须 Number 接入时分配
itemid 必须 Number 接入时分配
content 必须 String 定制内容
option 可选 JSON {onSuccess:function(){},onClose:function(){}}
showOpt 可选 JSON 控制展示的参数

调用示例

QQReminder.dialog.subscribe(1001,1,
'疾风之刃封测开始时提醒我风之刃封测开始时提醒我风之刃封测开始时',
{
onClose:function(){alert('close');},
onSuccess:function(){alert('success')}
},{								 //展示控制的参数
	left: 555px,
	top: 477px,
	hasNoBg: 0
});



QQReminder.query.isSubscribe

说明

查询是否添加了指定的订阅信息,需要qq.com下的登陆态

调用参数

参数名称 是否必须 类型 描述
appid 必须 Number 接入时分配
itemid 必须 Number 接入时分配
onSuccess 必须 Function 查询成功后的回调函数,回参为布尔值,表示是否添加

调用示例

QQReminder.dialog.subscribe(1001,1,function(isSubscribe){alert(isSubscribe);});



在线demo

可以直接检验调用是否可行,根据上述说明填入对应参数即可

DEMO