根据QQ号获取QQ昵称、头像信息教程
先编写一个JS文件,随便自己命名,最后引用即可
比如我这里创建一个getQQinfo.js文件,如果是Joe主题,请先在【Joe/assets/js】下创建此js文件,并在需要此评论功能的页面引入此js文件,Joe主题在【Joe/public/include.php】中引入即可。
<script src="<?php _JStorageUrl('assets/js/getQQinfo.js'); ?>"></script>
然后去找一个获取QQ信息的接口api
我这里直接引用韩小韩API里面的接口 韩小韩API 直接访问过去,找到如下图的接口
在getQQinfo.js文件中编写如下代码
function fn_qqinfo() {
var qq_num = $('#qqinfo').val();
if (qq_num) {
if (!isNaN(qq_num)) {
$.ajax({
url: 'https://api.vvhan.com/api/qq',//韩小韩API提供的获取qq信息的接口
type: "get",
data: {
qq: qq_num,
},
dataType: "json",
success: function(res) {
if(res.success) {
$("#mail").val(qq_num + '@qq.com');
$('#comment').focus();
$("#author").val(res.name === "" ? 'QQ游客' : res.name);
$('div.ajax-user-avatar img').attr('src', res.imgurl);
}else{
$("#author").val('QQ游客');
$('textarea[name="text"]').focus();
}
},
error: function(err) {
$("#author").val('QQ游客');
$("#mail").val(qq_num + '@qq.com');
$('textarea[name="text"]').focus();
}
});
} else {
$("#mail").val('你输入的好像不是QQ号码');
$("#qqinfo").val('');
$("#author").val('');
}
} else {
$("#qqinfo").val('');
$("#author").val('');
}
}
在主题中修改评论HTML代码
如果是Joe主题,需要在【Joe/public/comment.php】中去修改如下代码
<div class="head">
<div class="list">
<input type="text" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..." />
</div>
<div class="list">
<input type="text" value="<?php $this->user->hasLogin() ? $this->user->mail() : $this->remember('mail') ?>" autocomplete="off" name="mail" placeholder="请输入真实邮箱,用于接收回信..." />
</div>
<div class="list">
<input type="text" value="<?php $this->user->hasLogin() ? $this->user->url() : $this->remember('url') ?>" autocomplete="off" name="url" placeholder="请输入网址(非必填)..." />
</div>
</div>
修改为下面的代码
<div class="head" style="margin-bottom: 15px;padding: 8px 10px">
<div class="qqget_hasLogin ajax-user-avatar" style="margin-right: 1rem;width: 2.5rem;text-align: center;">
<img class="lazyload" src="https://blog.xccx.cc/usr/themes/Joe-master/public/qq_comment/img/tx.png" data-src="" width="35px" height="35px" class="avatar hasLogin-author " style="width: 40px;height: 40px;border-radius: 50%;border: 1px solid var(--classA);padding: 2px;"></div>
<div class="ident qqget_input list" style="display: flex;flex: 1;margin-top: 2px;margin-right: 1rem;">
<div class="text" style="white-space: nowrap;padding: 11px 1rem 0;border-radius: 5px 0px 0px 5px;background-color: rgba(144, 147, 153, 0.23);color: var(--main);">QQ</div>
<input type="text" class="form-control " name="qq" id="qqinfo" value="" placeholder="请输入QQ号" onblur="fn_qqinfo()" style="width: 100%;border: none;background: transparent;padding: 0 15px;height: 36px;border-radius: 0px 5px 5px 0px;border: 1px solid #90939950;color: var(--routine);font-family: 'Joe Font'"></div>
<div class="list " style="margin-right: 1rem; display: flex;margin-top: 2px">
<div class="text" style="white-space: nowrap;padding: 11px 1rem 0;border-radius: 5px 0px 0px 5px;background-color: rgba(144, 147, 153, 0.23);color: var(--main);">昵称</div>
<input type="text" class="form-control " name="author" id="author" placeholder="*自动获取" readonly="" autocomplete="off" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" style="width: 100%;border: none;background: transparent;padding: 0 15px;height: 36px;border-radius: 0px 5px 5px 0px;border: 1px solid #90939950;color: var(--routine);font-family: 'Joe Font'">
</div>
<div class="list" style="margin-right: 1rem; display: flex;margin-top: 2px">
<div class="text" style="white-space: nowrap;padding: 11px 1rem 0;border-radius: 4px 0px 0px 4px;background-color: rgba(144, 147, 153, 0.23);color: var(--main);">邮箱</div>
<input type="text" class="form-control " name="mail" id="mail" placeholder="*自动获取" readonly="" unselectable="on" value="<?php $this->user->hasLogin() ? $this->user->mail() : $this->remember('mail') ?>" style="width: 100%;border: none;background: transparent;padding: 0 15px;height: 36px;border-radius: 0px 5px 5px 0px;border: 1px solid #90939950;color: var(--routine);font-family: 'Joe Font'">
</div>
</div>
因为我这个不是Typecho 也不是Joe核心主题代码,只是延用了Joe主题的HTML+JS,跟我这个效果还是有不一样的。
如果有什么疑问,可以评论区留言@我,最终样子截图
没有弃用原本的画图模式,可以放心使用,如果有样式的问题,可以自行调整。
搞进来成这样的https://s1.ax1x.com/2022/09/13/vjoHc4.png
代码没有问题的哦?是我这边误传了文件,导致变成了反编译效果,比如< 变成了<这样的,>变成了> 你反替换一下吧。 应该是这个的问题
你好 这个代码是不是有问题?有好多无用的代码字符,comment.php这里的好像有好多无用的 导致代码不可用
我已经修复了我博客的问题,现在可以正常复制了。
昵称获取全是 QQ游客 不知道怎么回事 图像也获取不过来 发表评论后才显示出图像
把js中的ajax请求改为get,我没注意这个问题,你去看一下他API的请求方式就应该知道,应该是get请求
这两天在研究街机游戏网页玩,没注意看你的消息,注意一下接口的参数 我这里的例子是按照我这边的请求接口写的,所以有点误差。routeType:'qq_info',参数去掉,请求方式改为get请求。
if (!isNaN(qq_num)) {
还是不行有点郁闷了,获取不到昵称 都是QQ游客 头像也是 发表后才显示
https://s1.ax1x.com/2022/09/16/xS9Tl4.png
我估计是他那个接口不允许被调用,我这里本地测试 返回的是一个错误,如下图

我又调整了一下,是他接口返回的描述有问题,我仔细看了一下他的返回结果,如下图

并没有code参数,修改一下
1.首先把接口url补全,加上https:,变成https://api.vvhan.com/api/qq
2.修改res.code === 1 变成res.success 即可
3.修改$('#author').val(res.name===""?'QQ游客' : res.name);
整体如下图
我估计是哪个环节出了问题,方便的话 联系我QQ(83560309)吧
多谢 解决了
EMMM 发表评论后 再次发布的时候 QQ号要重新填写 才可以 蛋疼 慢慢整吧 先将就用着
显示QQ需要改Joe的核心代码,因为数据库并没有QQ这个字段,只有根据QQ邮箱去拆解后显示到框内,可以自行研究。我这里不是Joe的PHP业务代码,所以很简单。