使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序——Electron

ゝ一世哀愁。 2022-12-02 01:28 281阅读 0赞

# Electron开发桌面应用 #

使用Electron可以开发js版的桌面应用，Electron的官网：[http://www.electronjs.org/][http_www.electronjs.org]

来到官网我们可以看到很多信息，但是作为前端开发的我，现在才知道，一直用的vscode编辑器竟然就是用js写的！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

使用vscode的都知道，功能想当强大，那我们我们用js、css、html等前端技术就可以开发自己的强大软件。

# 环境配置： #

node、electron包

下载electron包的时候，国外的源非常慢，最好还是用淘宝镜像吧

//查看node安装是否成功
    $ node -v
    v10.16.0
    
    //使用淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    //全局安装electron
    cnpm install --g electron
    
    //查看安装是否成功
    $ electron -v
    v10.1.0

# 开发一个简单的应用 #

在官网的文档介绍中，有一个demo，大家可以下载代码，安装对应的依赖，然后运行。地址：[http://www.electronjs.org/docs/tutorial/first-app\#electron-development-in-a-nutshell][http_www.electronjs.org_docs_tutorial_first-app_electron-development-in-a-nutshell]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

**注意：npm install安装依赖慢的话，还是用cnpm install吧**

执行命令npm start，运行程序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2][]

生成桌面应用

执行命令：全局安装electron的打包工具

GitHub：[https://github.com/electron/electron-packager\#installation][https_github.com_electron_electron-packager_installation]

npm install electron-packager -g

在package.json中配置打包命令：

以下报错：需要指定electron的版本

--version does not take an argument. Perhaps you meant --app-version or --electron-version?
    
    Electron Packager 15.1.0
    Node v12.18.3
    Host Operating system: win32 10.0.18362 (x64)

以下报错，升级你的node：因为在你当前版本的node中，不支持这个api

(node:10252) ExperimentalWarning: The fs.promises API is experimental

windows升级node的方式，去官网重新下载node，然后安装之前版本的node路径，新的node文件会替换旧node文件，然后

node -v测试是否安装成功！

![20200829161244869.png][]

![20200829161222173.png][]

![20200829161129417.png][]

[http_www.electronjs.org]: http://www.electronjs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20221123/b74f013277a04daea5c0556b1170802e.png
[http_www.electronjs.org_docs_tutorial_first-app_electron-development-in-a-nutshell]: http://www.electronjs.org/docs/tutorial/first-app#electron-development-in-a-nutshell
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20221123/5d39f63721cc4b489273422223e57bef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20221123/a2983ea5e3cd41fab9394c84d5f69abd.png
[https_github.com_electron_electron-packager_installation]: https://github.com/electron/electron-packager#installation
[20200829161244869.png]: /images/20221123/e16d43645d5d4a038487d0c859c1f761.png
[20200829161222173.png]: /images/20221123/ceaa56958cb6452093e704c9f91cb202.png
[20200829161129417.png]: /images/20221123/3f340e3d208b4ca9af263379ab5cb027.png