使用electron将html转为pc版桌面应用程序

深藏阁楼爱情的钟 2022-11-27 09:00 205阅读 0赞

## 一、安装nodejs ##

1.[进入官网][Link 1]，下载最新版的nodejs。

2.根据机型选择32位或者64位。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70][]

3.安装包下载好后，一直下一步安装即可，如需选择安装位置可以调整一下安装位置再安装。

4.检测nodejs是否安装好。

node -v
    npm -v

![20200814195116308.png][]

## 二、安装vscode（不是必须） ##

注意：以下操作中有需要重启电脑的操作，建议先做好备份。

1.[进入官网][Link 2]，下载vscode安装包。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 1][]

2.下载好点击安装包进行安装，注意选择以下四项。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 2][]

3.建议重启电脑更新配置。

## 三、html转pc桌面应用程序 ##

1.先自己创建一个存放项目的文件夹，然后在该文件夹中创建一个以项目名命名的文件夹。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 3][]

2.在地址栏输入 cmd 命令，进入命令行界面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 5][]

3.初始化nodejs项目。

npm init

![20200814200732507.png][]

4.一直回车直到结束。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 6][]

5.输入code .打开vscode。

code .

![20200814201043768.png][]

6.打开package.json。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 7][]

7.注意"main"后面的"index.js"代表项目的入口文件，因此我们创建index.js。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 8][]

8.先不管index.js，继续在package.json上修改。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 9][]

9.回到命令行，安装electron。

npm install --save-dev electron

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 10][]

10.再转到vscode，发现package.json多了一些东西。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 11][]

11.再安装electron-packager。

npm install electron-packager --save-dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 12][]

12.返回vscode，发现package.json中又多了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 13][]

13.将要转换的html复制过来，注意js文件不要与项目中的index.js同名。

![20200814202715480.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 14][]

14.将下列代码复制到index.js中，注意下面代码的html文件是index.html，可以根据自己实际名称更改。

const { app, BrowserWindow } = require('electron')
    
    function createWindow () {   
      // 创建浏览器窗口
      let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })
    
      // 加载index.html文件
      win.loadFile('index.html')
    }
    
    app.whenReady().then(createWindow)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 15][]

15.先转到黑窗口运行一下，最终会弹出一个窗口显示你的html页面。

npm start

![2020081420312778.png][]

16.在package.json中编辑打包指令。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 16][]

32位打包指令：

electron-packager . 测试 --win --out 测试 --arch=ia32 --app--version 1.4.0 --overwrite --ignore=node_modules --electron-zip-dir=./electron-zip

64位打包指令：

electron-packager . 测试 --win --out 测试 --arch=x64 --app--version 1.4.0 --overwrite --ignore=node_modules

注意：32位打包时可能会卡死，我的就是，因此需要安装一个旧版本的electron的插件，[点击这里进入][Link 3]（[https://npm.taobao.org/mirrors/electron][Link 3]），找到对应版本安装（这个版本参照卡死时黑窗口中显示的版本），我的是9.0.2-win32-ia32。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 17][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 18][]

然后在项目根目录下创建electron-zip的文件夹，把下载好的压缩包放进去。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 19][]

最后注意一下32位最后的写法。

![20200814203729745.png][]

17.以上工作做好后，再回到命令行输入 npm run \[刚刚配置的打包指令\] 进行打包。

npm run package

![20200814204536186.png][]

打包成功后，可以在项目的根目录中找到打包好的应用程序。

[Link 1]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70]: /images/20221124/2f10aa6f02dc403e968313f618c03f32.png
[20200814195116308.png]: /images/20221124/690e75eee16d4e5bb7599b814050bf48.png
[Link 2]: https://code.visualstudio.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 1]: /images/20221124/865c9c1e5fc04269b761d9b03a7a29f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 2]: /images/20221124/e6f175a6e062491ba08422534cedc047.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 3]: /images/20221124/980895a3931049659f668ecfb5e1dca7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 4]: /images/20221124/c63b2d8a24f74777a1df8533905a9172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 5]: /images/20221124/145bc702ae7f4375b6bf1f22009cfee8.png
[20200814200732507.png]: /images/20221124/72f9df4741fc411d888fd4ca0d1ea194.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 6]: /images/20221124/3a8483d0bc404e2ea647eaab7365eb05.png
[20200814201043768.png]: /images/20221124/bf141b120cde485da083826a7710de74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 7]: /images/20221124/ca46e4ea3cd34d058c6b77fcf53dccc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 8]: /images/20221124/dea06e5a277f4985b9b89e5e52e7f562.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 9]: /images/20221124/ff7e591e32bc464babc6e8c20c3d4b50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 10]: /images/20221124/7325d4f7caae4f0da19f3f074956e014.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 11]: /images/20221124/ee714cd2e3f64b86b78514fe4c011c25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 12]: /images/20221124/4f5f9dd0c7d0437c9150c6f950375fd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 13]: /images/20221124/3475215f1b9b4acc9def833252d105dc.png
[20200814202715480.png]: /images/20221124/7579e5cb7df346fe890368f0ed7e0402.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 14]: /images/20221124/7465b8a6e3374aacb66426c41fa8f113.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 15]: /images/20221124/858c1eca54554f53be38082e565ee2e3.png
[2020081420312778.png]: /images/20221124/65f3f41ac5dc4a65bd9933c432f640d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 16]: /images/20221124/82a3f4504a7346b1bc01a2938f672b2b.png
[Link 3]: https://npm.taobao.org/mirrors/electron
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 17]: /images/20221124/941c451796af40cfb8d0efe1da4a4372.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 18]: /images/20221124/0771585166454ef1ae88033cdb2f4f38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 19]: /images/20221124/ff48b2676d6d469ea908fca9a9c34da9.png
[20200814203729745.png]: /images/20221124/15385503b73f416d84cc072df267b428.png
[20200814204536186.png]: /images/20221124/f5fd00fd1f934a2791211a2426a81a79.png