把html变成桌面的软件,使用electron将html转为pc版桌面应用程序

一、安装nodejs

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

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

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

4.检测nodejs是否安装好。

node -v

npm -v

二、安装vscode(不是必须)

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

1.进入官网，下载vscode安装包。

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

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

三、html转pc桌面应用程序

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

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

3.初始化nodejs项目。

npm init

4.一直回车直到结束。

5.输入code .打开vscode。

code .

6.打开package.json。

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

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

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

npm install --save-dev electron

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

11.再安装electron-packager。

npm install electron-packager --save-dev

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

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

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)

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

npm start

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

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的插件，点击这里进入(https://npm.taobao.org/mirrors/electron)，找到对应版本安装(这个版本参照卡死时黑窗口中显示的版本)，我的是9.0.2-win32-ia32。

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

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

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

npm run package

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