最近研究了一下electron，于是就來(lái)做個(gè)實(shí)踐項(xiàng)目local-music-player,主要功能就是導(dǎo)入音樂(lè)到歌曲列表，播放音樂(lè)、刪除音樂(lè)等。附上地址，下載跑起來(lái)，自己打包出一個(gè)app。
github地址
技術(shù)用electron、原生js。
先看最終產(chǎn)品效果，首先是空白列表。
然后先點(diǎn)擊【添加歌曲】
導(dǎo)入音樂(lè)之后就可以播放音樂(lè)了，也可暫停、刪除音樂(lè)。
啟動(dòng)項(xiàng)目
我直接看官網(wǎng) https://www.electronjs.org/ ,這個(gè)官網(wǎng)也是挺垃圾的，經(jīng)常打不開(kāi)，打開(kāi)慢，我還是翻墻了的。
# 克隆示例項(xiàng)目的倉(cāng)庫(kù)
$ git clone https://github.com/electron/electron-quick-start
# 進(jìn)入這個(gè)倉(cāng)庫(kù)改名為local-music-player
$ cd local-music-player
# 安裝依賴并運(yùn)行
$ npm install && npm start
如果你是Windows用戶，一般都會(huì)失敗，因?yàn)檫@里要下載一堆環(huán)境依賴如Visual C++ 軟件包、Python等，所以先別走上面的步驟，先點(diǎn)下面鏈接，這里按照它的說(shuō)明，把這些前期環(huán)境工作做好https://github.com/felixrieseberg/windows-build-tools，然后再進(jìn)入項(xiàng)目npm install && npm start
然后就開(kāi)始開(kāi)發(fā)了。
開(kāi)發(fā)
electron由Node.js+Chromium+Native APIs構(gòu)成。你可以理解成，它是一個(gè)得到了Node.js和基于不同平臺(tái)的Native APIs加強(qiáng)的Chromium瀏覽器，可以用來(lái)開(kāi)發(fā)跨平臺(tái)的桌面級(jí)應(yīng)用。有意思的是：我們可以在一個(gè)js文件里面同時(shí)操作dom與nodejs的api。
electron的核心概念是主進(jìn)程和渲染進(jìn)程，主進(jìn)程main.js創(chuàng)建應(yīng)用，并且提供訪問(wèn)操作系統(tǒng)的能力， 而渲染進(jìn)程 BrowserWindow 主要負(fù)責(zé)web ui開(kāi)發(fā)。這個(gè)就是參考了chromium的架構(gòu)思想。進(jìn)程之間通信用ipcMain\ ipcRenderer或者渲染進(jìn)程直接調(diào)用remote.xxx來(lái)操作主進(jìn)程的方法，而主進(jìn)程可以通過(guò)
const win = new BrowserWindow({...})
win.webContents.xxx
來(lái)操作渲染進(jìn)程的方法。我這里只用了ipcMain\ ipcRenderer方式通信。本地導(dǎo)入音樂(lè)用到了一個(gè)electron-store的庫(kù)，這里主要就是生成一個(gè)文件來(lái)記錄歌曲列表的增刪改之后的信息的。用了它就會(huì)在本地的這個(gè)目錄生成一個(gè)json文件,文件名在代碼中控制
打包
打包是個(gè)巨坑，這次開(kāi)發(fā)經(jīng)歷簡(jiǎn)直可以說(shuō)是開(kāi)發(fā)5分鐘，打包兩小時(shí)！ 并不是打包慢，主要問(wèn)題是打包需要明白怎么配置和打包過(guò)程中各種包下載失敗報(bào)錯(cuò)。因?yàn)樗?hào)稱跨平臺(tái)的,所以可以打包成任意格式的包，如windows平臺(tái)的nsis (Installer), nsis-web (Web installer), portable ; mac的 dmg, pkg, mas, mas-dev; linux的deb, rpm, freebsd, pacman, p5p, apk.
我這里用了electron-builder，文檔是英文的，需要配置package.json配置build選項(xiàng),我的配置如下，主要是配置了win平臺(tái)的，打包出來(lái)exe文件。
{
"name": "local-music-player",
"version": "1.0.0",
"description": "一個(gè)音樂(lè)播放器",
"main": "main.js",
"scripts": {
"start": "nodemon --watch main.js --exec electron .",
"build": "electron-builder"
},
"build": {
"appId": "local.music.app",
"productName": "音樂(lè)播放器",
"mac": {
"category": "public.app-category.productivity",
"artifactName": "${productName}-${version}.${ext}"
},
"win": {
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
],
"icon": "./build/icon/icon.ico",
"artifactName": "${productName}-${version}.${ext}",
"publisherName": "xxx"
},
"nsis": {
"allowToChangeInstallationDirectory": true,
"oneClick": false,
"perMachine": false,
"installerIcon": "./build/icon/icon.ico",
"uninstallerIcon": "./build/icon/icon.ico",
"installerHeaderIcon": "./build/icon/icon.ico",
"createDesktopShortcut": true
},
"copyright": "?2020 xx公司."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^9.1.0",
"electron-builder": "^22.7.0",
"nodemon": "^2.0.4"
},
"dependencies": {
"bootstrap": "^4.5.0",
"electron-store": "^6.0.0",
"uuid": "^8.2.0"
}
}
更多配置可以參考這篇文章：Electron-builder打包詳解
巨坑：downloading錯(cuò)誤。
我也是參考這篇文章：Electron 打包問(wèn)題：electron-builder 下載各種依賴出錯(cuò)，然后需要自己根據(jù)報(bào)錯(cuò)，自己去手動(dòng)下載包到對(duì)應(yīng)的目錄，真是服了。我一開(kāi)始去https://github.com/electron/electron/releases/tag/v9.1.0
找下載，結(jié)果下載非常慢，等著下載又容易失敗，最后我還是手動(dòng)去淘寶鏡像
里面去找資源，結(jié)果是秒下。
打包總結(jié)
1、先配置build選項(xiàng)，然后執(zhí)行npm run build,對(duì)了，根目錄還要自己創(chuàng)建一個(gè)build文件夾里面弄個(gè)256x256的ico圖標(biāo)，如build選項(xiàng)下的win選項(xiàng)里面的"icon": "./build/icon/icon.ico",
2、根據(jù)下載錯(cuò)誤，參考這篇文章：Electron 打包問(wèn)題：electron-builder 下載各種依賴出錯(cuò)去淘寶鏡像拿資源。
最后打包成功，在dist目錄里面
所以最終的成果其實(shí)拿 dist/音樂(lè)播放器-1.0.0.exe 這個(gè)安裝包就行了。
最后
本次實(shí)踐，完整走了一次桌面端開(kāi)發(fā)流程。但是還有很多不完善的地方，沒(méi)有采用工程化的方式開(kāi)發(fā)。所以，實(shí)際開(kāi)發(fā)可以考慮參考electron-vue，或者自己用webpack來(lái)搭建腳手架，折騰一下。
