Electron打包H5網(wǎng)頁為桌面運行程序

elisa.yang 發(fā)布于2019-08-02 11:43 / 1366人閱讀

摘要：一安裝配置環(huán)境一種桌面應(yīng)用程序運行時，把和合并到一個多帶帶的運行時里面，很適合開發(fā)桌面形式的應(yīng)用程序，通過它提供了通常瀏覽器所不能提供的能力。

一、安裝配置環(huán)境

Electron（一種桌面應(yīng)用程序運行時），Electron 把 Chromium 和 Node 合并到一個多帶帶的運行時里面，很適合開發(fā)桌面 web 形式的應(yīng)用程序，通過Node它提供了通常瀏覽器所不能提供的能力。

首先需要在電腦進行安裝配置Node環(huán)境，下載Nodejs，安裝的過程像安裝QQ一樣簡單

通過npm全局安裝electron

npm install electron -g

這樣你就可以在電腦的任意位置進行你想要的操作了

進入你要打包的H5網(wǎng)頁的根目錄

二、操作項目

進入項目目錄需要先在根目錄進行創(chuàng)建兩個文件，分別為package.json、main.js，這兩個文件與你項目的index.html在同一個文件內(nèi)

package.json內(nèi)的文件內(nèi)容

{
  "name": "app-name",
  "version": "0.1.0",
  "main": "main.js"
}

main.js內(nèi)的內(nèi)容

const { app, BrowserWindow } = require("electron")
const path = require("path")
const url = require("url")

// Keep a global reference of the window object, if you don"t, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow() {
    // Create the browser window.
    win = new BrowserWindow({ width: 800, height: 600 })

    // and load the index.html of the app.
    win.loadURL(
        url.format({
            pathname: path.join(__dirname, "index.html"),
            protocol: "file:",
            slashes: true,
        }),
    )

    // Open the DevTools.
    // win.webContents.openDevTools()

    // Emitted when the window is closed.
    win.on("closed", () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null
    })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow)

// Quit when all windows are closed.
app.on("window-all-closed", () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== "darwin") {
        app.quit()
    }
})

app.on("activate", () => {
    // On macOS it"s common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
        createWindow()
    }
})

// In this file you can include the rest of your app"s specific main process
// code. You can also put them in separate files and require them here.

下載需要的打包插件工具 electron-packag

npm install electron-package -g

最后一步進行打包操作，這塊比較代碼比較長
electron-package . (生成exe文件的名字) --win --out (打包完文件夾的名字) -arch=×64 --electronVersion (electron的版本號) --overwrite --ignore=node_modules即可完成打包
例如：我的項目需要進行打包的操作為：

electron-packager . miaotong --win --out presenterTool --arch=x64 --electronVersion 3.0.4 --overwrite --ignore=node_modules

注意：--electronVersion的版本號必須和你第一步安裝的electron版本一致，如果不確定版本可以輸入命令進行查看
cmd----->electron -v 終端會輸出你當(dāng)前全局安裝electron的版本號，當(dāng)然這個操作也是你驗證electron有沒有安裝成功的方法

至此就看自己的操作和運氣了，上面的長串指令執(zhí)行完成之后，在你的項目下會生成一個presenterTool文件夾，一級一級點擊進去，會看到一個exe文件，點擊試試吧

三、存在的問題

目前打包出來的exe文件比較大，這部分還需要一個精簡操作，等我找到靠譜的解決辦法，再更新一下這個文章吧！

四、上圖

項目展示：