摘要：一安装配置环境一种桌面应用程序运行时，把和合并到一个多带带的运行时里面，很适合开发桌面形式的应用程序，通过它提供了通常浏览器所不能提供的能力。
一、安装配置环境
Electron（一种桌面应用程序运行时），Electron 把 Chromium 和 Node 合并到一个多带带的运行时里面，很适合开发桌面 web 形式的应用程序，通过Node它提供了通常浏览器所不能提供的能力。
首先需要在电脑进行安装配置Node环境，下载Nodejs，安装的过程像安装QQ一样简单
通过npm全局安装electron
npm install electron -g
这样你就可以在电脑的任意位置进行你想要的操作了
进入你要打包的H5网页的根目录
二、操作项目进入项目目录需要先在根目录进行创建两个文件，分别为package.json、main.js，这两个文件与你项目的index.html在同一个文件内
package.json内的文件内容
{
"name": "app-name",
"version": "0.1.0",
"main": "main.js"
}
main.js内的内容
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 终端会输出你当前全局安装electron的版本号，当然这个操作也是你验证electron有没有安装成功的方法
至此就看自己的操作和运气了，上面的长串指令执行完成之后，在你的项目下会生成一个presenterTool文件夹，一级一级点击进去，会看到一个exe文件，点击试试吧
三、存在的问题目前打包出来的exe文件比较大，这部分还需要一个精简操作，等我找到靠谱的解决办法，再更新一下这个文章吧！
四、上图项目展示：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53074.html
摘要：在菜单中，我想点击子菜单打开一个网站，那么就可以用到方法，则会在默认浏览器中打开打包应用其实将程序打包成桌面应用才是比较麻烦的事。 前言 Electron 是一个搭建跨平台桌面应用的框架，仅仅使用 JavaScript、HTML 以及 CSS，即可快速而容易地搭建一个原生应用。这对于想要涉及其他领域的开发者来说是一个非常大的福利。 项目介绍 仓库地址：lin-xin/calculato...
摘要：在开发项目时，可以先用网页的形式开发项目，等到网页项目部分差不多完成后，再注入中，开发网页项目部分和窗体部分的交互在中使用后，将不会打包有关的代码 electron是一两年前挺火的一个框架本质上是一个浏览器，但是集成了很多windows系统的功能，让前端开发也可以直接操作windows的窗体，做成一个实打实的桌面软件 团队主要的技术栈是react，所以考虑用react开发，方便维护。 ...
摘要：话不多说，进入正题一安装为了方便你以后的使用，建议全局安装。怎么安装就不废话了，不会的去官网，安装好之后也安装一个专用的打包工具，以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。 也许你不甘心只写网页，被人叫做他会写网页，也许你有项目需求，必须写桌面应用，然而你只会前端，没关系。网上的教程很多，但是很少有能说的浅显易懂的，我尽力将electron打包应用说的清晰明了，希...
摘要：话不多说，进入正题一安装为了方便你以后的使用，建议全局安装。怎么安装就不废话了，不会的去官网，安装好之后也安装一个专用的打包工具，以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。 也许你不甘心只写网页，被人叫做他会写网页，也许你有项目需求，必须写桌面应用，然而你只会前端，没关系。网上的教程很多，但是很少有能说的浅显易懂的，我尽力将electron打包应用说的清晰明了，希...
摘要：当一个实例被销毁后，相应的渲染进程也会被终止。之所以命名为，主要是为了与主进程这个概念对应。部分在事件触发后才能使用。当全部窗口关闭时退出。主进程接收到消息并处理之后，会返回处理结果。 简介 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰...
阅读 3448·2021-09-22 15:50
阅读 3203·2019-08-30 15:54
阅读 2685·2019-08-30 14:12
阅读 3024·2019-08-30 11:22
阅读 2046·2019-08-29 11:16
阅读 3542·2019-08-26 13:43
阅读 1147·2019-08-23 18:33
阅读 887·2019-08-23 18:32
