使用electron-forge和cnpm命令來寫一個簡單的electron桌面應用

Electron一句話簡介

Electron允許web程序員用Javascript、HTML、CSS來編寫運行於Windows、macOS、Linux跨平台的桌面應用。

環境安裝

安裝Node.js

到node.js下載最新穩定版本。

安裝cnpm

大國程序員需要一個cnpm代替npm。在windows裡開始->運行->cmd打開黑窗口, 輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意, cmd的位置是在c:\windows\system32下, 如果需要管理員權限來運行的話, 你先要進到這個目錄裡面找到這個程序, 右鍵點擊它, 再在菜單當中找到以管理員運行此程序來執行, 有助於你解決一些運行時的問題。

安裝Electron

cnpm install -g electron

安裝Electron-forge

Electron-forge到底是個什麽東西呢? 類似於c++的MinGW, 或者像PHP的某些lib, 或者像是Composer, 讓程序員通過簡單的命令傻瓜式安裝/引入複雜的依賴庫。

cnpm install -g electron-forge

新建項目

假設項目要放到d:\env\electron目錄下，項目名爲notepad（字母全部小寫，多個單詞之間可以用“-”連接）。

打開cmd黑窗口，用cd命令切換到d:\env\electron。

在我的電腦目錄下按住Shift+滑鼠右鍵也可以打開cmd(power shell)窗口

執行下面的命令來生成名爲notepad的項目文档夾，同時安裝項目所需要的模塊、依賴項等。

electron-forge init notepad

cd切到notepad目錄下，

electron-forge start

或者

npm start

打開的界面會像chrome打開開發者工具一樣的效果。

修改窗口圖標

一般主窗體js文档都被命名爲main.js或者Index.js, 在文档裡找到類似如下代碼:

const createWindow = () => {
  // 創建瀏覽器窗口。
  mainWindow = new BrowserWindow({
    width: 1366,
    height: 768
  });

加一段icon路徑代碼, 改成如下:

const createWindow = () => {
  // 創建瀏覽器窗口。
  mainWindow = new BrowserWindow({
    width: 1366,
    height: 768,
    icon: __dirname + '/favicon.ico'
  });

編譯打包

鍵入以下命令進行編譯打包：

npm run make

如果直接運行這個命令會將文档打包到當前項目目錄下的out文档夾下。web源碼直接暴露在[app項目目錄]\out\notepad-win32-x64\resources\app\src目錄下。

修改package.json，在electronPackagerConfig部分加入"asar": true。

"electronPackagerConfig": {
    // ...
    "asar": true
}

源碼文档會被打包進src/app.asar當中。