成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

elisa.yang / 1456人閱讀

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

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

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

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

通過npm全局安裝electron

npm install electron -g

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

進(jìn)入你要打包的H5網(wǎng)頁(yè)的根目錄

二、操作項(xiàng)目

進(jìn)入項(xiàng)目目錄需要先在根目錄進(jìn)行創(chuàng)建兩個(gè)文件，分別為package.json、main.js，這兩個(gè)文件與你項(xiàng)目的index.html在同一個(gè)文件內(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

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

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

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

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

三、存在的問題

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

四、上圖

項(xiàng)目展示：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53074.html

相關(guān)文章

  • Electron 實(shí)戰(zhàn)桌面計(jì)算器應(yīng)用

    摘要：在菜單中，我想點(diǎn)擊子菜單打開一個(gè)網(wǎng)站，那么就可以用到方法，則會(huì)在默認(rèn)瀏覽器中打開打包應(yīng)用其實(shí)將程序打包成桌面應(yīng)用才是比較麻煩的事。 前言 Electron 是一個(gè)搭建跨平臺(tái)桌面應(yīng)用的框架，僅僅使用 JavaScript、HTML 以及 CSS，即可快速而容易地搭建一個(gè)原生應(yīng)用。這對(duì)于想要涉及其他領(lǐng)域的開發(fā)者來(lái)說(shuō)是一個(gè)非常大的福利。 項(xiàng)目介紹 倉(cāng)庫(kù)地址：lin-xin/calculato...

    GeekQiaQia 評(píng)論0 收藏0

  • 使用webpack + electron + reactJs開發(fā)windows桌面應(yīng)用

    摘要：在開發(fā)項(xiàng)目時(shí)，可以先用網(wǎng)頁(yè)的形式開發(fā)項(xiàng)目，等到網(wǎng)頁(yè)項(xiàng)目部分差不多完成后，再注入中，開發(fā)網(wǎng)頁(yè)項(xiàng)目部分和窗體部分的交互在中使用后，將不會(huì)打包有關(guān)的代碼 electron是一兩年前挺火的一個(gè)框架本質(zhì)上是一個(gè)瀏覽器，但是集成了很多windows系統(tǒng)的功能，讓前端開發(fā)也可以直接操作windows的窗體，做成一個(gè)實(shí)打?qū)嵉淖烂孳浖?團(tuán)隊(duì)主要的技術(shù)棧是react，所以考慮用react開發(fā)，方便維護(hù)。 ...

    khlbat 評(píng)論0 收藏0

  • electron原來(lái)這么簡(jiǎn)單----打包你的react、VUE桌面應(yīng)用程序

    摘要：話不多說(shuō)，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。 也許你不甘心只寫網(wǎng)頁(yè)，被人叫做他會(huì)寫網(wǎng)頁(yè)，也許你有項(xiàng)目需求，必須寫桌面應(yīng)用，然而你只會(huì)前端，沒關(guān)系。網(wǎng)上的教程很多，但是很少有能說(shuō)的淺顯易懂的，我盡力將electron打包應(yīng)用說(shuō)的清晰明了，希...

    shevy 評(píng)論0 收藏0

  • electron原來(lái)這么簡(jiǎn)單----打包你的react、VUE桌面應(yīng)用程序

    摘要：話不多說(shuō)，進(jìn)入正題一安裝為了方便你以后的使用，建議全局安裝。怎么安裝就不廢話了，不會(huì)的去官網(wǎng)，安裝好之后也安裝一個(gè)專用的打包工具，以方便我們后面打包的時(shí)候使用。有些只能在該事件發(fā)生后才能被使用。 也許你不甘心只寫網(wǎng)頁(yè)，被人叫做他會(huì)寫網(wǎng)頁(yè)，也許你有項(xiàng)目需求，必須寫桌面應(yīng)用，然而你只會(huì)前端，沒關(guān)系。網(wǎng)上的教程很多，但是很少有能說(shuō)的淺顯易懂的，我盡力將electron打包應(yīng)用說(shuō)的清晰明了，希...

    suemi 評(píng)論0 收藏0

  • Electron 快速入門

    摘要：當(dāng)一個(gè)實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會(huì)被終止。之所以命名為，主要是為了與主進(jìn)程這個(gè)概念對(duì)應(yīng)。部分在事件觸發(fā)后才能使用。當(dāng)全部窗口關(guān)閉時(shí)退出。主進(jìn)程接收到消息并處理之后，會(huì)返回處理結(jié)果。 簡(jiǎn)介 Electron 是一個(gè)可以使用 Web 技術(shù)如 JavaScript、HTML 和 CSS 來(lái)創(chuàng)建跨平臺(tái)原生桌面應(yīng)用的框架。借助 Electron，我們可以使用純 JavaScript 來(lái)調(diào)用豐...

    Drummor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<