electron打包發佈

時間 2019-11-20

標籤 electron 打包發佈简体版

原文原文鏈接

一、全局安裝electron javascript

npm install electron -g

在cmd 直接輸入 electron 直接啓electronhtml

二、編寫第一個Electron應用java

在任何地方，創建一個app的目錄並新建3個文件：node

app/
├── package.json
├── main.js
└── index.html

package.jsongit

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager ./ --all --out ~/Desktop/app --version 1.4.0 --overwrite --icon=./src/img/weather.ico"
  }
}

main.jsgithub

const electron = require('electron');
// 控制應用生命週期的模塊
const {app} = electron;
// 建立本地瀏覽器窗口的模塊
const {BrowserWindow} = electron;

// 指向窗口對象的一個全局引用，若是沒有這個引用，那麼當該javascript對象被垃圾回收的
// 時候該窗口將會自動關閉
let win;

function createWindow() {
  // 建立一個新的瀏覽器窗口
  win = new BrowserWindow({width: 1920, height: 1080});

  // 而且裝載應用的index.html頁面
  win.loadURL(`file://${__dirname}/index.html`);

  // 打開開發工具頁面
  //win.webContents.openDevTools();

  // 當窗口關閉時調用的方法
  win.on('closed', () => {
    // 解除窗口對象的引用，一般而言若是應用支持多個窗口的話，你會在一個數組裏
    // 存放窗口對象，在窗口關閉的時候應當刪除相應的元素。
    win = null;
  });
}

// 當Electron完成初始化而且已經建立了瀏覽器窗口，則該方法將會被調用。
// 有些API只能在該事件發生後才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
}); */
// 當全部的窗口被關閉後退出應用
app.on('window-all-closed', () => {
  // 對於OS X系統，應用和相應的菜單欄會一直激活直到用戶經過Cmd + Q顯式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 對於OS X系統，當dock圖標被點擊後會從新建立一個app窗口，而且不會有其餘
  // 窗口打開
  if (win === null) {
    createWindow();
  }
});

// 在這個文件後面你能夠直接包含你應用特定的由主進程運行的代碼。
// 也能夠把這些代碼放在另外一個文件中而後在這裏導入。

　　index.html 就能夠隨意添加的代碼：web

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </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>

三、預覽應用，就是把app那個文件直接投放到打開的 electron裏面就能夠查看效果了。chrome

四、若是須要打包成asar 二級制的文件，npm

全局安裝：npm install -g asarjson

打包：

C:>asar pack 文件夾路徑 app.asar  //打包後只讀不可修改的

五、發佈成exe的問題。須要安裝electron-prebuilt npm install -g electron-prebuilt

六、在package寫了發佈的腳本，一直npm run-scritp package 打包就能夠，ico的路徑本身設置，也能夠定義設置那個版本的：

那樣就能夠了，今天第一次接觸，也遇到了第三方的庫不能接入的問題。在github上找到的問題彙總：https://github.com/electron/electron/blob/master/docs-translations/zh-CN/faq/electron-faq.md

還有electron . 就是自動開始了，不用你在拖到打開的exe中了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。