ASP.NET SignalR 與 LayIM2.0 配合輕鬆實現Web聊天室（十三）之附加功能-自訂皮膚

標籤：

前言

　　本篇要講的算是一個layim代碼功能擴充。在原來的laim中已經有內建的換膚功能，而且在skin配置中，你可以添加自己想要的皮膚圖片路徑。這些內容在接下來都不會涉及，本篇要講的是自訂皮膚功能，沒錯就是使用者自己上傳自己想要的皮膚。而且隨時都可以換掉。老規矩，效果展示.

效果展示

　　layim內建的皮膚

　　

　　在layim.config中增加自己的皮膚，config代碼如下：（新加了一輛macan圖）

   ,skin: [‘/content/macan.jpg‘] //新增皮膚

　　

　　上面就是通過layim內建的配置實現自訂皮膚，下面幾個圖是通過自訂上傳來實現換膚功能

　　

　　點擊自訂按鈕，彈出選擇圖片，進行圖片上傳

　　

　　皮膚更換完成。

　　

實戰講解

　　首先要想完成這個功能，那你就要做以下三件事情。

　　1.增加自訂按鈕

　　2.實現自訂按鈕的上傳介面對接

　　3.上傳完圖片之後回調載入圖片

　　4.注意事項，後台儲存，異地同步換膚

 

　　OK，解決第一個問題，增加自訂按鈕，這個還算比較簡單，首先找到layim的皮膚模板代碼，然後按照那個“預設“按鈕的格式，在增加一個自訂，不過呢，這個自訂由於要帶上上傳功能，所以內部呢要加一個input 標籤。

　　

　　那麼怎麼觸發上傳事件呢，這個機制在右鍵菜單那一篇中已經講過，就是通過定義layim-event來實現方法觸發，比如，我增加的方法是setSkinByUser，然後找到events，將這個方法加進去即可：

　　

 setSkinByUser: function (othis) {        var type = ‘uploadSkin‘;//自訂配置上傳皮膚路徑        var upload = cache.base[type] || {};        othis.find(‘input‘)[0].click();        //關閉換膚        layer.close(global.skinIndex);        var local = layui.data(‘layim‘)[cache.mine.id] || {};        //調用layui.upload方法        layui.upload({            url: (upload.url || ‘‘)+‘?t=skin‘          , method: upload.type          , file: othis.find(‘input‘)[0]          , unwrap: true          , check: type          , before: function () {                       }          , success: function (res) {              console.log(‘檔案上傳完畢。。。。‘);              res = JSON.parse(res);              if (res.code == 0) {                  res.data = res.data || {};                  //修改src                  othis.attr(‘src‘, res.data.src);                  //定義系統設定皮膚方法，setSkin會幫我們做剩下的事情                  events.setSkin(othis);                  cache.base.skin.push(res.data.src);              } else {                  layer.msg(res.msg || ‘上傳失敗‘);              }          }        });      }

　　大家注意代碼第一行，var type = ‘uploadSkin‘ ，這句代碼要對應 layim.config,我們在config中自訂一個key，這個key其實和上傳檔案和圖片是一樣的作用，就是配置上傳皮膚的路徑。這裡呢我把上傳圖片和皮膚用同一個介面。

　　

　　到這裡呢，工作基本就做完了。不過要完成這個工作，首先你要熟悉layim原始碼的結構和規範。第二，思路一定要清晰，確定目標，就知道自己要幹什麼，要做哪一步。

　　最後呢，我們在把使用者上傳的皮膚儲存到資料庫，然後在初始化的時候初始化這個皮膚就可以了。比如我在公司登陸了，換了個很炫的皮膚，不能讓我在家登陸的時候重新換，對吧。

　　資料庫結構呢，很簡單，就是一個userid對應相應的皮膚以及當前正在使用的狀態。

　　

　　儲存方法我就不提了，寫一個sql儲存就可以了，至於讀取，我們修改一下base方法，加一個skin屬性。

　　

　　然後修改一下預存程序，增加讀取使用者的皮膚資料。最終的json結果是醬紫的：

　　

　　走到這裡呢，就好辦了，我們還是繼續尋找layim的原始碼，我們發現，layim中有個local.skin參數，這個參數就是儲存目前使用者正在使用的皮膚。所以說，如果你換了瀏覽器，那麼這個皮膚就變成預設的了。我們要做的就是，當這個參數有值的時候不去動他，如果沒有呢，我們就調用events.setSkin方法來動態載入從資料庫擷取的皮膚資訊。

　　

　　當然這個方案目前還是有bug存在的。我們先實現到這一步。現在我們自訂一個皮膚上傳之後，然後我們在另外一個瀏覽器開啟，就實現了使用者皮膚跟著帳號走而不是跟著瀏覽器走了。

　　

總結

　　本篇並沒有推送的東西，只是給layim自訂了一個上傳皮膚的功能。希望對同樣喜歡layim的同學帶來一些協助。

　　GitHub:https://github.com/fanpan26/LayIM_NetClient/ 喜歡的同學記得給個star哦~

 

ASP.NET SignalR 與 LayIM2.0 配合輕鬆實現Web聊天室（十三）之附加功能-自訂皮膚