Electron + VsCode 開發javaScript客戶端程序

簡介:

 Electron 是一款使用 Node 做爲本地環境 的客戶端開發軟件
 能夠在本地直接打開 html 頁面,並使用 node 做爲本地處理環境

 Electron 能夠使用 html + css + javaScript 的方式開發客戶端程序
 並且Electron 是一種跨平臺環境

 不過本次重點並非介紹 electron 在此推薦一篇知乎 博文
 https://zhuanlan.zhihu.com/p/... 來介紹 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.點擊文件→首選項→鍵映射擴展一樣會彈出這個頁面點擊下載便可