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

微微晨曦1994


其他人的回答我仔细看了一下,说得都挺好,借助一些第三方软件使用html或html5来开发桌面软件,开发app也是可以做到的。我再补充一点,他们的回答里都漏了微软自带的hta文件,hta就是用html和js、vbs来开发桌面软件的。

百度百科里是这样讲的,HTA是HTML Application的缩写(HTML应用程序),是软件开发的新概念,直接将HTML保存成HTA的格式,就是一个独立的应用软件,与VB、C++等程序语言所设计的软件界面没什么差别。

其实微软在xp时代,系统里运用了大量的hta文件,其实换了个后缀格式cpl名,你不自查而已。最显著的应用都是在控制面板里。我们在xp命令运行下nusrmgr.cpl,会出现如图所示的界面。

我们用Restorator分析一下nusrmgr.cpl文件,除了cpl自己的固定格式,里边全是htm文件。这也是为什么微软一直不肯删掉ie浏览器的一个原因之一。如果删掉了ie浏览器,你让xp用html写的这些控制面板系统应用如何自处?

当然,随时微软系统的升级换代,cpl文件也发展得与hta不同了。不过用hta文件的确是能写出大量的有效的桌面软件。

我本人也用hta写过一个下载者生成器,当年效果还是非常好的,能绕过所有的主防。

如果有需要的,我可以在评论里给出下载地址。


海阳顶端


你说的应该是将HTML程序打包为桌面程序吧,这里介绍一种简单的方式,利用node.js的electron打包,下面我简单介绍一下实现过程,主要内容如下:

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

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

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

2.接着就是安装electron和electron-packager这2个包,打包程序的时候要使用到这2个包,至于安装的话,直接在cmd窗口中输入命令“npm install electron electron-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 --out HelloApp --arch=x64 --electron-version=3.0.10 --overwrite”就会自动打包,这里主要需要指明打包的目录、应用名称、输出目录、应用位数、版本号等,详细参数可以到网上搜一下,如下:

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

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


小小猿爱嘻嘻


纯 HTML 确实是写不出 桌面程序的,但是可以通过第三方工具对 HTML 文件进行打包操作,打包完后就是一个可以运行在桌面的应用程序了。


ElectronJs


官网:

https://electronjs.org/


如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。


Electron 让你为你的公司或想法创建桌面端应用变得很简单。最初为 GitHub 的 Atom 编辑器开发,Electron 已被像微软、 Facebook、 Slack 和 Docker 这样的公司用于创建应用程序了。


NW.js


官网:

https://nwjs.io/


NW.js(以前称为node webkit)允许您直接从dom调用所有node.js模块,并支持使用所有Web技术编写应用程序的新方法。


NW.js 是一个使用 Web 技术创建本地应用的框架,如 HTML、JavaScript 和 CSS。简单地说,当你在使用普通的流程开发一个 Web 应用时,开发完成后,运行一个生成器,将所有东西编译成一个本地应用,它会像一个浏览器一样运行你的 Web 应用。这种应用就被称为“Hybrid 应用(一种混合本地编程和 Web 编程技术的应用)”。


并且 NW.js 是国人开发的工具,比 Electron 还要早发布,不过目前没有 Electron 流行,如果是写基础小应用,二者没有什么大区别,可以随意尝试,这两个都是很不错的框架。


以上就是两种方便快捷的解决方案,希望能够帮到你。


关注我

如果我的回答,帮到了你,欢迎点赞转发哟,让跟多的人学到新知识。


如果你有什么疑问,也可以在下方评论哟,我会尽快为你解答。



开发指南


恭喜你遇到行家了,本人IT出生。

HBuilder

这是国内最好的H5开发软件,如果你是开发手机桌面、电脑桌面完全ok,它本身就是建立在Html5的基础之上,而且全中文开发环境让国人很是满意。

WebStorm

