1.初始化node项目，生成package.json文件

npm init

2.安装electron，并保存为开发依赖项

npm install electron -D

3.根目录下新建index.js文件

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow () {

  mainWindow = new BrowserWindow({width: 800, height: 600})

  mainWindow.loadFile('index.html')

  // mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {

    mainWindow = null

  })

}

app.on('ready', createWindow)

app.on('window-all-closed', function () {

  if (process.platform !== 'darwin') {

    app.quit()

  }

})

app.on('activate', function () {

  // On OS X it's common to re-create a window in the app when the

  // dock icon is clicked and there are no other windows open.

  if (mainWindow === null) {

    createWindow()

  }

})

4.根目录下新建index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <h1>Hello Electron!!</h1>

</body>

</html>

5.打开package.json文件，新建命令

"scripts": {

   "start": "electron ."

}

6.执行启动命令

npm start

目前为止，一个最糙的demo就完成了，但这样是远远不够的，作为一个桌面应用程序，我们希望点击exe文件就能直接启动应用，而不是打开命令行，输入启动命令。这一步就需要打包工具来完成了。

7.安装electron打包工具electron-packager

npm install electron-packager -g

8.配置打包命令

"scripts": {

    "start": "electron .",

    "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"

  }

命令结构如下（根据实际情况修改）：

“.”：需要打包的应用目录（即当前目录），

“myClient”：应用名称，

“--win”：打包平台（以Windows为例），

“--out ../myClient”：输出目录，

“--arch=64”：64位，

“--app-version=0.0.1”：应用版本，

“--electron-version=2.0.0”：electron版本

执行打包命令：

npm run pack

打包完成后，找到输出目录，打开打包完成后的文件夹，

可以看到生成了.exe的执行文件以及其他的一堆配置文件，双击myClient.exe就可以打开应用程序了。

现在，我们已经得到了应用程序的绿色版本（无需安装，拷贝整个文件目录之后即可使用），但是作为客户端应用程序，我们更希望能直接得到一个安装包，安装之后通过桌面快捷方式的形式去访问，这时候就需要Inno Setup出场了。

9.下载安装Inno Setup

下载地址：https://pc.qq.com/detail/13/detail_1313.html

安装完成以后打开Inno Setup客户端

a. file->new，新建脚本

b.填写应用程序信息，黑体为必填项

Application name： 应用名称；

Application version：应用版本；

Application publisher：发行单位（可选）；

Application websiter：应用程序网址（可选）；

c.完善应用文件信息

Application destination base folder：应用程序目标基本文件夹，可默认也可自定义；

Application folder name：应用文件夹名称；

Allow user to change the application folder：勾选，允许用户自定义安装位置；

d.指定属于应用程序的文件

Application main executable file：应用程序主执行文件，即第8步中打包生成的.exe文件；

Allow user to start the application after Setup has finished：允许用户在安装完成后启动应用程序；

Add folders：添加应用程序文件，选择第8步中打包出的文件根目录即可，要把所有.dll文件及其他配置文件都包含进去；

点击添加之后可以看到：

文件目录以自己的实际情况为准。

e.指定应用程序的快捷方式，勾选默认的两项即可，即“创建主执行程序的快捷方式到公共开始菜单程序文件夹”、“允许用户创建桌面快捷方式”

f.指定安装期间要显示的文档文件

License file：许可文件；

Information file shown before installation：安装之前显示信息文件；

Information file shown after installation：安装之后显示信息文件；

g.指定应包括的安装语言（汉化版的有简体中文选项），选择之后点击下一步

h.指定基本编译设置

Custom compiler output folder：自定义编译器输出文件夹，即最终编译出的安装包要放哪个位置；

Compiler output base file name：编辑器输出基本文件名，即安装包名称；

Custom Setup icon file：自定义安装程序图标文件；

Setup password：安装密码；

i.点击下一步

剩下的就是一路确定了，会询问你在编译之前要不要保存你的脚本（上面的配置步骤，最终会生成一个编译脚本文件），点击保存，先不要编译，打开脚本文件，新增配置项，修改注册表，设置开机自启动：

[Registry]

Root: HKLM; Subkey: "SOFTWARE\Microsoft\Windows\CurrentVersion\Run"; ValueType: string; ValueName: "testrun"; ValueData: "{app}\{#MyAppExeName}"

然后，执行编译文件：build->compile

至此，所有步骤已经完成了，赶快去看看你的安装包能不能正常使用吧。

