有什么方法用html开发桌面软件?

怀特的旅行

30天以前 15浏览
有什么方法用html开发桌面软件?

利用node.js的electron打包,下面我简单介绍一下实现过程,主要内容如下:

这里为了更好的说明问题,我新建了一个index.html文件,主要内容如下,就是一个简单的按钮提示功能:

浏览器打开后的效果如下:

1.首先,安装nodejs,这个直接到官网上下载就行,选择适合自己平台的版本即可,安装完成后,需要将node、npm这些常见命令(即node安装目录)添加到环境变量中,方便后面使用,如下:

2.接着就是安装electron和electron-packager这2个包,打包程序的时候要使用到这2个包,至于安装的话,直接在cmd窗口中输入命令“npminstallelectronelectron-packager”就行,如下:

3.最后就是打包HTML为桌面程序了,主要步骤如下:

这里为了方便,我新建了一个package目录,把刚才的index.html移入到这个目录下,同时下面新建一个package.json文件和main.js一个文件,如下:

其中package.json用于指明打包的基本信息,main.js用于配置打包的详细信息,其基本内容如下:

package.json文件:name为应用名称,version为版本号,main为打包配置文件。

main.js文件:这里用于配置打包的详细信息,可以自行设置,网上资料很多,可以搜一下,我这里简单配置了一下:

接着就是运行打包命令了,cmd切换到刚才的package目录,然后运行命令“electron-packager.Hello--win--outHelloApp--arch=x64--electron-version=3.0.10--overwrite”就会自动打包,这里主要需要指明打包的目录、应用名称、输出目录、应用位数、版本号等,详细参数可以到网上搜一下,如下:

打包成功后,就能在输出目录HelloApp下的Hello-win32-x64目录中找到刚才打包好的Hello.exe应用程序,双击就能打开,如下:

至此,我们就完成了将HTML打包为桌面应用程序,其实就是用HTML开发桌面程序。总的来说,整个过程很简单,就是配置有些麻烦,只要你熟悉一下相关过程和参数,多练习几遍,很快就能掌握的,当然,你也可以利用其它方式来打包HTML程序,像nw.js,cef等,都可以,网上也有相关教程和资料,感兴趣的话,可以搜一下,希望以上分享的内容能对你有所帮助吧。

本文仅代表作者观点,版权归属原创作者,如需转载请在文中标注来源及作则名字。

免责声明:本文系转载编辑文章,仅做分享只用,如有疑问请联系邮箱:110@zbj.com

html
大家都在看
如何用HTML5向网页中插入音频?

如何用HTML5向网页中插入音频?

html
4浏览
HTML网页中如何引入地铁图?

HTML网页中如何引入地铁图?

html
49浏览
怎么将一个网站修改成html5标准的网站

怎么将一个网站修改成html5标准的网站

html
7浏览
dreamweaver所用的语言就是html吗?

dreamweaver所用的语言就是html吗?

html
47浏览
html网页制作入门:怎么制作一个网页?

html网页制作入门:怎么制作一个网页?

html
20浏览
HBuilder如何创建html文件并运行?

HBuilder如何创建html文件并运行?

html
3浏览
html网页如何传递接收地址参数?

html网页如何传递接收地址参数?

html
18浏览
如何修改wordpress网站中的html代码

如何修改wordpress网站中的html代码

html
15浏览
HTML网页编程,有哪些不错的软件值得一用?

HTML网页编程,有哪些不错的软件值得一用?

html
23浏览
有哪些好用的HTML5绘图工具?

有哪些好用的HTML5绘图工具?

html
26浏览
怎么设置html文字背景颜色?

怎么设置html文字背景颜色?

html
21浏览
HTML是门语言吗?是用来做网页的吗?

HTML是门语言吗?是用来做网页的吗?

html
16浏览
HTML网页中怎么写插入图片的代码?

HTML网页中怎么写插入图片的代码?

html
18浏览
HTML5与SEO有必然的联系吗

HTML5与SEO有必然的联系吗

html
11浏览
html如何实现点击按钮跳转页面?

html如何实现点击按钮跳转页面?

html
35浏览
如何将一个HTML页面嵌套在另一个页面中

如何将一个HTML页面嵌套在另一个页面中

html
26浏览
有什么方法用html开发桌面软件?

有什么方法用html开发桌面软件?

html
15浏览
html设置背景颜色,背景图片,插入图片?

html设置背景颜色,背景图片,插入图片?

html
14浏览
本地的html文件如何生成网页文件?

本地的html文件如何生成网页文件?

html
22浏览
HTML网页怎样实现鼠标经过文字变色?

HTML网页怎样实现鼠标经过文字变色?

html
10浏览
点赞
收藏
分享