electron-vu打造低配版網易雲(Mv版)

時間 2019-11-17

標籤 electron 打造網易简体版

原文原文鏈接

前言

倉庫地址css

想體驗一下寫桌面程序，因此使用electron,而後爲了快速開發選擇了electron-vue.vue

找了一些Api 最後發現仍是網易雲的Api比較好使，而後不少大佬寫了網易雲音樂了，因此我就走一波歪路~~~~~node

最後就是開幹，上鍵盤一梭哈(儘可能少寫文字，節省你們閱讀時間)。ios

技術棧

核心-用到的東西git

electron-vue

electron-vue - 基於 vue (基本上是它聽起來的樣子) 來構造 electron 應用程序的樣板代碼。github

element

element - Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫.web

axios

axios - 基於Promise的HTTP客戶端，用於瀏覽器和node.js(Google 自動翻譯，這個你們都懂).axios

vue-dplayer

vue-dplayer - 基於DPlayer的Vue 2.x視頻播放器組件.api

Api

網易雲音樂Node.js API服務 - 網易雲音樂Node.js API服務(我是部署在本身服務器上面了).瀏覽器

界面展現

界面很簡單，展現Mv而後能夠播放，評論會以彈幕的形式顯示出來

(彈幕處理得不太好，並且寫了好久才寫了這麼點界面哎o(︶︿︶)o 唉).

完成進度

基本頁面展現
自定義狀態欄支持放大、縮小、關閉
播放Mv 請求點擊的Mv而後播放視頻
顯示彈幕評論轉換彈幕顯示
切換頁面上一頁、下一頁、首頁、尾頁
彈幕處理的很差
沒有性能優化
沒有分離組件
打包沒有處理icon(懶~~)
忘記了...娛樂項目沒有注意不少隨緣隨緣
也但願你們有好的idea一塊兒pr完善哦

技術實現

技術實現過程和一些踩過的坑

自定義狀態欄

由於win自帶的狀態欄太醜了，因此本身模擬了一個，electron-vue 經過 ipcMain 發送消息

ipcMain - 從主進程到渲染進程的異步通訊。

ipcMain模塊是EventEmitter類的一個實例。當在主進程中使用時，它處理從渲染器進程（網頁）發送出來的異步和同步信息。從渲染器進程發送的消息將被髮送到該模塊。 -- copy c & v

參考文章

在 index.js 修改窗口大小.

BrowserWindow - 建立和控制瀏覽器窗口。

裏面的參數本身能夠看文檔哦~

mainWindow = new BrowserWindow({
    height: 710,
    width: 1200,
    useContentSize: true,
    frame: false
  })

複製代碼

設置以後，有一個細節須要瞭解一下.

可拖拽區 - 默認狀況下, 無框窗口是 non-draggable 的..... (總之就是，你須要設置一下)

要使整個窗口可拖拽, 您能夠添加 -webkit-app-region: drag 做爲 body 的樣式:

<body style="-webkit-app-region: drag"></body>
複製代碼

請注意, 若是您已使整個窗口draggable, 則必須將按鈕標記爲 non-draggable, 不然用戶將沒法單擊它們:

button {
  -webkit-app-region: no-drag;
}
複製代碼

若是你設置自定義標題欄爲 draggable, 你也須要標題欄中全部的按鈕都設爲 non-draggable。

詳情能夠看文檔呢。

模擬事件

參考文章裏面有介紹到，流程大概就是這樣。

// 引入
const {ipcRenderer: ipc} = require('electron')

// 自定義事件
winMin () {
    ipc.send('window-min')
},
winEnlargeOrNarrow () {
    ipc.send('win-enlarge-or-narrow')
},
winClose () {
    ipc.send('window-close')
}

/** * 模擬 最小 放大 還原 關閉 事件 * index.js 修改 */
ipcMain.on('window-min', () => {
  mainWindow.minimize()
})
ipcMain.on('win-enlarge-or-narrow', () => {
  if (mainWindow.isMaximized()) {
    mainWindow.unmaximize()
  } else {
    mainWindow.maximize()
  }
})
ipcMain.on('window-close', () => {
  mainWindow.close()
})
複製代碼

不想寫的話，能夠複製粘貼個人一梭哈.

評論轉彈幕

播放器提供了相應的接口，只須要獲取評論轉換相應的數據就能夠了。

transformComments (commentsArr) {}

dp.danmaku.draw({
   text: 'DIYgod is amazing',
   color: '#fff',
   type: 'top'
});
複製代碼

源碼地址

其餘

封裝方法

import axios from 'axios'

export default () => {
  return axios.create({
    baseURL: 'http://123.207.60.132:3000',
    timeout: 1000
  })
}

-----------------

import Api from './Api'

export default {
  /** * 默認30條數據，能夠自定義 * @param limit * @returns {*} */
  getTopMv (limit = 30, offset = 0) {
    return Api().get(`/top/mv?limit=${limit}&offset=${offset}`)
  },
  getMvId (id) {
    return Api().get(`/mv?mvid=${id}`)
  },
  getMvComments (id) {
    return Api().get(`/comment/mv?id=${id}`)
  }
}

複製代碼