electron安装+运行+打包成桌面应用+打包成安装文件+开机自启动的更多相关文章

  1. C# Winform打包部署时添加注册表信息实现开机自启动

    1.原理:需要开机自启动的程序,需要将其启动程序的路径写到注册表中指定的文件夹下 2. 写入注册表的方式有两种 a.在生成安装程序时配置 b.在程序运行时,动态配置 方法一:使用VS2010自带的打包 ...

  2. HHvm Apache 2.4 Nginx建站环境搭建方法安装运行WordPress博客

    HHvm Apache 2.4 Nginx建站环境搭建方法安装运行WordPress博客 VPS主机   2014年06月02日 17:20   评论»       文章目录 Debian上安装 Ce ...

  3. Electron把网页打包成桌面应用并进行源码加密

    前言 最近想把自己用html+css+js做的网页界面打包成桌面应用,网上一搜,发现Electron是一个不错的选择,试了试,发现效果真的不错.这里记录一下打包过程以作记录,便于自己以后查看学习. 一 ...

  4. electron将网站打包成桌面应用

    需求同 NW.js将网站打包成桌面应用 1. 从github上克隆electron示例项目 git clone https://github.com/electron/electron-quick-s ...

  5. Electron：将前端应用打包成桌面应用

    首先戳我下载安装对应版本的node.js. 安装完成后,打开命令行输入node -v以及npm -v查看对应版本.能够正常显示说明安装成功. 写一个最简单的hello world的nodejs应用.n ...

  6. electron打包成桌面应用程序的详细介绍

    1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electro ...

  7. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  8. 前端打包成桌面应用、以及chrome扩展

    前段时间在利用工作之余开发了tomato timer这个蕃茄钟,然后部署到github.io上,由于greatway太厉害,偶尔会有打不开的情况.上周末对比做了扩展和改进,使其成为chrome的插件, ...

  9. nodejs打包成桌面程序（exe）的进阶之路

    nodejs打包成桌面程序(exe)的进阶之路 node js bat 前端 计划任务 前言:最近的研究,请大佬们细品 第一篇 - 任务计划程序篇 说真的研究到将nodejs打包成可执行的exe文件是 ...

随机推荐

  1. 2016年3月9日Android实习日记

    1. 解决 org.eclipse.swt.SWTException: Graphic is disposed 问题. 参考:http://www.xuebuyuan.com/1896964.html ...

  2. no console to display at this time

    no console to display at this time我把控制台关掉,重新run as 还是同样问题,于是运行其他项目,但是其他项目能正常运行,说明项目写的有问题,而不是控制台的问题

  3. 在云端服务器centos7安装jvm并且运行java程序

    (1)在云端服务器 下载jdk http://www.linuxidc.com/Linux/2016-09/134941.htm(大致看这个文章后可以下载一个jdk的压缩包,然后将压缩包解压) 然后, ...

  4. 10个提升MySQL性能的小技巧

    从工作量分析到索引的三条规则,这些专家见解肯定会让您的MySQL服务器尖叫. 在所有的关系数据库中,MySQL已经被证明了完全是一头野兽,只要通知停止运行就绝对不会让你多等一秒钟,使你的应用置于困境之 ...

  5. 【Spark】Spark-架构

    Spark-架构 Spark Master at spark://node-01:7077 spark clustermanager_百度搜索 看了之后不再迷糊-Spark多种运行模式 - 简书 Sp ...

  6. WebSocket——为Web应用带来桌面应用般的灵活性【转载+整理】

    原文地址 本文内容 WebSocket 简介 浏览器端的 JavaScript 实现 Java 端的 WebSocket 实现 对 Web 应用的重新思考 使用WebSocket时所需注意的要点 We ...

  7. 微软BI 之SSAS 系列 - 维度的优化,灌木丛属性关系,以及自然层次结构与非自然层次结构的概念

    维度的优化 在 SSAS 开发设计过程中,维度的优化非常重要,因为它在 SSAS 分析服务性能调优的过程中往往能起到一个非常重要的作用. 一般来说,对于 Cube 的性能优化第一步可能考虑的就是查看维 ...

  8. RPC框架-hessian学习

    先说说hessian有什么优点和缺点 一.优点: 比 Java 原生的对象序列化/反序列化速度更快, 序列化出来以后的数据更小.序列化协议跟应用层协议无关, 可以将 Hessian 序列化以后的数据放 ...

  9. C#后台执行js

    StringBuilder sb = new StringBuilder(); sb.Append("<script type='text/javascript'>") ...

  10. 让 Python 更加充分的使用 Sqlite3

    我最近在涉及大量数据处理的项目中频繁使用 sqlite3.我最初的尝试根本不涉及任何数据库,所有的数据都将保存在内存中,包括字典查找.迭代和条件等查询.这很好,但可以放入内存的只有那么多,并且将数据从 ...