layui layim mobile手机端wap及时聊天UI界面代码-html代码-BFW代码库

代码语言：html

代码描述：layui layim mobile手机端wap及时聊天UI界面代码，可以单聊、群聊、新消息声音提醒，支持发送表情、文件、图片功能。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>WAP 版演示</title>

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<script>
layui.config({
  base: '//repo.bfw.wiki/bfwrepo/js/layui/layim/'
  ,layimAssetsPath: '//repo.bfw.wiki/bfwrepo/js/layui/layim/' //layim 资源文件所在目录
  ,version: true
}).extend({
  'layer-mobile': 'layer-mobile'
  ,'zepto': 'zepto'
  ,'upload-mobile': 'upload-mobile'
  ,'layim-mobile': 'layim-mobile'
}).use('layim-mobile', function(){
  var layim = layui['layim-mobile'] //WebIM
  ,layer = layui['layer-mobile']; //弹层

  //提示层
  layer.msg = function(content){
    return layer.open({
      content: content
      ,skin: 'msg'
      ,time: 2 //2秒后自动关闭
    });
  };
  
  //演示自动回复
  var autoReplay = [
    '您好，我现在有事不在，一会再和您联系。', 
    '你没发错吧？face[微笑] ',
    '这是一段演示消息 face[哈哈] ',
    '演示消息 face[心] face[心] face[心] ',
    'face[威武] face[威武] face[威武] face[威武] ',
    '<（@￣︶￣@）>',
    '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
    'face[黑线]  你慢慢说，别急……',
    '(*^__^*) face[嘻嘻]'
  ];
  
  layim.config({
    
    
    //上传图片接口
    uploadImage: {
      url: '/upload/image' //（返回的数据格式见下文）
      ,type: '' //默认post
    }
    
    //上传文件接口
    ,uploadFile: {
      url: '/upload/file' //（返回的数据格式见下文）
      ,type: '' //默认post
    }
    
    //,brief: true

    ,init: {
      //我的信息
      mine: {
        "username": "测试" //我的昵称
        ,"id": 123 //我的ID
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" //我的头像
        ,"sign": "测试内容"
      }
      //我的好友列表
      ,"friend": [{
      "groupname": "测试分组一"
      ,"id": 0
      ,"list": [{
        "username": "测试1"
        ,"id": "100001"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6f70b0216.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": "测试内容1"
        ,"status": "online"
      },{
        "username": "测试2"
        ,"id": "100001222"
        ,"sign": "测试内容2"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
      },{
        "username": "测试3"
        ,"id": "10034001"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": ""
      },{
        "username": "测试4"
        ,"id": "168168"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": "测试内容4"
      },{
        "username": "测试5"
        ,"id": "666666"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": "测试内容5"
      }]
    },{
      "groupname": "测试分组二"
      ,"id": 1
      ,"list": [{
        "username": "测试6"
        ,"id": "121286"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": "测试内容6"
      },{
        "username": "测试7"
        ,"id": "108101"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": "微电商达人"
      },{
        "username": "测试8"
        ,"id": "12123454"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": "测试内容8"
      },{
        "username": "测试9"
        ,"id": "102101"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": ""
      },{
        "username": "测试10"
        ,"id": "3435343"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": ""
      }]
    },{
      "groupname": "测试分组三"
      ,"id": 2
      ,"list": [{
        "username": "测试11"
        ,"id": "76543"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"
        ,"sign": "测试内容11"
      },{
        "username": "测试12"
        ,"id": "4803920"
        ,"avatar": "//repo.bfw.wiki/bfwrepo/imag.........完整代码请登录后点击上方下载按钮下载查看