1分钟让你的JS代码变成一个桌面应用端程序。

876 阅读3分钟

基于 Electron 1分钟让你的JS代码变成一个桌面应用端程序。

Electron是什么?

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

详情请戳:www.electronjs.org/zh/docs/lat…

1.去我的 git 克隆这份代码。

地址:gitee.com/shao-gen/el…

2.npm i 下载依赖

3.简单介绍一下比较重要的文件

1.jpg

3.1:code 就是我们正常写js代码的文件夹目录,你所有的js代码都在里面写

要说一下 icon.png,这个就是你的桌面应用端左上角的图片,类似网站的favicon.ico。不过他的要求比较奇葩,需要png格式,并且分辨率大一点。我这里用的992X992。

2.jpg

3.jpg

3.2:.gitignore,git忽略跟踪的,不用多说。

3.3:main.js,简单的声明js和Electron之间的关系转化。不用太在意,拿过来直接用即可

3.4:package-lock.json,各种npm包的信息。不用太在意,拿过来直接用即可

3.5:package.json,一些调试命令的设置。不用太在意,拿过来直接用即可

3.6:preload.js,一些兼容浏览器,node,Electron,之间的转化。不用太在意,拿过来直接用即可

以上:出现了很多不用太在意,拿过来直接用即可。并不是敷衍大家,因为这些信息有关于 Electron 的各种配置等.....。

我们只要能达到最终的效果:1分钟让你的JS代码变成一个桌面应用端程序。不用太关心各种配置信息。

打个比方:你的手机能打电话,你会使用手机拨号和接听就可以了,不用太关心手机为什么能接打电话,一个道理。

4.本地调试,本人用的不多

一般我的用法:自己写Vue的项目,或者react的项目,web端调试和开发。然后测试之后,把npm run build 之后生成的 dist 或者 build 里面的代码之间拖到 code 目录下。然后在此项目下运行 npm run build。等待打包成功之后(大概1分钟),就可以了。

命令行执行 npm run serve

或者打开 package.json

4.jpg

本地调试成功之后的效果:

5.jpg

这里的桌面应用端的名字就是你的index.html的title的文字,可以自己随便修改:

6.jpg

4.打包

本人使用经验:先正常的开发web端,使用Vue也好React也好,JQ也好。随便。

经过测试之后,把web项目经过打包(压缩)的代码,拖入 code 目录。

然后 命令行 运行 npm run build

或者打开 package.json ,点击调试 选择 build(和上面本地调试一样)

然后等待不到1分钟,会生成一个 builder 文件。

好了,我们需要的一个桌面端的程序就已经生成成功了。

7.jpg

进入 win-unpacked 双击打开 code.exe,完美运行。

8.jpg

9.jpg

妈妈再也不用担心我不会写桌面应用端程序啦~