前端構造桌面級應用（QQ音樂）

前端構造桌面級音樂播放器（nw與electron）

服務端地址 majunchang.cn:3000/#/recommend

最近研究前端如何構造桌面級應用，看了一下nw和ecectron。於是自己使用vue寫了一個pc版本的qq音樂播放器。由於時間太緊，做的功能很有限。程式碼重複率很高。希望可以體諒。本片文章主要是介紹nw與electron這兩個工具。前端的程式碼已經開源，感興趣的同學可以自己下載下來，新增一些比較有趣的功能以及進行程式碼的優化

附-使用 promise 實現前端快取 （ recommend.vue 中給出示例程式碼）

介面

//  分類歌單資料

export function getDiscList() {
  let href = window.location.href
  let url
  if (href.includes('localhost') || href.includes('127.0.0.1')) {
    url = '/api/getDiscList'
  } else {
    url = 'http://127.0.0.1:3000/api/getDiscList'
  }

  // 需要拼接的資料
  const data = Object.assign({}, commonParams, {
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })

  return axios.get(url, {
    params: data
  })
}

複製程式碼

快取

import {
  getDiscList
} from './recommend.js'

let getDiscListCache
let test

function fn() {
  if (!getDiscListCache) {
    test = '測試變數'
    getDiscListCache = getDiscList() //  在此賦值  import 引入的時候 就向後端傳送介面
  }
}
fn()

export {
  getDiscListCache,
  test
}

複製程式碼

使用

methods: {
    getcateList() {
      getDiscListCache.then(res => {
        console.log(test);
        console.log(res);
        this.songList = res.data.data.list;
      });
    }
  }

複製程式碼

專案預覽圖

分為首頁、歌手列表頁、歌手詳情頁、排行榜。排行榜詳情頁以及播放器頁面，排行榜與歌手頁基本一致 不做贅述

首頁

歌手列表頁

歌手詳情頁

歌手搜尋功能

播放器頁面

技術棧

• 前端 vue、vue-router、webpack

• 後端（代理） node+express做代理

• 介面轉發 jsonp axios

• 打包工具 electron electron-packager

專案簡介

1. 資料獲取部分

  資料主要是獲取QQ音樂的介面，有得介面jsonp的方式 就可以獲取到資料 有得介面需要使用Node做一下代理 來解決跨域
複製程式碼

2. 代理轉發

在開發階段，我們可以使用vue中的dev模組中的proxyTable進行路徑的重寫和代理的轉發
在build的時候 我們可以手動配置 訪問路徑  或者使用express做一下配置 類似於我們將程式碼 放入nginx伺服器中那樣
複製程式碼

3. 專案注意事項

我們需要在node啟動的伺服器裡面（也就是本地伺服器中）解決跨域問題
使用nw的時候需要解決不能播放音訊的問題
index.html以及靜態資源的這些路徑問題
複製程式碼

4. 專案優化點

專案的css部分可以優化 優化為less，sass 或者cssmodule這樣
專案的元件可以抽離一下 目前排行榜詳情頁以及歌手詳情頁基本上的邏輯是一樣的 可以進行抽使用元件化 也可以使用 slot
專案中 還可以新增很多功能 比如說播放mv  下載歌曲 以及新增我喜歡的音樂等
複製程式碼

NodeJs+Express的代理

A 使用express 去訪問打包完成之後的dist目錄的靜態資源

B 為了解決 當dist檔案拖入nw開啟 或者 直接開啟dist目錄的index.html 以及使用electron打包之後 的介面訪問跨域問題

import path from 'path'
import express from 'express'
import axios from 'axios'
import {join} from 'path'

const app = express()

//  掛載靜態路徑
//  A
app.use(express.static(join(__dirname, '../../dist')))

let router = express.Router()

//  B
router.all('*', function (req, res, next) {
  // res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
  res.header('X-Powered-By', ' 3.2.1')
  next()
})

//  做代理的分發和請求  分類歌單
router.get('/getDiscList', function (req, res) {
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
  axios.get(url, {
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    params: req.query
  }).then((response) => {
    console.log('介面響應成功')
    res.json(response.data)
  }).catch((e) => {
    console.log(e)
  })
})

router.get('/lyric', function (req, res) {
  var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'

  axios.get(url, {
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    params: req.query
  }).then((response) => {
    //  由於response 是一個jsonp格式的 所以我們要對這個 進行json轉化
    var result = response.data
    var regExe = /^\w+\(({[^()]+})\)$/
    var matchArr = result.match(regExe)
    if (matchArr) {
      res.json(JSON.parse(matchArr[1]))
    }
  }).catch((e) => {
    console.log(e)
  })
})

app.use('/api', router)

app.listen(3000, () => {
  console.log('伺服器已經啟動,監聽的埠號是3000')
})

複製程式碼

​

nw（node-weikit的簡介與使用）

node-webkit的簡介

官網需要翻牆 下載需要翻牆 （唉...... 在這裡貼一下nw的官網首頁和下載截圖）