这是目前最流行的Html开发软件,也是涵盖了很多东西,js、jquery、ajax等等,而且拥有智能提示,使得开发速度非常快。


DW

这个的话都是初学者用的了,我个人不是很喜欢因为开发速度慢,不过功能还是全,建议初学者用,这样才能学到东西。

说完前端那么还有后台呢?

Eclipse

建议使用java,因为java上手简单而且很成熟,这个东西你应该知道的。

以上软件不管你是开发手机桌面还是PC桌面都是没问题的。


科技答题官


单纯的html是写不出Windows或者Mac的桌面应用程序的,甚至单纯的网页都有一大堆问题,所以楼主提出问题是有问题的!但是作为开发者,大致理解楼主想问的问题,如何使用web开发语言实现桌面应用,在node.js还没出现之前是很难实现的,但是在node.js出现后,这也不是什么难题,现在大致实现桌面应用是套个浏览器内核然后打包成一个桌面系统可执行的程序,来实现web应用移植到桌面应用,目前流行的技术是eletron,著名的用这种技术实现的桌面程序就是vs code,一款非常好用的代码编辑器,扩展能力强大


柏舟63677578


曾经我把自己的网站源码,打成了一个app..

但是,有啥用呢。


CharpeanChu


html写桌面软件是多余的,有这个时间不如多研究点其他技术


葛大磊


直接改个后缀名,就可以直接运行了


IT启蒙


请了解下HTA文件。xp时代就有了


牵妞花


本人小前端,最近闲翻阅到了一些比较厉害的东西,就看到了一个叫electron的api官网,上面是这样介绍的:

关于Electron:

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来。这两个项目在2014春季开源。

目前它已成为开源开发者、初创企业和老牌公司常用的开发工具。

然后,我就对着一篇大神的分享神奇的做出了一个简单的应用,打包后可以直接运行

如图:

双击运行即可。

我简单的将整个的过程写了一份小文档可以分享给你尝试一下:


什么是Electron?
Electron是一个基于Chrominum和NodeJS的跨平台桌面应用框架。
在这个框架中很容易基于html、css和JavaScript技术的跨平台应用,构建出来的应用会很好的兼容Mac、windows和Linux操作系统。
它还有一些其他的特性:
  • 自动更新--应用支持自动更新
  • 原生菜单和通知--可以创建原生应用菜单和上下文菜单
  • 应用奔溃报告--可以将奔溃提交到远程服务器
  • 调试和分析--Chrominum的内容模块可以发生性能瓶颈和缓慢的操作,你可以在应用中使用自己喜欢的chrome开发者工具
  • Windows installer--可以快速便捷地创建安装包
动手之前需要安装NodeJS,你还应该申请一个Github账户来保存和更新应用。
Ready Go
首先在git工具中将 electron/electron-quick-start库克隆下来
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install&&npm start
完成上面的步骤之后,你会看到一个像浏览器窗口的应用打开。它确实是一个浏览器窗口!

这个窗口显示的样子在不同的操作系统上会有所不同。我选择使用 Windows 的经典样式。非常赞!

新应用的目录和文件结构
基本的文件结构
electron-quick-start
-index.html是一个html5页面,它具有一个很重要的作用:提供画布
-main.js创建窗口并处理系统事件
-package.json是应用的启动脚本,它包含了应用信息,在主进程中运行
-renderer.js处理应用的渲染进程
打包应用
electron-packager
electron-packager可以将项目打包成各平台可直接运行的程序,而不是安装包
先使用npm安装:npm install electron-packager -S
运行打包命令:
electron-packager . app --win --out tjj --arch=x64 --version 1.0 --overwrite --ignore=node_modules
打包会把项目文件包括 node_modules 也一起打包进去,当然可以通过 –ignore=node_modules 来忽略文件,但是如果项目中有用到第三方库,忽略的话则找不到文件报错了。
蓝色部分可自行修改:
electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_modules
打包完成后的文件包名:app-win32-x64


分享到:


相關文章: