任何可以使用JavaScript来编写的应用，最终会由JavaScript编写。--Atwood定律

Atwood's Law是Jeff Atwood在2007年提出的：“any application that can be written in JavaScript, will eventually be written in JavaScript.”。据说，这只是当时开的一个玩笑。不过，这个玩笑似乎渐渐变成了现实。从各种华丽的网页框架，到功能强大的库，到了现在的机器学习，服务器开发，都有JavaScript的身影。从JavaScript也衍生出了一些语言，例如TypeScript。而使用JavaScript制作游戏也变得方便起来，可以使用CocosCreator。Html5的横空出世，也将之前JavaScript在网页的辅助地位提升到了主力地位，nodejs的出现更是让其实现了所谓的“全栈”开发，现在JavaScript甚至可以做手机应用。但是，在移动端、浏览器、服务器端有需求，在桌面应用上也会有需求。能不能使用JavaScript来开发可以跨平台的应用程序呢？答案是：可以。使用Electron即可方便的使用JavaScript进行桌面应用开发。可以看到，很多大名鼎鼎的程序都是由它直接或间接开发而成，例如Atom，VSCode等。

需要注意的是，目前使用Electron开发桌面应用程序有一些限制条件。首先，我们无法调用复杂的系统API（或者说不能直接做到），这就导致我们无法开发更加复杂的企业级应用。其次，它的性能目前仍然不能与原生应用相提并论。我们可以认为，Electron就是一个套着浏览器外壳的包装盒，这个包装盒给我们读写文件的能力，我们开发好web应用程序，调试完成后使用它来进行封装，给我们的web应用程序加一个浏览器内核。这样，我们的js代码就可以脱离传统浏览器模式，独立运行了。然而它和传统的浏览器模式道理是一样的，所以有极高性能需求时，还是需要使用C++、Java等开发。但大多数的应用程序根本不需要那么高的性能要求，所以使用Electron开发是没有问题的。接下来，我们尝试着从零开始，一步一步的使用Electron来开发Windows桌面应用，当然Mac和Linux也适用此方法。

首先，我们进入Electron的官网：https://electron.atom.io/。进入后，发现全英文，不要紧，实际上大多数都可以不看。我们直接来到首页的这里：

如图所示，官方给出的安装方法是使用git和npm，但我们可以不使用git。然而，npm是必要的。npm是nodejs的包管理工具，新版本的nodejs已经集成了npm，安装nodejs后直接附带npm。然而，一些旧版本的nodejs，或者从一些非官方处下载的不可靠的nodejs，可能不带npm，所以我们在使用它之前必须先安装nodejs和npm。网上有很多教程，这里不再演示。需要注意的是，第三个命令npm install && npm start中，我们可以只输入npm install,因为后面附带的指令很可能导致控制台“死机”的情况，一直卡住且无法成功安装Electron。所以，我们只要进入我们指定的目录，然后执行以下命令即可（这些命令各个系统通用）：

如此一来，我们就安装好了Electron。文件夹中：

打开来看，文件的目录结构是这样的：

目录看似复杂，其实，我们甚至可以不管这些文件！main.js可以相当于我们的配置文件，里面有一些配置信息，默认情况下，我们的应用程序会直接打开这个目录下的index.html。我们可以通过修改main.js中的参数来更改入口文件。当然，package.json也有用，之后都会讲到。

首先，我们可以使用electron.exe直接运行应用。在我的目录中，electron.exe在E:\electron-quick-start\node_modules\electron\dist目录下。我们可以使用electron.exe <rootpath> 这种命令格式直接运行我们的应用，rootpath代表你要运行的项目目录。例如，我之前用three.js编写的应用，目录是：E:\app。

我们在控制台中输入指令：

效果：

