介绍
这篇文章主要介绍html实现打包桌面应用的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
打包桌面应用有两款工具可以打包,一种是电子,另一种是西北。js,本篇幅采用的电子工具讲解。
<强>第一步:安装电子强>
cnpm安装电子- g(全局安装电子)
<强>第二步:安装electron-packager 强>
cnpm安装electron-packager - g(打包)
<强>第三步:安装electron-prebuilt[安装之后命令电子。就可以运行程序)强>
cnpm安装electron-prebuilt - g
安装此命令之后最好在项目下安装cnpm安装electron-prebuilt——save-dev]
<强>第四步:在npm init项目后的项目下的包。json的文件中的配置强>
配置命令的解释
电子。,执行命令当前工程目录下生成exe文件
HelloWorld生成exe文件名
——赢得生成在窗口系统中运行(也可以执行命令,所有代表所有的)
。/OutApp生成的HelloWorld。exe在OutApp文件夹下,而OutApp文件夹在当前项目工程的目录下生成
——版本对应electron-prebuilt的版本号
——忽视=node_modiles(可以改为执行当前exe文件的图=标——图标。/img/xxx。ico)
<强>第五步主要。js文件强>
//var的应用=要求(& # 39;应用# 39;);//控制应用生命周期的模块。//var BrowserWindow=要求(& # 39;browser-window& # 39;);//创建原生浏览器窗口的模块 const电子=要求(& # 39;电子# 39;); const应用=electron.app; const BrowserWindow=electron.BrowserWindow;//保持一个对于窗口对象的全局引用,不然,当JavaScript被GC,//窗口会被自动地关闭 var主窗口=零;//当所有窗口被关闭了,退出。 app.on (& # 39; window-all-closed& # 39;,函数(){//在OS X上,通常用户在明确地按下Cmd + Q之前//应用会保持活动状态 如果过程。平台!=& # 39;达尔文# 39;){ app.quit (); } });//当电子完成了初始化并且准备创建浏览器窗口的时候//这个方法就被调用 app.on(& # 39;准备# 39;,函数(){//创建浏览器窗口。 主窗口=new BrowserWindow({宽度:800,身高:600});//加载应用的index . html mainWindow.loadURL(& # 39;文件://& # 39;+ __dirname + & # 39;/index . html # 39;);//打开开发工具 mainWindow.openDevTools ();//当窗口被关闭,这个事件会被发出 mainWindow.on(& # 39;关闭# 39;,函数(){//取消引用窗口对象,如果你的应用支持多窗口的话,//通常会把多个窗口对象存放在一个数组里面,//但这次不是。 主窗口=零; }); });
<强>第六步执行命令强>
cnpm运行脚本包装机
那么接下来就看一下我工程的目录结构图与打包后的效果吧
以上是html实现打包桌面应用的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!