Qt模仿QQ聊天窗口（四）

最新推荐文章于 2024-07-12 21:28:16 发布

雨田哥

最新推荐文章于 2024-07-12 21:28:16 发布

阅读量7.6k

点赞数 5

分类专栏： Qt之路 Qt技术分享文章标签： QQ气泡消息 Qt模仿QQ聊天窗口 QQ图文混排 QWebengineView与JS交互

本文链接：https://blog.csdn.net/ly305750665/article/details/80725458

版权

Qt之路同时被 2 个专栏收录

74 篇文章 58 订阅

订阅专栏

Qt技术分享

38 篇文章 40 订阅

订阅专栏

Qt模仿QQ聊天窗口-气泡聊天消息

- Qt模仿QQ聊天窗口-气泡聊天消息

简述

最近感冒了，头疼，头疼，头疼。好了，进入正题吧，基本的气泡消息展示做好了，支持图文混排，由于本人JS不是很精通。水平有限，有些BUG，待JS的大牛们在我的基础上完善下，完善后。不忘回我一份。十分感谢

效果图

这里写图片描述

代码

//JS
var external = null;

String.prototype.format = function() {  
    if(arguments.length == 0) return this;  
    var obj = arguments[0];  
    var s = this;  
    for(var key in obj) {  
        s = s.replace(new RegExp("\\{\\{" + key + "\\}\\}", "g"), obj[key]);  
    }  
    return s;  
}  

new QWebChannel(qt.webChannelTransport,
    function(channel) {
        external = channel.objects.external;
    }
);

function appendHtml(msg){
    $("#placeholder").append(external.msgLHtmlTmpl.format(msg));
    $("#placeholder").append(external.msgRHtmlTmpl.format(msg));
    window.scrollTo(0,document.body.scrollHeight); ;  
};

//body
<html>
    <meta charset="utf-8">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="qrc:/TalkWindowShell/Resources/MsgHtml/ui.css"> 
        <script src="qrc:/TalkWindowShell/Resources/MsgHtml/jquery-3.3.1.min.js"></script>
        <script src="qrc:/TalkWindowShell/Resources/MsgHtml/qwebchannel.js"></script>
        <script src="qrc:/TalkWindowShell/Resources/MsgHtml/msgtmpl.js"></script>
    </head>
    <body>
        <div id="placeholder"></div>
    </body>
</html>

//气泡消息
<div class="msg-wrap left">
    <img class="header" src="qrc:/TalkWindowShell/Resources/yutiange.jpg" ondragstart="return false;" onselectstart="return false;">
    <div class="msg">{{MSG}}<span class="trigon"></span></div>
</div>

结尾

博主这么多项目中，觉得不错，还可以的。打赏下博主吧。不断为大家开源更多精彩内容，谢谢大家支持~

这里写图片描述

雨田哥

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
5
评论
Qt模仿QQ聊天窗口（四）

Qt模仿QQ聊天窗口-气泡聊天消息Qt模仿QQ聊天窗口-气泡聊天消息简述效果图相关博客代码结尾简述最近感冒了，头疼，头疼，头疼。好了，进入正题吧，基本的气泡消息展示做好了，支持图文混排，由于本人JS不是很精通。水平有限，有些BUG，待JS的大牛们在我的基础上完善下，完善后。不忘回我一份。十分感谢效果图相关博客Qt模仿QQ聊天窗...
复制链接

扫一扫