10行程式碼將部落格網站中的live2D搬到桌面去
將部落格網站中的live2D搬到桌面去！
前言：最近玩了一下Electron，Electron可以非常方便地使用原來的前端三劍客實現桌面應用的開發，然後就想著桌面外掛是不是也是可以的？如果可以的話，那桌面精靈是不是也是可以的呢？以前有看到大佬用c#開發過桌面精靈，現在看通過electron，能不能把部落格頁面中的二次元小姐姐搬到桌面來。
第一步：建立一個electron專案
electron專案的環境搭建在這裡就不過多贅述了（包括node、npm以及electron包的安裝在網上有非常多教程，這裡也貼一下electron的官網方文件地址 )，專案的建立非常簡單，建立好一個資料夾後，進入該資料夾，在命令列下輸入下面的程式碼即可生成一個package.json檔案，這是electron 專案的預設配置檔案。
npm init --yes
第二步：建立js主指令碼檔案
const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 600, height: 800, frame: false, transparent: true, //設定透明 webPreferences: { devTools: false, nodeIntegration: true } }) win.loadFile('test.html') //載入的html檔案 } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })
在這裡可以指定建立的視窗的寬高，除此之外，我還指定了一些其他的引數——frame:false ， transparent：true 這些設定是為了隱藏視窗以及使背景透明化，這樣，才算得上是我們的桌面精靈嘛，要不然的話，看到的就是桌面精靈在一個程式框框內。
第三步：建立html檔案渲染我們的頁面
在上一步中，通過win.loadFile('test.html')指定了我們的html檔案，這裡現在就可以來編寫我們的程式碼了：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://eqcn.ajz.miesnfu.com 'unsafe-inline';" /> </head> <body style="-webkit-app-region: drag;"> <div style="font-weight: bold;color: red;text-align: center;margin-top: 100px;" class=“icon-drag”></div> <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({ "model": {jsonPath:"https://unpkg.com/[email protected]/assets/z16.model.json","scale": 1 }, "display": { "position": "top", "width": 150, "height": 300,"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } }); </script> </body> </html>
看到其中的js程式碼有沒有很熟悉？應該是有不少朋友在部落格園中引用的js也是類似這樣的吧，直接複製過來就完成了。
在這裡唯一需要注意的一點是，在上面的meta標籤中，需要設定一下script-src，script-src是一個指導，控制著程式碼特殊頁面域程式碼相關的許可權， 預設情況下只指定了‘self’ 作為一個有效的程式碼來源，所以這裡需要將引用的js也寫進來，不然的話，我之前就報了下面這裡的錯誤，沒辦法載入進來：
最後附上一張效果圖
結語
這裡還有更多的可以擴充套件的地方，像可以新增一些互動的操作選單，實現一個更加豐富的桌面小精靈。當然原有的live2d外掛也有一些介面，可以實現更加複雜的功能，都可以移植過來，和在網頁上基本上是沒有什麼區別的。文章就寫到這裡了，感謝賞臉閱讀！