🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
`mod_class.xxx` 是必须存在的 `ws_onmsg.xxx` 是Websock消息回调接口 `load_data.xxx` 是从数据库加载的消息回调接口 除了以上三个类之外,还有一个类 `format_content.xxxx` 对显示的数据重新处理渲染 比如下面的代码 文件路径是 \public\static\libs\bui\pages\hongbao\init.js 就可以实现对原来普通的DIV进行更炫的展示 聊天数据中红包的原始代码是(即存放在数据库那里是很简洁的) **又或者可以对图片实现幻灯片的效果展示.** ~~~ <div class='hack-hongbao' data-id='72' data-title='ewrew'>有人发红包了!</div> ~~~ 通过下面的处理就可以显示成图片,你也可以进行更丰富的展示,包括添加删除按钮,也是这样处理的 ~~~ //对渲染出来的数据,进行重新转义显示 format_content.hongbao = function(res,type){ if(in_pc==true){ $(".office_text .hack-hongbao").each(function(){ var id = $(this).data("id"); var title = $(this).data("title"); var str = `<a href="#" title="${title}" onclick="layer.open({type: 2,title: '${title}',shadeClose: true,shade: 0.3,area: ['600px', '600px'],content: '/index.php/p/hongbao-content-show/id/${id}.html'});"><img src="/public/static/plugins/voicehb/hongbao.png"></a>`; $(this).html(str); }); }else{ //显示红包 router.$(".chat-panel .hack-hongbao").each(function(){ var id = $(this).data("id"); var title = $(this).data("title"); var str = `<div onclick="layer.open({type: 2,title: '${title}',shadeClose: true,shade: 0.3,area: ['95%', '80%'],content: '/index.php/p/hongbao-content-show/id/${id}.html'});"><img src="/public/static/plugins/voicehb/hongbao.png"></div>`; $(this).html(str); }); } } ~~~ ![](https://img.kancloud.cn/ab/49/ab492ae3ff1e33a0485b24a1366a4198_1584x626.png)