<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101741121"
data-redirecturi="http://test.pangbo51.com/callback.html" charset="utf-8"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<h2>QQ登陆</h2>
<span id="qqLoginBtn"></span>
<div id="inner">
</div>
<script type="text/javascript">
QC.Login({
btnId: "qqLoginBtn",//插入按钮的html标签id
size: "B_M",//按钮尺寸
scope: "get_user_info",//展示授权，全部可用授权可填 all
display: "pc"//应用场景，可选
}, function (reqData, opts) {//登录成功
//根据返回数据，更换按钮显示状态方法
console.log(reqData)
var dom = document.getElementById('inner'),
_logoutTemplate = [
//头像
'<span><img src="{figureurl}"class="{size_key}"/></span>',
//昵称
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:QC.Login.signOut();">退出</a></span>'
].join("");
console.log(dom, _logoutTemplate)
dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
nickname: QC.String.escHTML(reqData.nickname), //做xss过滤
figureurl: reqData.figureurl
}));
QC.Login.getMe(function (openId, accessToken) {
console.log(openId)
});
//这里可以调用自己的保存接口
//...
}, function (opts) {//注销成功
alert('QQ登录 注销成功');
}
);
</script>
<script src="" async defer></script>
</body>
</html>面试题参考：
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接