这是我参与更文挑战的第12天，活动详情查看：更文挑战

前言

Electron是使用Nodejs来创建桌面应用程序(比如Windows、MacOS、Linux)。与其它Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。

一、开发环境

1、nodejs和npm

安装好nodejs和npm，一般nodejs会带npm，所以只需要下载nodejs安装包安装即可

2、编辑器

使用vscode，在vscode项目中安装electron
npm install –save-dev electron
或者全局安装 npm install electron -g

二、快速开始一个项目

1、初始化项目

使用npm可以生成项目：
npm init
会创建一个package.json文件，
package.json内容：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}
复制代码

程序入口是main，如果没有标明main，则默认会加载index.js，使用electron还需要

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}
复制代码

2、项目代码结构

your-app/
├── package.json
├── main.js
└── index.html
复制代码

3、编写最简单得electron程序

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

function createWindow () {   
  // 创建浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')
//或者直接加载url
win.loadUrl("url");
}

app.whenReady().then(createWindow)
复制代码

4、运行程序

在终端中执行npm start命令就可以执行这个程序

5、调试程序

在调试配置中添加electron主进程，并且修改program启动入口名称为main.js（根据自己命名而定）

6、打包程序

（1）安装electron-packager

（2）使用electron-packager打包electron程序（支持macos，linux和windows）

①快速打包（打包后得名称就是当前项目名称，所有资源都打包）：

electron-packager .

②自定义打包（根据需要定制打包）：

electron-packager . eguid --asar
复制代码

.表示打包得目录路径
eguid表示打包后得exe名称
–asar就是把资源文件打包成asar包

③electron-packager使用详解

Usage: electron-packager <sourcedir> <appname> [options...]

Required parameters

sourcedir          the base directory of the application source

  Examples:        electron-packager ./
                   electron-packager ./ --all

Optional parameters

appname            the name of the app, if it needs to be different from the "productName" or "name"
                   in the nearest package.json

Options

version            prints the version of Electron Packager and Node, plus the target platform and
                   arch, for bug reporting purposes, and exits immediately

* All platforms *

all                equivalent to --platform=all --arch=all
app-copyright      human-readable copyright line for the app
app-version        release version to set for the app
arch               all, or one or more of: ia32, x64, armv7l, arm64, mips64el (comma-delimited if
                   multiple). Defaults to the host arch
asar               whether to package the source code within your app into an archive. You can either
                   pass --asar by itself to use the default configuration, OR use dot notation to
                   configure a list of sub-properties, e.g. --asar.unpackDir=sub_dir - do not use
                   --asar and its sub-properties simultaneously.

                   Properties supported include:
                   - ordering: path to an ordering file for file packing
                   - unpack: unpacks the files to the app.asar.unpacked directory whose filenames
                     regex .match this string
                   - unpackDir: unpacks the dir to the app.asar.unpacked directory whose names glob
                     pattern or exactly match this string. It's relative to the <sourcedir>.
build-version      build version to set for the app
download           a list of sub-options to pass to @electron/get. They are specified via dot
                   notation, e.g., --download.cacheRoot=/tmp/cache
                   Properties supported:
                   - cacheRoot: directory of cached Electron downloads. For default value, see
                     @electron/get documentation
                   - mirrorOptions: alternate URL options for downloading Electron zips. See
                     @electron/get documentation for details
                   - rejectUnauthorized: whether SSL certs are required to be valid when downloading
                     Electron. Defaults to true, use --no-download.rejectUnauthorized to disable
                     checks.
electron-version   the version of Electron that is being packaged, see
                   https://github.com/electron/electron/releases
electron-zip-dir   the local path to a directory containing Electron ZIP files
executable-name    the name of the executable file, sans file extension. Defaults to appname
extra-resource     a file to copy into the app's resources directory
icon               the local path to an icon file to use as the icon for the app.
                   Note: Format depends on platform.
ignore             do not copy files into app whose filenames RegExp.match this string. See also:
                   https://electron.github.io/electron-packager/master/interfaces/electronpackager.options.html#ignore
                   and --no-prune. Can be specified multiple times
no-deref-symlinks  make sure symlinks are not dereferenced within the app source
no-junk            do not ignore system junk files from the packaged app
no-prune           do not prune devDependencies from the packaged app
out                the dir to put the app into at the end. Defaults to current working dir
overwrite          if output directory for a platform already exists, replaces it rather than
                   skipping it
platform           all, or one or more of: darwin, linux, mas, win32 (comma-delimited if multiple).
                   Defaults to the host platform
prebuilt-asar      path to a prebuilt asar file (asar, ignore, no-prune, and no-deref-symlinks
                   options are incompatible with this option and will be ignored)
quiet              Do not print informational or warning messages
tmpdir             temp directory. Defaults to system temp directory, use --no-tmpdir to disable
                   use of a temporary directory.

* darwin/mas target platforms only *

app-bundle-id      bundle identifier to use in the app plist
app-category-type  the application category type
                   For example, `app-category-type=public.app-category.developer-tools` will set the
                   application category to 'Developer Tools'.
darwin-dark-mode-support
                   forces support for Mojave/10.14 dark mode in the packaged app
extend-info        a plist file to merge into the app plist
helper-bundle-id   bundle identifier to use in the app helper plist
osx-sign           (macOS host platform only) Whether to sign the macOS app packages. You can either
                   pass --osx-sign by itself to use the default configuration, or use dot notation
                   to configure a list of sub-properties, e.g. --osx-sign.identity="My Name"
                   For info on supported values see https://npm.im/electron-osx-sign#opts---options
                   Properties supported include:
                   - identity: should contain the identity to be used when running `codesign`
                   - entitlements: the path to entitlements used in signing
                   - entitlements-inherit: the path to the 'child' entitlements
osx-notarize       (macOS host platform only, requires --osx-sign) Whether to notarize the macOS app
                   packages. You must use dot notation to configure a list of sub-properties, e.g.
                   --osx-notarize.appleId="foo@example.com"
                   For info on supported values see https://npm.im/electron-notarize#method-notarizeopts-promisevoid
                   Properties supported include:
                   - appleId: should contain your apple ID username / email
                   - appleIdPassword: should contain the password for the provided apple ID
protocol           URL protocol scheme to register the app as an opener of.
                   For example, `--protocol=myapp` would register the app to open
                   URLs such as `myapp://path`. This argument requires a `--protocol-name`
                   argument to also be specified.
protocol-name      Descriptive name of URL protocol scheme specified via `--protocol`
usage-description  Human-readable descriptions of how the app uses certain macOS features. Displayed
                   in the App Store. A non-exhaustive list of properties supported:
                   - Camera
                   - Microphone

* win32 target platform only *

win32metadata      a list of sub-properties used to set the application metadata embedded into
                   the executable. They are specified via dot notation,
                   e.g. --win32metadata.CompanyName="Company Inc."
                   or --win32metadata.ProductName="Product"
                   Properties supported:
                   - CompanyName (default: author name from nearest package.json)
                   - FileDescription (default: appname)
                   - OriginalFilename (default: renamed exe)
                   - ProductName (default: appname)
                   - InternalName (default: appname)
                   - requested-execution-level (user, asInvoker, or requireAdministrator)
                   - application-manifest
复制代码

如果觉得博主写的还不错，欢迎”关注、收藏、点赞“一键三连！

文章版权归作者所有，未经允许请勿转载。

THE END

前端