注意：本篇文章为恢复的文章 格式上也许会发生一点点的意外

Windows平台 文章将会以Windows平台为主要对象。首先上图

avata 准备事项 开始之前，我们需要先安装Node.js。安装完毕后打开PowerShell，依次安装electron、electron-packager。

安装指令如下：

npm install -g <组件名>

安装完成后，我们首先需要建立项目目录，并引导PowerShell进入这个目录（cd ）

除此之外，还需要准备Visual-Code或其他代码编辑软件。

如果你觉得网络比较困难，难以fetch到Github等平台的文件，这里提供一个不会更新的资源。里面还包括Defot Blog的桌面程序和源代码。

如果你的网络无法顺畅下载Node的资源库，请对node进行换源

npm config set registry https://registry.npm.taobao.org/ npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/ 下载一个基础模板 下载Electron基础范例。

温馨提示：请不要使用文章尾部提供的源码文件进行这一步的学习，这将会使你的进程出现错误。

下载完成并解压文件后移动到项目文件夹。

项目启动 在项目目录输入：npm install

如果顺利的话，通过命令npm run start将会运行一个Electron Demo页面。

使程序引导目标界面 现在使用Visual Code打开根目录的main.js。找到createWindow参数

function createWindow(){ Menu.setApplicationMenu(null) //隐藏工具栏，如果不需要可以去掉 mainWindow = new BrowserWindow({width: 1200, height: 800})//窗口配置 mainWindow.loadURL("https://")//目标页面 mainWindow.on('closed', function () { mainWindow = null }) } 如果要使用隐藏工具栏功能，还需在函数的上方添加：

const Menu = electron.Menu 除此之外，如果后面的步骤报错，还需要进行以下修改：

const electron = require('electron') 完成之后，使用npm start查看运行情况

包装程序 打开package.json。

首先修改安装程序。

"scripts": { "start": "electron .", "ele": "electron .", "pack": "electron-packager . 'ExeName' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1" }, 这里需要着重讲一下这个语句

"pack": "electron-packager . 'ExeName' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1"

其中'ExeName'是可修改项，修改为项目程序名称。

--platform后跟平台。平台有：MacOS：darwin；Windows：win32；Linux：linux

--arch后跟程序位数，有x86和x64两个选项，分别对应32位和64位。

--icon后跟程序图标，需要把图标放在根目录并填写文件名，最好不要有中文。

--out后跟输出路径。

--app-version后跟程序版本。

随后，你还可以修改程序信息。

"name": "ProgramName", //程序名称 "version": "Version", //版本号，只能使用数字，不能使用符号如β "description": "decription",//程序描述 生成可执行程序 在根目录执行：

npm run ele来再次确认程序是否正确。

接着，执行npm run pack来生成可执行程序。

扩展延伸 使用Cordova将网页制作成Android APP 如果你想探索如何将网页制作成app，可以参考这篇文章：

传送门

如果觉得有需要，可以联系我→关于 | DefotBlog (defotsec.vip)。

源码和资源 如果你觉得下载文件十分困难，可以下载2021年1月9日更新的资源包。如果有失效，也可以联系我。

这里也提供了DefotBlog的源代码和示例程序。

链接：https://pan.baidu.com/s/1IBCyx6nNLcgSbGjYHQDqWQ 提取码：9vsu 复制这段内容后打开百度网盘手机App，操作更方便哦--来自百度网盘超级会员V4的分享