使用JavaScript开发跨平台的桌面应用详解

任何可以使用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开发跨平台的桌面应用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript跨平台的开源框架NativeScript

    NativeScript是一款使用JavaScript语言来构建跨平台原生移动应用的开源框架,支持iOS.Android和Windows Phone.且NativeScript的使用没有过多繁杂的要求,只需使用自己已经掌握的JavaScript和CSS技能就能开发出真正具有原生用户体验的移动应用. 作为免费开源项目的NativeScript,它的源码已经托管至Github上,让开发者可以没有任何门槛约束的随意使用.除了无需学习新的编程语言,使用大家所熟识的JavaScript编码及CSS打造应用

  • 使用JavaScript开发跨平台的桌面应用详解

    任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood定律 Atwood's Law是Jeff Atwood在2007年提出的:"any application that can be written in JavaScript, will eventually be written in JavaScript.".据说,这只是当时开的一个玩笑.不过,这个玩笑似乎渐渐变成了现实.从各种华丽的网页框架,到功能强大的库,到了现在的机器学习,服务器开

  • JavaScript开发简单易懂的Svelte实现原理详解

    目录 Demo1 create_fragment SvelteComponent 可以改变状态的Demo Svelte问世很久了,一直想写一篇好懂的原理分析文章,拖了这么久终于写了. Demo1 首先来看编译时,考虑如下App组件代码: <h1>{count}</h1> <script> let count = 0; </script> 这段代码经由编译器编译后产生如下代码,包括三部分: create_fragment方法 count的声明语句 class

  • JavaScript浏览器对象之一Window对象详解

    JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象 表示浏览器中打开的窗口: document对象 表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象 包含了浏览器本身的信息: screen对象 包含了客户端屏幕及渲染能力的信息: history对象 包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo

  • JavaScript“尽快失败”的原则实例详解

    我第一次听说编码原则中有"尽快失败"这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀.但事实上,当代码在遇到错误的时候应该尽快的终止.为了检测各种状态,我们需要频繁的创建if语句与条件分支,而这些条件检测的结果不是成功就是失败(true&&false).之所以会有这么多的条件检测语句,是因为如果不在构建过程中植入这些监测点(checkpoint),那么浏览器内核会执行很多无用的代码,并占用许多宝贵的CPU性能和处理时间,拖慢网站加载速度. 根据那些判断结果为fal

  • JavaScript代码异常监控实现过程详解

    这篇文章主要介绍了JavaScript代码异常监控实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JavaScript异常一般有两方面:语法错误和运行时错误.两种错误的捕获和处理方式不同,从而影响具体的方案选型.通常来说,处理JS异常的方案有两种:try...catch捕获 和 window.onerror捕获.以下就两种方案分别分析各自的优劣. 虽然语法错误本应该在开发构建阶段使用测试工具避免,但难免会有马失前蹄部署到线上的时候.

  • Python入门开发教程  windows下搭建开发环境vscode的步骤详解

    目录 一.环境介绍 二. 搭建python开发环境 2.1 Python版本介绍 2.2 在windows下安装Python环境 2.3 windows下安装VSCode代码编辑器 一.环境介绍 操作系统: win10 64位 python版本: 3.8 IDE: 采用vscode 用到的相关安装包CSDN打包下载地址: http://xiazai.jb51.net/202107/yuanma/Pytho_jb51.rar 二. 搭建python开发环境 2.1 Python版本介绍 因为Pyt

  • JavaScript中事件委托的示例详解

    目录 事件流 事件委托 结尾 大家好,我是前端西瓜哥.今天我们来认识一下事件委托. 所谓事件委托,就是将原本应该在当前元素绑定的事件,放到它的祖先元素上,让祖先元素来委托处理. 事件流 事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流由两阶段组成: 捕获事件 冒泡事件 我们通常用 addEventListener 给元素添加事件: document.querySelector('#card')addEventListener( 'click', function (ev

  • JavaScript设计模式之职责链模式详解

    目录 职责链模式 1. 现实中的职责链模式 2. 实际开发中的职责链模式 3. 用职责链模式重构代码 4. 灵活可拆分的职责链节点 5. 异步的职责链 6. 职责链模式的优缺点 7. 用 AOP 实现职责链 8. 小结 职责链模式 职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇

  • Python使用Dash开发网页应用的方法详解

    目录 Python Dash开发Web应用的控件基础 一.Dash的布局Layout 1.Dash的HTML组件 2.Dash的Core组件 二.Dash Core中的Checklist Python Dash开发Web应用的控件基础 本文主要是通过Dash的Checklist组件,简单介绍使用Dash开发的Web应用 展示效果如下: python dash简单基础 Dash应用程序由两部分组成: 第一部分是应用程序的布局(Layout),它描述了应用程序的外观. 第二部分描述了应用程序的交互性

  • JavaScript面试Module Federation实现原理详解

    目录 基本概念 1.什么是 Module Federation? 2.Module Federation核心概念 3.使用案例 4.插件配置 工作原理 1.使用MF后在构建上有什么不同? 2.如何加载远程模块? 3.如何共享依赖? 应用场景 1.代码共享 2.公共依赖 总结 基本概念 1.什么是 Module Federation? 首先看一下官方给出的解释: Multiple separate builds should form a single application. These sep

随机推荐