确实是以桌面应用程序的形式运行了。但是，我们希望我们的应用程序直接打包成.exe，.app的形式，而不是让我们的用户手动输入命令启动应用程序。而看看官方文档，你就会发现，官方给出的打包方法还是有一些坑的，如果处理不好，就要中招。所以，我们使用更加方便的electron-packager。github链接在此：https://github.com/electron-userland/electron-packager。首先，我们还是按教程输入指令来安装它。同样，这个指令在Linux，Mac，Windows上通用。

安装方法和Electron一样，从git上下载下来，进行安装。需要注意的是，上图的两个指令我们执行其中一个就可以了。推荐执行第二个，因为第二个是全局安装，安装之后我们就可以在控制台直接执行electron-packager命令，大大方便了我们的效率。

安装好后，我们开始打包。首先，把我们的项目目录拷贝到我们之前安装的electron目录下：

由于我们的应用程序入口文件是app下的CG1.html，所以我们还需要打开main.js配置一下入口文件：

然后，打开package.json文件，配置一下参数。

这里只配置了name参数，因为name参数和我们打包之后生成的应用程序名称有关。接下来，通过控制台进入我们的electron目录（就是有main.js有package.json的那个目录），

在控制台执行如下命令：

不要漏看了还有个"."，这个指当前目录的意思。其实，如果全局安装了electron-packager，那我们呀可以把.换成任意的路径。由于这个命令可以自动的检测当前计算机的操作系统，还能检测出是32位还是64位，所以我们大可省略一些参数。但如果要生成可定制平台的软件，需要带上一些参数，详细的在其项目的github中都已给出。相信大家如果有这个需求，那搞定这些参数应该不在话下。静待一会儿，打包完毕。我们可以在文件夹下看到多了一个名为CG1-win32-x64的文件夹。打开之后，点击CG1.exe，即可打开应用程序，此程序已经可以作为发布版本提供给用户！

最后，推荐一下Electron的中文教程：https://www.w3cschool.cn/electronmanual/p9al1qkx.html

以上这篇使用JavaScript开发跨平台的桌面应用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# 跨平台桌面应用开发  # JavaScript跨平台的开源框架NativeScript  # 应用程序  # 我们可以  # 的是  # 可以使用  # 需要注意  # 就可以  # 给我们  # 第二个  # 给大家  # 目录下  # 包装盒  # 都有  # 会有  # 好了  # 看了  # 有个  # 出了  # 是有  # 让我们  # 你要 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： android nfc常用标签读取总结  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Laravel定时任务怎么设置_Laravel Crontab调度器配置  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  香港服务器租用每月最低只需15元？  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  Laravel Session怎么存储_Laravel Session驱动配置详解  如何在腾讯云服务器上快速搭建个人网站？  Laravel如何使用查询构建器？（Query Builder高级用法）  如何用wdcp快速搭建高效网站？  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Laravel怎么连接多个数据库_Laravel多数据库连接配置  JavaScript常见的五种数组去重的方式  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  如何在香港免费服务器上快速搭建网站？  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  常州企业网站制作公司,全国继续教育网怎么登录？  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  高端智能建站公司优选：品牌定制与SEO优化一站式服务  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  Laravel如何实现用户密码重置功能？（完整流程代码）  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  Laravel模型事件有哪些_Laravel Model Event生命周期详解  如何用已有域名快速搭建网站？  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  Laravel怎么清理缓存_Laravel optimize clear命令详解  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  SQL查询语句优化的实用方法总结  香港服务器网站卡顿？如何解决网络延迟与负载问题？  Android中AutoCompleteTextView自动提示  Win11怎么关闭透明效果_Windows11辅助功能视觉效果设置  Python文件操作最佳实践_稳定性说明【指导】  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  音响网站制作视频教程,隆霸音响官方网站？  魔毅自助建站系统：模板定制与SEO优化一键生成指南  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  java获取注册ip实例  Laravel如何实现数据导出到PDF_Laravel使用snappy生成网页快照PDF【方案】  Laravel怎么使用artisan命令缓存配置和视图  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel如何处理表单验证？（Requests代码示例）