Electron + VsCode 開發javaScript客戶端程序
簡介:
Electron 是一款使用 Node 作為本地環境 的客戶端開發軟件
可以在本地直接打開 html 頁面,并使用 node 作為本地處理環境
Electron 可以使用 html + css + javaScript 的方式開發客戶端程序
而且Electron 是一種跨平臺環境
一 .Electron 安裝
直接通過 此教程即可直接 安裝并配置 elecron 運行所需要的 環境配置
不過要記住 通過 npm 安裝 electron 后,最好記一下electron 的安裝路徑,防止之后找著費勁
http://www.kancloud.cn/winu/e...
通過這個教程 基本的 electron 就可以跑起來了
不過現在還沒有和 編輯器綁定
而且通過 cmd 啟動的程序,log 是打到 cmd 中的并不方便調試.
二.使用 VSCode 開發
直接通過VSCode 官網 下載并安裝 VSCode (VSCode是一個免費軟件,起碼暫時是)
打開VS Code 后通過 文件→打開文件夾,打開項目
這時你的項目中 應該有3個文件 app.js index.html package.json
不過這時還不能通過 VSCode 啟動 項目
三.配置 VSCode 的Node 啟動
選擇左側測試標簽頁,點擊配置下拉列表,選擇添加配置
選擇Node.js
這時會在你的項目中 自動添加 .vscode 文件夾 并創建 launch.json 文件
不過這時 也只是應用了 node 的啟動方式,而不是 electron,也就是說現在項目還是無法啟動的
四.配置 VSCode 啟動 Electron
網上的教程 大多是通過 node_modules 下 .bin 中的 electron.cmd 執行程序啟動
不過如果直接建立文件,并且使用全局electron 執行程序,則沒有 electron 這個啟動文件
所以只能通過其他方式配置
找到項目文件夾,在文件夾中 創建 run.cmd 文件添加內容
electron . --debug=5858
更改 launch.json 文件,添加
"runtimeExecutable": "${workspaceRoot}\\run.cmd"
指向剛才添加的 文件
添加 "port": 5858 指向上面 electron 配置的 調試端口
當不配置調試線程時, 會因為VSCode 找不到調試線程而自動關閉程序
五.TypeScript 連續崩潰問題
有時在編寫 代碼或者 運行程序時,VSCode 連續報出 TypeScript 崩潰問題
解決辦法在全局 安裝 TypeScript ,如果無效 在本地安裝 TypeScript
全局安裝
npm install -g typescript
本地安裝(需要進入項目目錄)
npm install typescript
本地安裝時 如果你的項目中 沒添加過 node_modules
這時會自動創建 node_modules 文件夾
并在VsCode 中 點擊 文件→首選項→設置
這時 VSCode 會自動在項目根目錄下 建立 .vscode 文件夾,并建立 setting.json 文件
并在工作區設置中 添加
"typescript.tsdk": "./node_modules/typescript/lib"
六.常用語法
1.引用其他 js 文件
在 Node 中 js文件引用其他js 文件并不是像java 等中是直接引用,必須在文件中 顯示引用類文件并聲明對象才可使用
而其他文件中 可以調用到的 內容也必須通過特殊方式聲明,使用:
module.exports.str="string var";
聲明一條屬性,使用:
module.exports.testF = function(){
console.log("testF")
};
聲明一個方法
在使用的js 頁面中 使用
const testjs = require("./js/test.js");
引用并獲取一個實例
使用 對象名.方法/屬性,調用方法或者屬性
2.electron 中跨進程的通信和傳值
在electron 中程序和頁面的進程是獨立的,進程之間只能通過特殊方式進行 消息傳遞
這是為了防止在頁面中調用本地文件API,使之直接讀取/更改本地內容
在electron 中主線程,和渲染線程,都以注冊監聽器的方式監聽 由其他線程發來的信息
主線程使用 ipcMain 獲取主線程 ipc
const ipc = require('electron').ipcMain;
渲染線程使用 ipcRenderer 獲取 ipc
const ipc = require('electron').ipcRenderer;
兩種線程使用 ipc.on 的形式注冊"監聽器"
ipc.on('消息名', function ( e [, 參數 ][, 參數 ]) {
console.log("收到客戶端/頁面 通信!");
});
渲染線程使用 ipc.send 向主進程發送消息
ipc.send('消息名' [,參數] );
而主線程無法直接向渲染線程發送消息
需要使用 接收消息時的 e對象返回消息
e.sender.send('消息名' [,參數 ] );
在主進程 與渲染進程直線 通信時
可以直接傳遞對象參數,對象會在方法內自動被格式化為json字符串
在接受方 接收消息時,第一個參數 會是 e,而不是發送方傳入的 第一個參數
3.electron 本地文件操作
需要先獲取 fs對象
const rf = require("fs");
使用 rf.writeFile 寫入文件
rf.writeFile('文件路徑', '內容', function () {
console("寫入文件成功!");
});
使用 rf.read 讀取文件
var data = rf.readFileSync(filePath + fileName, "utf-8");
Sync 為同步讀取
這時已經能通過 VSCode 開發簡單的 electron 程序了
不過其實還有一點需要注意,在實際開發中 VSCode 的快捷鍵更偏向于 之前VS 系列的快捷鍵
而不是 Eclipse 系列
這里其實已經有官方的解決辦法了(兩種方式 結果相同)
1.通過點擊左側 擴展按鈕
輸入 @recommended:keymaps 點擊并安裝 EclipseKeymap 設置快捷鍵
2.點擊文件→首選項→鍵映射擴展
同樣會彈出這個頁面點擊下載即可
來自：https://segmentfault.com/a/1190000008349657