# electron-app

**Repository Path**: NativeBase/electron-app

## Basic Information

- **Project Name**: electron-app
- **Description**: electron-app学习
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-28
- **Last Updated**: 2023-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
[点击前往electron官网](https://www.electronjs.org/)

## 安装 electron

#### 1.安装 nodejs

Electron 基于 Chromium 和 Node.js，因此先安装 nodejs
[node下载地址](http://nodejs.cn/download/)
[node安装配置](https://www.runoob.com/nodejs/nodejs-install-setup.html)

#### 2.安装 electron

在项目中安装：`npm install electron@latest --save-dev`
指定electron版本安装：`npm install electron@10.1.5 --save-dev`
也可全局安装：`npm install electron -g`
安装比较慢的话也可使用淘宝镜像 cnpm 安装

## 安装依赖

```
npm install
```

## 启动项目

```
npm start
```


#### 6.打包成安装文件

这里我使用 NSIS(Nullsoft Scriptable Install System) v2.51版本打包成安装文件。

1. 下载安装 NSIS
2. 安装完成后选择 HW VNISEdit，出现脚本编辑器，选择 文件-新建脚本:向导，开始一步一步的填信息。
3. (1/8)依次填写名称、版本(应用版本号)、出版人(应用程序的发布者)和程序网站，出版人和网站没有可不填；点击下一步
4. (2/8)修改应用图标和安装包名，程序语言默认是勾选中文的，如果有其他语言可勾选选择；点击下一步
5. (3/8)可直接跳过；点击下一步
6. (4/8)授权文件，一般用于安装前勾选的协议，没有协议可将授权文件删掉；点击下一步
7. (5/8)添加应用文件：先把默认的两个删掉，再添加之前使用electron-packager打包后的.exe文件，然后添加使用electron-packager打包后的整个文件夹，注意要把包含子目录勾选上，确定；点击下一步
![(5/8)删除默认图片](https://images.gitee.com/uploads/images/2020/1126/162926_887fae48_1936092.jpeg "1606378815(1).jpg")![(5/8)选择exe文件](https://images.gitee.com/uploads/images/2020/1126/163016_16235939_1936092.jpeg "1606378921(1).jpg")![(5/8)选择应用文件夹](https://images.gitee.com/uploads/images/2020/1126/163041_3cdaf32e_1936092.jpeg "1606379005(1).jpg")
8. (6/8)自定义选择是否在开始菜单创建文件夹，其中创建互联网快捷方式在于上面(1/8)中是否填写了程序网站；点击下一步
9. (7/8)可直接跳过；点击下一步
10. (8/8)修改解除安装程序图标，默认与安装图标相同；点击下一步
11. 勾选保存脚本，方便下载直接运行脚本；点击完成，回到脚本编辑器；
12. 修改脚本，如**修改安装包名(带年月日)**、**修改默认安装路径**、**设置开机启动**、**设置卸载干净(默认卸载时部分文件未删除)**、**设置安装前检测(检测是否正在安装、是否已经安装、是否正在运行)** 和 **设置卸载前检测(检测是否正在运行)**；
 _**[点击查看详细修改说明](https://gitee.com/lunc9932/electron-app/blob/master/build/NSIS%E8%84%9A%E6%9C%AC%E4%BF%AE%E6%94%B9%E8%AF%B4%E6%98%8E.md)**_
13. 在菜单栏选择 NSIS(N)-编译并运行，大概等待2分钟左右，运行完成，安装文件在之前保存的脚本同级目录下；

### 使用 electron-builder 打包

#### 1.安装 electron-builder 执行命令：`npm install electron-builder`

#### 2.配置 build 参数

[点击查看配置详细参数](https://www.electron.build/configuration/configuration)
[配置详细参数(部分已翻译中文)](https://blog.csdn.net/qq_38830593/article/details/89843722)

```
"build":{
    "appId":"com.test.app",
    "productName":"testApp",    //项目名
    "directories":{
        "buildResources":"build",    //默认资源文件夹，打包时该文件不会被打包
        "output":"build"    //打包输出文件夹
    },
    "win":{
        "target":[{
            "target":"nsis",
            "arch":["ia32","x64"]                   //打出32bit+64bit的包(包体积较大，不建议，一般只选择一个)
        }],
        "icon":"build/logo/icon.ico",
        "asarUnpack":["build/**","README.md"]           //不会被压缩进app.asar的资源
    },
    "mac":{
        "icon":"build/logo/icon.icns"
        "background": "build/background.jfif",          //安装窗口背景图
        "iconSize": 100,                                //图标的尺寸
    },
    "nsis":{
        "oneClick":false,                               //是否一键安装
        "allowElevation":true,                          //是否允许请求提升
        "allowToChangeInstallationDirectory":true,      //允许修改目录，允许用户选择安装目录
        "installerIcon":"build/logo/icon.ico",          //安装图标
        "uninstallerIcon":"build/logo/icon.ico",        //卸载图标
        "installerHeaderIcon":"build/logo/icon.ico",    //安装时头部图标
        "createDesktopShortcut":true,                   //是否创建桌面图标
        "createStartMenuShortcut":true,                 //是否创建开始菜单图标
        "shortcutName":"testApp",                       //开始菜单名称
        "include":"build/script/installer.nsh",         //自定义nsis脚本
        "perMachine": true,                             //为当前系统的所有用户安装该应用程序
        "language": "2052",                             //安装语言，2052对应中文
    }
}
```

 _注意在将上面配置复制到配置文件后，需要将注释删掉_

#### 3.在 package.json 文件中配置打包

```
"scripts": {
    "start": "electron .",
    "build": "electron-builder",
    "build:dir": "electron-builder --dir",    //不会生成安装程序，一般用于测试打包
    "build:win64": "electron-builder --win --x64",
    "build:mac": "electron-builder --mac"
}
```

#### 4.执行打包命令

打包命令：npm run build 或 npm run build:mac

执行完命令后，在项目根目录 build 文件夹下会生成一个应用程序文件夹及安装程序，如果使用 npm run build:dir 命令打包，则不会生成安装程序，这样打包速度快，一般用于测试，只会生成应用程序文件夹，打开文件夹里面包含 .exe 文件，点击运行 exe 文件，没有报错则说明打包成功。


```
"win": {
      "icon": "build/icons/icon.ico",
      "requestedExecutionLevel": "highestAvailable"。// highestAvailable 已有最高权限
}
```