如何利用layim實現記錄的初始化（附代碼）

本篇文章給大家帶來的內容是關於如何利用layim實現記錄的初始化（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

語言：PHP+layui
沒有使用本機快取，全部是後台介面的資料

在做一個工單系統的時候，客戶要求必須要像QQ聊天一樣。我這多年根深蒂固的老phper，直接想起來layim。但是在遍曆工單曆史訊息的時候出現了一些小問題，經過一天的熟悉終於弄出來，下面就分享一下自己的代碼，順便做個記錄。
PS：我不是專業前端，方法用的不好，不要噴哈
- 首先是配置layim，就是官方文檔的配置。

layim.config({                        init: { }                        ,voice:false                        ,brief:false//是否簡約模式，簡約模式沒有關閉按鈕                    });

這裡需要注意一個地方，就是【簡約模式】是沒有關閉按鈕的。如果你需要關閉按鈕，又不想有列表，可以用css去除掉。

.layui-layim{            display: none;        }

接下來就是遍曆曆史訊息了

// 清空所有本機快取訊息localStorage.clear();// 先開啟視窗 layim.chat({ name: '專家答疑'      ,type: 'friend'       ,avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'       ,id: question_id     });// 擷取曆史訊息$.ajax({url:"{:url('meet/get_init_msg')}",type:"post",data:{question_id:question_id},dataType:"json",success:function (data) {if(data.length > 0){for (var i in data){layim.getMessage({username: "專家答疑" //訊息來源使用者名稱      ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //訊息來源帳戶圖片      ,id: data[i]['question_id']//訊息的來源ID（如果是私聊，則是使用者id，如果是群聊，則是群組id）      ,type: "friend" //聊天視窗來源類型，從發送訊息傳遞的to裡面擷取      ,content: data[i]['content'] //訊息內容      ,cid: 0 //訊息id，可不傳。除非你要對訊息進行一些操作（如撤回）      ,mine: true //是否我發送的訊息，如果為true，則會顯示在右方      ,fromid: data[i]['user_id'] //訊息的寄件者id（比如群組中的某個訊息寄件者），可用於自動解決瀏覽器多視窗時的一些問題      ,timestamp: data[i]['addtime'] * 1000 //服務端時間戳記毫秒數。注意：如果你返回的是標準的 unix 時間戳記，記得要 *1000      });layim.getMessage({             username: "專家答疑" //訊息來源使用者名稱             ,avatar: "//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg" //訊息來源帳戶圖片             ,id: data[i]['question_id']//訊息的來源ID（如果是私聊，則是使用者id，如果是群聊，則是群組id）             ,type: "friend" //聊天視窗來源類型，從發送訊息傳遞的to裡面擷取             ,content: data[i]['feedback']//訊息內容             ,cid: 0 //訊息id，可不傳。除非你要對訊息進行一些操作（如撤回）             ,mine: false //是否我發送的訊息，如果為true，則會顯示在右方             ,fromid: data[i]['user_id'] //訊息的寄件者id（比如群組中的某個訊息寄件者），可用於自動解決瀏覽器多視窗時的一些問題             ,timestamp: data[i]['zhuan_time'] * 1000 //服務端時間戳記毫秒數。注意：如果你返回的是標準的 unix 時間戳記，記得要 *1000            });           }     }  }});

最後的發送訊息什麼的，文檔上面都有，這裡就不多說來，最後附一個全部代碼
JS代碼：

<script>function im(question_id) {   layui.use(['layim','jquery'], function(){  var layim = layui.layim  ,$ = layui.jquery;   //基礎配置   layim.config({    init: {        url:"{:url('meet/get_user_chat')}"        ,data:{question_id:question_id}       }       ,voice:false       ,brief:false//是否簡約模式，簡約模式沒有關閉按鈕       });       // 清空所有本機快取訊息       localStorage.clear();       // 先開啟視窗       layim.chat({       name: '專家答疑'       ,type: 'friend'       ,avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg'       ,id: question_id       });       // 擷取曆史訊息       $.ajax({       url:"{:url('meet/get_init_msg')}",       type:"post",       data:{question_id:question_id},       dataType:"json",       success:function (data) {       if(data.length > 0){       for (var i in data){       layim.getMessage({       username: "專家答疑" //訊息來源使用者名稱       ,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //訊息來源帳戶圖片       ,id: data[i]['question_id']//訊息的來源ID（如果是私聊，則是使用者id，如果是群聊，則是群組id）       ,type: "friend" //聊天視窗來源類型，從發送訊息傳遞的to裡面擷取       ,content: data[i]['content'] //訊息內容       ,cid: 0 //訊息id，可不傳。除非你要對訊息進行一些操作（如撤回）       ,mine: true //是否我發送的訊息，如果為true，則會顯示在右方       ,fromid: data[i]['user_id'] //訊息的寄件者id（比如群組中的某個訊息寄件者），可用於自動解決瀏覽器多視窗時的一些問題       ,timestamp: data[i]['addtime'] * 1000 //服務端時間戳記毫秒數。注意：如果你返回的是標準的 unix 時間戳記，記得要 *1000       });  layim.getMessage({       username: "專家答疑" //訊息來源使用者名稱       ,avatar: "//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg" //訊息來源帳戶圖片       ,id: data[i]['question_id']//訊息的來源ID（如果是私聊，則是使用者id，如果是群聊，則是群組id）       ,type: "friend" //聊天視窗來源類型，從發送訊息傳遞的to裡面擷取       ,content: data[i]['feedback']//訊息內容       ,cid: 0 //訊息id，可不傳。除非你要對訊息進行一些操作（如撤回）       ,mine: false //是否我發送的訊息，如果為true，則會顯示在右方       ,fromid: data[i]['user_id'] //訊息的寄件者id（比如群組中的某個訊息寄件者），可用於自動解決瀏覽器多視窗時的一些問題       ,timestamp: data[i]['zhuan_time'] * 1000 //服務端時間戳記毫秒數。注意：如果你返回的是標準的 unix 時間戳記，記得要 *1000       });     }  } }});// 監聽發送訊息layim.on('sendMessage', function(res){var mine = res.mine.content; //包含我發送的訊息及我的資訊});});}</script>

CSS代碼：

<style>        .layui-layim{            display: none;        }    </style>

最後附上一張成品圖：