当前位置: 首页 > Web前端 > HTML

Electron将H5网页打包为桌面运行程序

时间:2023-04-02 15:22:24 HTML

1、安装配置环境Electron(桌面应用运行时),Electron将Chromium和Node结合成一个单一的运行时,非常适合开发桌面Web应用。通过Node,它提供了提供的能力。首先需要在电脑上安装并配置好Node环境,下载Nodejs,安装过程就像安装QQ一样简单。通过npmnpminstallelectron-g全局安装electron,这样你就可以在电脑的任何地方进行你想要的操作。进入你想要的包H5网页根目录2.运行项目进入项目目录首先需要在根目录下创建两个文件,分别是package.json和main.js。这两个文件和你项目的index.html在同一个文件中package.json中的文件内容{"name":"app-name","version":"0.1.0","main":"main.js"}Contentinmain.jsconst{app,BrowserWindow}=require('electron')constpath=require('path')consturl=require('url')//保持窗口对象的全局引用,如果你不要,当JavaScript对象被垃圾回收时,窗口将//自动关闭。letwinfunctioncreateWindow(){//创建浏览器窗口。win=newBrowserWindow({width:800,height:600})//并加载app.win的index.html。loadURL(url.format({路径名:path.join(__dirname,'index.html'),协议:'文件:',slashes:true,}),)//打开DevTools。//win.webContents.openDevTools()//当窗口关闭时发出。win.on('closed',()=>{//解除对窗口对象的引用,如果您的应用程序支持多窗口,通常您会将窗口存储在一个数组中,这是您应该删除相应元素的时候.win=null})}//当Electron完成//初始化并准备好创建浏览器窗口时将调用此方法。//某些API只能在此事件发生后使用。app.on('ready',createWindow)//当所有窗口都关闭时退出明确地使用Cmd+Qif(process.platform!=='darwin'){app.quit()}})app.on('activate',()=>{//在macOS上重新创建一个t时应用程序中的窗口他//停靠图标被点击并且没有其他窗口打开。if(win===null){createWindow()}})//在此文件中,您可以包含应用的其余特定主进程//代码。您也可以将它们放在单独的文件中并在此处要求它们。下载需要的打包插件工具electron-packagnpminstallelectron-package-g进行最后一步的打包操作。这个比较代码是比较长的electron-package。(生成的exe文件名)--win--out(打包文件夹名)-arch=×64--electronVersion(electron版本号)--overwrite--ignore=node_modules完成打包例如:我的项目需要打包操作是:electron-packager.miaotong--win--outpresenterTool--arch=x64--electronVersion3.0.4--overwrite--ignore=node_modules注意:--的版本号electronVersion一定要和你第一步安装的electron的版本一致。如果不确定版本,可以输入命令查看cmd----->electron-v终端会输出你当前全局安装的electron的版本号。当然这个操作也是你验证electron是否安装成功的方法。至此就看你自己的操作和运气了。上面一长串指令执行完后,会在你的项目下生成一个presenterTool文件夹。逐级点击它,你会看到一个exe文件。点击试用。3.存在目前打包的exe文件比较大,这部分还是需要精简操作。当我找到可靠的解决方案时,我会更新这篇文章!4、上图项目展示: