一、LayIM展示-客服模式
二、LayIM展示-通讯聊天模式
<!doctype html> <html> <head> <meta charset="utf-8"> <title>LayIM测试</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"> </head> <body> <script src="./layui/layui.js"></script> <script> layui.use('layim', function (layim) { // 清空所有本地缓存消息 localStorage.clear(); //基础配置 layim.config({ init: { mine: { "username": "访客", "id": "100000123", "status": "online", "remark": "在深邃的编码世界,做一枚轻盈的纸飞机", "avatar": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3865525855,2169088944&fm=26&gp=0.jpg" }, "friend": [{ "groupname": "分组1", //好友分组名 "id": 1, //分组ID "list": [{ //分组下的好友列表 "username": "好友1", //好友昵称 "id": "1", //好友ID "avatar": "https://aaapicture.oss-cn-hangzhou.aliyuncs.com/19-05-21/images/7f3394c83a030aa7f315bdeffc548be2.jpeg", //好友头 "sign": "这是签名", //好友签名 "status": "online" //若值为offline代表离线,online或者不填为在线 }, { //分组下的好友列表 "username": "好友2", //好友昵称 "id": "2", //好友ID "avatar": "https://aaapicture.oss-cn-hangzhou.aliyuncs.com/19-01-05/images/zZLewZleDFNofU8jUdIyFmzTC21QYORwOWHdfmKB.jpeg", //好友头像 "sign": "好友签名", //好友签名 "status": "online" //若值为offline代表离线,online或者不填为在线 }] }], //群组列表 "group": [{ "groupname": "测试4564231231235456456", //群组名称 "id": 1, //群组id "avatar": "http://img2.imgtn.bdimg.com/it/u=3751529336,918538666&fm=26&gp=0.jpg", //群组头像 "members": 2, //群成员数量 "tr_no": "1566123132" //群号码 , }, { "groupname": "测试名字", "id": 2, "avatar": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=320178652,790985626&fm=26&gp=0.jpg", "members": 1, "tr_no": "1534833831" }] }, //获取主面板列表信息,下文会做进一步介绍 //获取群员接口(返回的数据格式见下文) members: { url: '', //接口地址(返回的数据格式见下文) type: 'get', //默认get,一般可不填 data: {} //额外参数 }, //上传图片接口(返回的数据格式见下文),若不开启图片上传,剔除该项即可 uploadImage: { url: '', //接口地址 type: 'post' //默认post }, //上传文件接口(返回的数据格式见下文),若不开启文件上传,剔除该项即可 uploadFile: { url: '', //接口地址 type: 'post' //默认post }, //扩展工具栏,下文会做进一步介绍(如果无需扩展,剔除该项即可) tool: [{ alias: 'code', //工具别名 title: '代码', //工具名称 icon: '' //工具图标,参考图标文档 }], msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html', //消息盒子页面地址,若不开启,剔除该项即可 find: layui.cache.dir + 'css/modules/layim/html/find.html', //发现页面地址,若不开启,剔除该项即可 chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址,若不开启,剔除该项即可 }) }); </script> </body> </html>
二、从接口加载数据
1、分析数据结构
init接口就是为了实现主界面的
提供的数据接口结构的格式为:
{ "code": 0 ,"msg": "" ,"data": { "mine": { "username": "纸飞机" ,"id": "100000" ,"status": "online" ,"sign": "在深邃的编码世界,做一枚轻盈的纸飞机" ,"avatar": "http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg" } ,"friend": [{ "groupname": "前端码屌" ,"id": 1 ,"online": 2 ,"list": [{ "username": "贤心" ,"id": "100001" ,"avatar": "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" ,"sign": "这些都是测试数据,实际使用请严格按照该格式返回" },{ "username": "Z_子晴" ,"id": "108101" ,"avatar": "http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg" ,"sign": "微电商达人" },{ "username": "Lemon_CC" ,"id": "102101" ,"avatar": "http://tp2.sinaimg.cn/1833062053/180/5643591594/0" ,"sign": "" },{ "username": "马小云" ,"id": "168168" ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" ,"sign": "让天下没有难写的代码" },{ "username": "徐小峥" ,"id": "666666" ,"avatar": "http://tp2.sinaimg.cn/1783286485/180/5677568891/1" ,"sign": "代码在囧途,也要写到底" }] },{ "groupname": "网红" ,"id": 2 ,"online": 3 ,"list": [{ "username": "罗玉凤" ,"id": "121286" ,"avatar": "http://tp1.sinaimg.cn/1241679004/180/5743814375/0" ,"sign": "在自己实力不济的时候,不要去相信什么媒体和记者。他们不是善良的人,有时候候他们的采访对当事人而言就是陷阱" },{ "username": "长泽梓Azusa" ,"id": "100001222" ,"sign": "我是日本女艺人长泽あずさ" ,"avatar": "http://tva1.sinaimg.cn/crop.0.0.180.180.180/86b15b6cjw1e8qgp5bmzyj2050050aa8.jpg" },{ "username": "大鱼_MsYuyu" ,"id": "12123454" ,"avatar": "http://tp1.sinaimg.cn/5286730964/50/5745125631/0" ,"sign": "我瘋了!這也太準了吧 超級笑點低" },{ "username": "谢楠" ,"id": "10034001" ,"avatar": "http://tp4.sinaimg.cn/1665074831/180/5617130952/0" ,"sign": "" },{ "username": "柏雪近在它香" ,"id": "3435343" ,"avatar": "http://tp2.sinaimg.cn/2518326245/180/5636099025/0" ,"sign": "" }] },{ "groupname": "我心中的女神" ,"id": 3 ,"online": 1 ,"list": [{ "username": "林心如" ,"id": "76543" ,"avatar": "http://tp3.sinaimg.cn/1223762662/180/5741707953/0" ,"sign": "我爱贤心" },{ "username": "佟丽娅" ,"id": "4803920" ,"avatar": "http://tp4.sinaimg.cn/1345566427/180/5730976522/0" ,"sign": "我也爱贤心吖吖啊" }] }] ,"group": [{ "groupname": "前端群" ,"id": "101" ,"avatar": "http://tp2.sinaimg.cn/2211874245/180/40050524279/0" },{ "groupname": "Fly社区官方群" ,"id": "102" ,"avatar": "http://tp2.sinaimg.cn/5488749285/50/5719808192/1" }] } }
2、layim.config通过请求获取数据的方式
layim.config({ init: { url: 'class/doAction.php?action=get_user_data', data: {} }, //获取群成员 members: { url: 'class/doAction.php?action=groupMembers', data: {} } //上传图片接口 , uploadImage: { url: 'class/doAction.php?action=uploadImage' //(返回的数据格式见下文) , type: '' //默认post } //上传文件接口 , uploadFile: { url: 'class/doAction.php?action=uploadFile' // , type: '' //默认post } //自定义皮肤 ,uploadSkin: { url: 'class/doAction.php?action=uploadSkin' , type: 'post' //默认post } ,systemSkin: {//选择系统皮肤 url: 'class/doAction.php?action=systemSkin' , type: 'post' //默认post } , isAudio: false //开启聊天工具栏音频 , isVideo: false //开启聊天工具栏视频 //扩展工具栏 // , tool: [{ // alias: 'code' // , title: '代码' // , icon: '' // }] ,title: '我的webim' ,copyright:true , initSkin: '1.jpg' //1-5 设置初始背景 , notice: true //是否开启桌面消息提醒,默认false , msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址,若不开启,剔除该项即可 , find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址,若不开启,剔除该项即可 , chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址,若不开启,剔除该项即可 });
3、在服务端定义数据,并在前端获取数据
后台代码:
public IActionResult GetInit() { string str = "{\"code\":0,\"msg\":\"\",\"data\":{\"mine\":{\"username\":\"纸飞机\",\"id\":\"100000\",\"status\":\"online\",\"sign\":\"在深邃的编码世界,做一枚轻盈的纸飞机\",\"avatar\":\"http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg\"},\"friend\":[{\"groupname\":\"前端码屌\",\"id\":1,\"online\":2,\"list\":[{\"username\":\"贤心\",\"id\":\"100001\",\"avatar\":\"http://tp1.sinaimg.cn/1571889140/180/40030060651/1\",\"sign\":\"这些都是测试数据,实际使用请严格按照该格式返回\"},{\"username\":\"Z_子晴\",\"id\":\"108101\",\"avatar\":\"http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg\",\"sign\":\"微电商达人\"},{\"username\":\"Lemon_CC\",\"id\":\"102101\",\"avatar\":\"http://tp2.sinaimg.cn/1833062053/180/5643591594/0\",\"sign\":\"\"},{\"username\":\"马小云\",\"id\":\"168168\",\"avatar\":\"http://tp4.sinaimg.cn/2145291155/180/5601307179/1\",\"sign\":\"让天下没有难写的代码\"},{\"username\":\"徐小峥\",\"id\":\"666666\",\"avatar\":\"http://tp2.sinaimg.cn/1783286485/180/5677568891/1\",\"sign\":\"代码在囧途,也要写到底\"}]},{\"groupname\":\"网红\",\"id\":2,\"online\":3,\"list\":[{\"username\":\"罗玉凤\",\"id\":\"121286\",\"avatar\":\"http://tp1.sinaimg.cn/1241679004/180/5743814375/0\",\"sign\":\"在自己实力不济的时候,不要去相信什么媒体和记者。他们不是善良的人,有时候候他们的采访对当事人而言就是陷阱\"},{\"username\":\"长泽梓Azusa\",\"id\":\"100001222\",\"sign\":\"我是日本女艺人长泽あずさ\",\"avatar\":\"http://tva1.sinaimg.cn/crop.0.0.180.180.180/86b15b6cjw1e8qgp5bmzyj2050050aa8.jpg\"},{\"username\":\"大鱼_MsYuyu\",\"id\":\"12123454\",\"avatar\":\"http://tp1.sinaimg.cn/5286730964/50/5745125631/0\",\"sign\":\"我瘋了!這也太準了吧 超級笑點低\"},{\"username\":\"谢楠\",\"id\":\"10034001\",\"avatar\":\"http://tp4.sinaimg.cn/1665074831/180/5617130952/0\",\"sign\":\"\"},{\"username\":\"柏雪近在它香\",\"id\":\"3435343\",\"avatar\":\"http://tp2.sinaimg.cn/2518326245/180/5636099025/0\",\"sign\":\"\"}]},{\"groupname\":\"我心中的女神\",\"id\":3,\"online\":1,\"list\":[{\"username\":\"林心如\",\"id\":\"76543\",\"avatar\":\"http://tp3.sinaimg.cn/1223762662/180/5741707953/0\",\"sign\":\"我爱贤心\"},{\"username\":\"佟丽娅\",\"id\":\"4803920\",\"avatar\":\"http://tp4.sinaimg.cn/1345566427/180/5730976522/0\",\"sign\":\"我也爱贤心吖吖啊\"}]}],\"group\":[{\"groupname\":\"前端群\",\"id\":\"101\",\"avatar\":\"http://tp2.sinaimg.cn/2211874245/180/40050524279/0\"},{\"groupname\":\"Fly社区官方群\",\"id\":\"102\",\"avatar\":\"http://tp2.sinaimg.cn/5488749285/50/5719808192/1\"}]}}"; return Json(JsonConvert.DeserializeObject(str)); }
前台代码:
<script> layui.use('layim', function (layim) { // 清空所有本地缓存消息 localStorage.clear(); //基础配置 layim.config({ init: { url: '/Login/GetInit', data: {} }, //获取主面板列表信息,下文会做进一步介绍 //获取群员接口(返回的数据格式见下文) members: { url: '', //接口地址(返回的数据格式见下文) type: 'get', //默认get,一般可不填 data: {} //额外参数 }, //上传图片接口(返回的数据格式见下文),若不开启图片上传,剔除该项即可 uploadImage: { url: '', //接口地址 type: 'post' //默认post }, //上传文件接口(返回的数据格式见下文),若不开启文件上传,剔除该项即可 uploadFile: { url: '', //接口地址 type: 'post' //默认post }, //扩展工具栏,下文会做进一步介绍(如果无需扩展,剔除该项即可) tool: [{ alias: 'code', //工具别名 title: '代码', //工具名称 icon: '' //工具图标,参考图标文档 }], msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html', //消息盒子页面地址,若不开启,剔除该项即可 find: layui.cache.dir + 'css/modules/layim/html/find.html', //发现页面地址,若不开启,剔除该项即可 chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址,若不开启,剔除该项即可 }) }); </script>