React+Electron桌面應(yīng)用開(kāi)發(fā)文章索引
這一篇主要介紹如何快速搭建electron項(xiàng)目，開(kāi)發(fā)屬于自己的MacOS應(yīng)用軟件。是的，開(kāi)發(fā)軟件，只要你會(huì)基本的nodejs就可以。
這里使用的是Brackets開(kāi)發(fā)工具和git項(xiàng)目管理，以MacOS為主，windows用戶也可以參考。
創(chuàng)建項(xiàng)目
- 在github創(chuàng)建新的倉(cāng)庫(kù)myproject，使用自動(dòng)Readme初始化。
- 在本機(jī)創(chuàng)建文件夾myproject。
- 在brackets打開(kāi)本機(jī)文件夾myproject，用brackets git插件，clone克隆github項(xiàng)目。
- 任意修改一下readme.md文件(可以使用markdown插件實(shí)時(shí)預(yù)覽)并保存，勾選modified項(xiàng)目，然后先commit提交到本地，然后再點(diǎn)push按鈕提交到github，測(cè)試是否順利。
- 新建.gitignore文件，添加兩行
node_modules和out。讓git不管理這兩個(gè)文件夾。 - 可選：為brackets安裝Exclude Folders插件，隱藏接下來(lái)將要使用的node_modles文件夾。
下載安裝Nodejs
- 從nodejs官網(wǎng)下載穩(wěn)定版Recommended安裝包，安裝。
- 從brackets文件列表open terminal here打開(kāi)終端，執(zhí)行
node -v回車，正常顯示安裝的nodejs版本，同樣npm -v顯示npm版本。 - 添加npm國(guó)內(nèi)資源鏡像（淘寶提供）,終端運(yùn)行命令
npm install -g cnpm --registry=https://registry.npm.taobao.org,之后可以用cnpm命令代替npm，提高第三方模塊的安裝速度。
安裝Electron
參照官方說(shuō)明安裝。
- 執(zhí)行終端命令
cnpm install electron --save-dev安裝electron，這將自動(dòng)創(chuàng)建node_modules文件夾（brackets列表內(nèi)已經(jīng)隱藏），并下載很多很多文件到這里。 - 修改package.json，增加start命令指向electron，設(shè)定入口為main.js，參照下面代碼需要修改的部分代碼
"main": "main.js",
"scripts": {
"start": "electron ."
},
創(chuàng)建最簡(jiǎn)Electron項(xiàng)目
- 創(chuàng)建main.js文件，添加下面的代碼。
- 創(chuàng)建index.html文件，添加下面的代碼。
- 終端運(yùn)行命令
npm start,這時(shí)會(huì)彈出一個(gè)應(yīng)用窗口（本質(zhì)是一個(gè)瀏覽器），顯示了hello electron文字（來(lái)自index.html頁(yè)面）。
main.js
const {
app,
BrowserWindow
} = require('electron')
const path = require('path')
const url = require('url')
function createWindow() {
//創(chuàng)建瀏覽器窗口
win = new BrowserWindow({
width: 800,
height: 600
})
//讓瀏覽器加載index.html
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
//執(zhí)行
app.on('ready', createWindow)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
打包發(fā)布MacOS應(yīng)用
- 復(fù)制node_modules文件夾下electron/dist/Electron.app到項(xiàng)目下out文件夾里面。（之所以用out是上面再.gitignore里面我們讓git忽略了這個(gè)文件夾）
- 右鍵Electron.app顯示包內(nèi)容，進(jìn)入到contents/Resources文件夾，新建一個(gè)app文件夾，這里就是放置所有頁(yè)面的地方。
- 把項(xiàng)目里面的package.json,main.js,index.html文件拷貝到app文件夾。
- 然后你可以把Electron.app重命名任意名字，拷貝到任意地方，運(yùn)行起來(lái)都是我們上面編寫(xiě)的效果。
- 你可以從網(wǎng)上下載icns蘋(píng)果系統(tǒng)專用的圖標(biāo)文件，覆蓋Electron.app報(bào)內(nèi)容里面contents/Resources內(nèi)的electron.icns，然后Electron.app被復(fù)制到其他地方時(shí)候圖標(biāo)就會(huì)改變。
從easyicon下載icns圖標(biāo)
在線把png圖片轉(zhuǎn)為icns圖標(biāo)
更加復(fù)雜的專業(yè)打包方法看這里
推薦使用electron-forge打包工具
Windows下直接用nodejs改變exe文件圖標(biāo)最快速方法rcedit
完善main.js
請(qǐng)把Electron.app當(dāng)做一個(gè)Chrome瀏覽器看待。它同樣可以打開(kāi)多個(gè)窗口（不僅是標(biāo)簽頁(yè)），也可以打開(kāi)chrome的開(kāi)發(fā)者工具。
閱讀下面新的main.js代碼，了解基本結(jié)構(gòu)。
const {
app,
BrowserWindow
} = require('electron')
const path = require('path')
const url = require('url')
// 保持一個(gè)對(duì)于 window 對(duì)象的全局引用，如果你不這樣做，
// 當(dāng) JavaScript 對(duì)象被垃圾回收， window 會(huì)被自動(dòng)地關(guān)閉
let win
function createWindow() {
// 創(chuàng)建瀏覽器窗口。
win = new BrowserWindow({
width: 800,
height: 600
})
// 然后加載應(yīng)用的 index.html。
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// 打開(kāi)開(kāi)發(fā)者工具。
win.webContents.openDevTools()
// 當(dāng) window 被關(guān)閉，這個(gè)事件會(huì)被觸發(fā)。
win.on('closed', () => {
// 取消引用 window 對(duì)象，如果你的應(yīng)用支持多窗口的話，
// 通常會(huì)把多個(gè) window 對(duì)象存放在一個(gè)數(shù)組里面，
// 與此同時(shí)，你應(yīng)該刪除相應(yīng)的元素。
win = null
})
}
// Electron 會(huì)在初始化后并準(zhǔn)備
// 創(chuàng)建瀏覽器窗口時(shí)，調(diào)用這個(gè)函數(shù)。
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.on('ready', createWindow)
// 當(dāng)全部窗口關(guān)閉時(shí)退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，當(dāng)單擊dock圖標(biāo)并且沒(méi)有其他窗口打開(kāi)時(shí)，
// 通常在應(yīng)用程序中重新創(chuàng)建一個(gè)窗口。
if (win === null) {
createWindow()
}
})
// 在這個(gè)文件中，你可以續(xù)寫(xiě)應(yīng)用剩下主進(jìn)程代碼。
// 也可以拆分成幾個(gè)文件，然后用 require 導(dǎo)入。
致力于讓一切變得通俗易懂
如果您發(fā)現(xiàn)文章錯(cuò)誤，請(qǐng)不吝留言指正；
如果您覺(jué)得有用，請(qǐng)點(diǎn)喜歡；
如果您覺(jué)得很有用，感謝轉(zhuǎn)發(fā)~
END
