VisualStudio下 Electron初次使用
- Electron是什么
- Electron部署
- 應用實踐
- 后話
Electron是什么
Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術創建原生程式的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可，如果你可以建一個網站，你就可以建一個桌面應用程式，
Electron 基于 Chromium 和 Node.js，在以前傳統的做法中，想要降低多平臺應用的開發成本，可能直接在服務器部署一套網站，然后利用其他封裝的殼來充當應用，比如webview、Webkit、CefSharp等等，真正跨平臺的仍是HTML，但是windows下的操作與互動并不能直接帶到Mac或其他設備，Electron 出現給我們帶來了新的思路與方法，同時HTML頁面本地化的加載也為應用的美化帶來了更多選擇，
叨叨一下：簡單的來說就是，終于不要搞那丑陋的WinForm了，什么DevExpress、ComponentOne啊，或者是WPF啊都不用想了，基于業務的表單操作，那不是web頁就搞定了嗎（套上官言，什么前后端分離啊、跨平臺啊、領域驅動啊、快速迭代啊、部署遷移啥的），而且好看啊，看看微軟前面還在VisualStudio2019史上最強IDE，后面VSCode也悄悄用的Electron，多長見識總是沒壞處的，
Electron部署
在使用Electron之前，需要先安裝好node,npm,electron，node.js的安裝直接在官網下載就好，同時會幫我們安裝好npm，
關于Electron的安裝，最好是替換成國內鏡像，直接使用npm我是沒有成功，關于替換方法如下：
- 臨時使用
npm --registry https://registry.npm.taobao.org install express - 持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通過下面方式來驗證是否成功
npm config get registry 或 npm info express - 通過cnpm使用（推薦）
npm install -g cnpm --registry=https://registry.npm.taobao.org
接著使用cnpm安裝Electron
cnpm install -g electron
好了，安裝完成之后檢查一下
應用實踐
下面，嘗試創建一個Electron的應用（我用的VS2019）
第一步，在package.json檔案中，添加專案參考
保存之后會提示缺失，但是之前已經安裝過了，怎么會又提示安裝呢？仔細觀察，在VS中electron組件的參考路徑是在專案目錄下，而我們之前命令控制臺安裝的確是存在于C盤
C:\Users\iZaix\AppData\Roaming\npm\node_modules
兩種方式處理：
- 將參考目錄指向全域npm包目錄
- 復制一份依賴包放在對應路徑下（我使用的這個方式）
第二步，修改server.js檔案，并新增想要展示的HTML頁，可以參考官方示例 ，我的這個參考的是GitHub上的檔案
修改server.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 保持win物件的全域參考,避免JavaScript物件被垃圾回收時,視窗被自動關閉.
let win
function createWindow () {
//創建瀏覽器視窗
win = new BrowserWindow({width: 800, height: 600})
// 加載應用的 index.html
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// 打開開發者工具
win.webContents.openDevTools()
// 關閉window時觸發下列事件.
win.on('closed', () => {
// 取消參考 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引入獨立的js檔案.
創建index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
第三步，配置專案屬性，將Node.exe路徑指向專案路徑下的electron.exe
運行專案，創建一個簡單的electron應用就完成了，
后話
這只是簡單的創建一個Electron專案，想要更深入的應用還需要不斷的學習和積累，它的本意是利用前端技術的優勢來創建跨平臺的桌面應用，可能我們更多的只是將它當作一個瀏覽器的殼來使用，但是我仍希望能有更多人真正的用起來，減少開發量也好，美化頁面也好，應用科學需要不停的實踐才能走得更好，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/225371.html
標籤：其他