這幾天到年底了，公司也沒啥事，閑著就到處瞅瞅，記得上一家公司的時候用 Electron+ng1 寫過專案，只是那個時候專案框架都是別人搭的，自己只負責寫功能，對Electron沒啥認識， 這幾天想著反正閑著也是閑著，就撿起來自己玩玩，順便記錄一下，
一、環境安裝：
前端開發，現在不管是那個方向，都免不了使用NPM，所以node.js的安裝是必須的，也是最基礎的一步，
1、安裝node.js，從官網 https://nodejs.org/en/ 下載當前node.js LTS包(穩定版本)，下載完成后，雙擊執行，安裝完成后，通過CMD命令列 可以看到當前node、npm版本號，
2、npm安裝完成后，接下來安裝electron，
npm install -g electron 或 cnpm install -g electron (不會cnpm 自行度娘cnpm)
注：npm安裝，由于資源服務器在國外，請求資源網速較慢，在node install.js 會卡很久(甚至下載失敗)，所以建議用 cnpm 安裝，
npm 終于安裝完成了(足足花了40分鐘)，
二、創建專案：
npm 和 electron 安裝完成后，接下來就可以創建專案了，創建專案有以下三種方式：Git拷貝、通過electron社群提供的命令列工具(CLI) electron-forge 創建專案、直接創建
(1)、Git拷貝：Git拷貝，實際就是復制官方 "嘗試此例" 代碼結構，然后根據自身專案需求進行修改，
復制并運行這個庫 electron/electron-quick-start
a：新建一個檔案夾(路勁中不能含有中文) 克隆這個倉庫：https://github.com/electron/electron-quick-start.git
b：通過命令列(CMD)進入該專案檔案夾 electron-quick-start 或代碼編輯工具(vscode、webstorm)等直接打開該專案，
c：進入專案檔案夾或打開該專案后，需要安裝專案運行的依賴庫，直接執行命令： npm install
d：依賴庫安裝完成，就可以啟動該應用了，執行命令： npm start
(2)、第二種是通過electron社群提供的命令列工具(CLI) electron-forge 創建專案，
electron-forge 官網：https://www.npmjs.com/package/electron-forge 或 https://www.worldlink.com.cn/osdir/electron-forge.html
這種方法，前提是先安裝CLI工具 electron-forge，由于是CLI工具，便于以后使用，建議全域安裝(和安裝electron一樣，只需首次安裝即可)，
npm install -g electron-forge 或 cnpm install -g electron-forge
electron-forge安裝完成后，通過執行命令：electron-forge init XXXXXX創建專案，其中XXXXXX 既是新建專案的專案名稱，同時會新建XXXXXX檔案夾以存放專案源檔案，
electron-forge init electronTest
，Installing NPM Dependencies 和安裝electron一樣，會比較久，耐心等候，
注： 安裝模塊程序中，若安裝失敗則刪掉node_modules檔案夾，重新進入到專案檔案夾或打開專案 執行npm install 或 cnpm install 即可，
等待 Installing NPM Dependencies 執行完成后，進入到專案檔案夾XXXXXX(是該專案的檔案夾，不是創建該專案的檔案夾，創建該專案的檔案夾是該專案的父級檔案夾)或打開專案XXXXXX 執行命令： npm start 啟動當前專案(通過 electron-forge 創建的專案，在 npm start 啟動專案時或專案打包時，會優先檢測系統環境 Checking your system)，
(3)、第三種是新建各種檔案，直接創建專案，
a：新建一個檔案夾 （該檔案夾既是專案名稱，同時用以存放專案源檔案，注：檔案夾名稱不能含有中文）
b：通過命令列(CMD)進入該新建檔案夾 或 代碼編輯工具(vscode、webstorm)等直接打開該新建檔案夾 新建一個 index.html 和一個main.js 檔案，同時將下面 入門 內的代碼分別復制到對應的檔案，
c：初始化 package.json 檔案（用以存放專案配置引數），執行命令 npm init，然后根據提示進行引數填寫，（注： package.json檔案 可以自己新建，也可以不新建，npm init 命令執行完畢后，會自動生成，特注：package.json里面配置項 entry point ： 對應的JS檔案(此處為main.js)必須是入口 JS (主行程所在JS檔案)）
npm init
d：index.html 和 main.js 新建完成，package.json配置初始化完成，接下來區域安裝 electron (之前是全域安裝的)，執行命令：npm install --save-dev electron(安裝時間還是一如既往的長) 或 cnpm install --save-dev electron，
npm install --save-dev electron 或 cnpm install --save-dev electron
安裝專案依賴包：npm install 或 cnpm install
npm install 或 cnpm install
e：檔案新建完成，依賴包正常安裝完成，最后一步 啟動當前專案：npm start
三、入門：
index.html檔案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
main.js檔案
const {app, BrowserWindow} = require('electron');
// 保持對window物件的全域參考，如果不這么做的話，當JavaScript物件被
// 垃圾回收的時候，window物件將會自動的關閉
let win;
function createWindow() {
// 創建瀏覽器視窗，
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// 加載index.html檔案
win.loadFile('index.html');
// 打開開發者工具
win.webContents.openDevTools();
// 當 window 被關閉，這個事件會被觸發，
win.on('closed', () => {
// 取消參考 window 物件，如果你的應用支持多視窗的話，
// 通常會把多個 window 物件存放在一個陣列里面，
// 與此同時，你應該洗掉相應的元素，
win = null;
});
}
// Electron 會在初始化后并準備
// 創建瀏覽器視窗時，呼叫這個函式，
// 部分 API 在 ready 事件觸發后才能使用，
app.on('ready', createWindow);
// 當全部視窗關閉時退出，
app.on('window-all-closed', () => {
// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
// 否則絕大部分應用及其選單欄會保持激活，
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 在macOS上，當單擊dock圖示并且沒有其他視窗打開時，
// 通常在應用程式中重新創建一個視窗，
if (win === null) {
createWindow();
}
});
// 在這個檔案中，你可以續寫應用剩下主行程代碼，
// 也可以拆分成幾個檔案，然后用 require 匯入，
package.json檔案
{ "name": "electron-self-built", "version": "1.0.0", "description": "electronSelfBuilt", "main": "main.js", "scripts": { "start": "electron .", "package": "electron-packager . myClient --win --out myClient --arch=x64 --electron-version=7.1.9" // electron-packager 打包配置 }, "author": "", "license": "ISC", "devDependencies": { "electron": "^7.1.9" }, "private": true }
檔案注釋很清楚，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/10604.html
標籤：其他
上一篇：介紹axios和promise
下一篇：jQuery---入口函式的寫法