Github上nw.js有兩萬多Star和接近3000的Fork，說明它已經相當成熟。 並且在Github專案的最後面，顯示Intel有贊助這個專案，看起來很牛的樣子

• nw.js也是一個使用前端技術（html、css、JavaScript）來構建pc端程式的一個框架。
• 可以相容windows xp系統
• 支援用HTML5, CSS3, JS和WebGL來寫應用程式，包括桌面端和移動端；
• 完全支援Node.js APIs和所有的第三方模組；
• 效能也不會很差，對於輕量級的應用足夠了；
• 對應用進行打包和釋出十分簡單，也就是說寫一份程式碼很容易移植到不同的平臺（包括主流的Linux, Mac OS X 和 Windows）；

nw能做什麼？

nw.js就是使HTML, CSS, JavaScript寫的原本在瀏覽器上執行的程式，也可以在桌面端執行。

nw的安裝與使用

1. 下載安裝包安裝（建議大家下載帶有開發包的 便於除錯）

   官網下載nw.app的壓縮包 解壓以後即可使用

附官網地址: github.com/nwjs/nw.js

效果圖：
複製程式碼

1. 使用命令列安裝 （命令列下載比較慢 所以不是特別建議）

sudo npm install -g nw
複製程式碼

nw的打包流程

打包工具 （簡單介紹幾種 ）

• nodebob是node-webkit的構建工具，可以在Windows環境中自動釋出node-webkit應用程式。目前在v0.1中，用windows批處理指令碼編寫。
• nw-builder＆grunt-nw-builder允許您使用grunt為mac，win和linux構建node-webkit應用程式。他們將下載特定版本的預構建二進位制檔案，解壓縮它，建立一個版本資料夾，為指定目錄建立app.nw檔案，並將app.nw檔案複製到它所屬的位置
• Nuwk！Nuwk！可以輕鬆地基於node-webkit建立Mac應用程式，從而簡化測試和構建過程。它負責建立可執行檔案，附加應用程式圖示並相應地配置plist檔案。（非常alpha階段）
• generator-node-webkit是一個yeoman生成器，用於開發node-webkit應用程式併為mac，linux和win建立包。 鬆整合到您的構建過程中，它將為Linux，Windows和OSX下載nwjs 32 / 64bit，並從給定的源目錄為所有3個平臺構建軟體包。

windows下的打包流程 www.cnblogs.com/tinyphp/p/5…

mac/osx下的打包流程

blog.csdn.net/weichuang_1…

blog.csdn.net/baidu_30907…

nw解決不能播放音訊問題

MP3編碼屬於專利編碼，非開源授權的，所以在nw.js中預設不支援MP3的播放，需要手動啟用才行。

需要從社群中下載對應版本的libffmpeg.dll檔案 然後將原來的替換一下即可解決

社群地址: github.com/iteufel/nwj…

目標檔案地址： /Users/baidu/Desktop/nwjs-sdk-v0.31.1-osx-x64/nwjs.app/Contents/Versions/67.0.3396.79

我把這個軟體安裝在了桌面上 這是目標地址 大家只要記住後面的就行,Versions後面的數字 代表的nw內嵌的谷歌版本（不一樣也沒事）

nw的使用以及如何除錯

通過快捷鍵 option+command+i 開啟內建谷歌的控制檯。如果不能開啟 或沒反應 有可能是大家下載的版本 不是帶開發工具的

nw的應用

nwjs——你值得擁有！ 不得不提nw.js開發出的應用已經涵蓋了許多領域：

1. WhatsApp 經典的聊天應用，還有Messenger；
2. Powder Player 種子下載，以及視訊播放器；
3. Boson Editor 程式碼編輯器，甚至還有一款Markdown編輯器叫Story-writer；
4. Leanote Desktop App 類似Evernote的筆記類應用程式；
5. Mongo Management Studio 資料庫管理應用。

electron（簡介與使用）

官網地址 （不用翻牆 這一點很棒）

electronjs.org/

簡介

• electron 是一個可以讓我們使用js建立桌面應用程式的框架，並且可以很簡單的實現跨平臺，讓我們可以更輕鬆的書寫業務邏輯，而不用擔心跨平臺的問題。
• 與nw相比，electron的使用人數更多，文件更加齊全，使用起來也更加方便。
• 社群很強大,基本上你遇到的問題 都可以在社群中解決。

官方示例

# 克隆示例專案的倉庫
$ git clone https://github.com/electron/electron-quick-start

# 進入這個倉庫
$ cd electron-quick-start

# 安裝依賴並執行
$ npm install && npm start
複製程式碼

專案截圖

electron的安裝與打包工具的安裝

• 全域性安裝electron

  npm install electron -g
  複製程式碼

• 本地安裝

  npm install electron --save-dev
  複製程式碼

• 打包工具

  這裡的打包工具我選擇的是electron-packager

  在專案中 安裝打包工具 然後配置一下命令列

  npm install --save-dev electron-packager
  複製程式碼

  ​

  {
    "name": "qq-music",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "junchang.ma.ele_waimai <junchang.ma@ele.me>",
    "private": true,
    "scripts": {
      "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
      "start": "npm run dev",
      "build": "node build/build.js",
      "electron_dev": "electron build/electron.js",
      "electron_build": "electron-packager ./dist/ --platform=darwin --arch=x64 --overwrite"
    },
    "dependencies": {
      ....
    },
    "devDependencies": {
      ...
    },
    "engines": {
      "node": ">= 6.0.0",
      "npm": ">= 3.0.0"
    },
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ]
  }
  
  複製程式碼

  說一下命令列配置：

  packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"
  複製程式碼

  ​

  • location of project：專案所在路徑
  • name of project：打包的專案名字
  • platform：確定了你要構建哪個平臺的應用（Windows、Mac 還是 Linux） win32=> windows下 darwin=> mac
  • architecture：決定了使用 x86 還是 x64 還是兩個架構都用
  • electron version：electron 的版本
  • optional options：可選選項

  欄位裡的 專案名字，version，icon路徑要改成自己的；

electron的打包（將electron整合在vue中）

命令列配置 參考上面

本地預覽模式

• 在build資料夾下 生成一個electron.js

  // Modules to control application life and create native browser window
  const {app, BrowserWindow} = require('electron')
  // import path from 'path'
  const path = require('path')
  // Keep a global reference of the window object, if you don't, the window will
  // be closed automatically when the JavaScript object is garbage collected.
  let mainWindow
  
  function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600})
  
    // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
  
    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
  
    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      mainWindow = null
    })
  }
  
  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow)
  
  // Quit when all windows are closed.
  app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  
  app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
      createWindow()
    }
  })
  
  // In this file you can include the rest of your app's specific main process
  // code. You can also put them in separate files and require them here.
  
  複製程式碼

  ​

打包模式

1. 將build目錄的下electron.js 複製到dist檔案中一份

2. 配置一個package.json

   {
     "name": "nw-qqMusic",  專案名稱
     "version": "0.0.1",     版本號
     "main": "electron.js"   專案入口檔案
   }
   
   複製程式碼

3. 在專案根目錄的命令列中 執行

   npm run build 
   npm run electron_build
   複製程式碼

Nw與Electron的對比

1. nw.js無論從表面還是本質都更接近 Node.js，nw.js直接繼承和使用了node.js的啟動、開發、執行方式，對node.js的修改最小，而 electron的改動很大，增加了很多自己的東西，使用起來感覺與node.js差別明顯。nw.js是和node.js一樣是單程式的，electron改成了雙程式，技術實現改變。
2. electron的優點：開源的核心擴充套件比較容易，介面定製性強，原則上只要是Web能做的他都能做。是目前最廉價的跨平臺技術方案，相對其他跨平臺方案（如 QT GTK+ 等），更穩定，bug少， 畢竟只要瀏覽器外殼跑起來了，裡面的問題不會太多 。
3. electron的缺點：
   • 卡，啟動慢，這可能是webkit的鍋。畢竟一個瀏覽器要支援的功能確實有點多。
   • 除了主程式 你可能還需要啟動一些輔助程式來完成工作。而每當你新開一個程式，起步價就是一個nodejs的記憶體開銷！
   • 丟幀，這個最嚴重，可我已習慣了native 的絲滑. mac下感覺還可以 win下有點夠嗆。
   • 打出來的包太大。（很顯然，即便是一個空包，也至少包含了一個瀏覽器的體積
4. NW.js對庫的整合更深，某種意義上說，對chromium和Node有更深入的理解（新功能要用，必須把原始碼拿來build進去）。
5. 從license上來看，Electron是Github的，NW.js則是Intel。
6. nw 在mac上只能構建mac的應用 ，windows下只能構建windows的。而electron 可以通過命令列構建不同環境下的 linux mac和windows等

資料文件

qq音樂介面獲取方式的相關文件

blog.csdn.net/xiayiye5/ar… blog.csdn.net/hhzzcc_/art… segmentfault.com/a/119000000…

nw相關資料

• github.com/nwjs/nw.js
• blog.csdn.net/tsyccnh/art…

electron的相關資料

打造你的第一個electron應用

github地址

常用打包工具

Electron: 從零開始寫一個記事本app

electron打包：electron-packager及electron-builder兩種方式實現（for Windows）

electron-packager命令常用引數大全

探索與思考

實現讓div的高度也自適應的方式 和寬度始終成一個比例，能有幾種實現方法？

專案地址與啟動方式

克隆專案地址  
git clone https://github.com/majunchang/QQ-music.git
安裝依賴 
npm i  
cd  nodeServer
npm i
啟動Node代理 在nodeServer資料夾下
npm run dev 
本地預覽 （專案的根目錄下）
npm  run dev  

本地electron預覽
npm  run electron_dev

打包編譯

npm run build 
npm run electron_build

複製程式碼