Electron安装及入门

概述

1.安装

官方的安装方法在在打包打包并分发应用程序时会出现门题和报错，难受，不过google有解决办法，或者按照博主的这个方法

1，安装node.js

　　进入官网下载、安装。https://nodejs.org/en/

2，安装cnpm（可选，未安装则使用npm）

　　安装命令（打开系统的cmd.exe来执行命令）： npm install -g cnpm –registry=https://registry.npm.taobao.org

检查是否安装成功，输出版本号即成功

node -v
npm -v

3，安装Electron

　　安装命令： cnpm install -g electron

4，安装Electron-forge

　　Electron工具整合项目：https://github.com/electron-userland/electron-forge

　　安装命令： cnpm install -g electron-forge

5，新建项目

　　F盘新建Electron项目文件夹 F:\Electron。

　　在Electron文件夹下，按住Shift键并右键单击空白处，选择在此处打开命令窗口来启动cmd.exe。

　　执行 electron-forge init 项目名称 命令来生成名为myapp的项目文件夹，同时安装项目所需要的模块、依赖项等。

　　命令： electron-forge init myapp

6，启动项目

　　cd到myapp目录下，执行命令 electron-forge start 来启动app（也可以简单的用npm start来运行）。

7，项目文件

　　项目的目录结构：node_modules 文件夹下是各种模块、类库，src下是app的源代码文件，package.json是描述包的文件。

　　src/index.js：这是app主进程的入口，在这里创建了mainWindow浏览器窗口，

　　使用mainWindow.loadURL(\file://${__dirname}/index.html`)来加载index.html主页，

　　我们也可以在此链接我们需要链接的网址，来实现web桌面应用，例：mainWindow.loadURL(https://www.cnblogs.com/)，

　　使用mainWindow.webContents.openDevTools()`来打开开发者工具用于调试（这个操作通常在发布app时删除）。

　　然后是app的事件处理：

　　ready: 当Electron完成初始化后触发，这里初始化后就会去创建浏览器窗口并加载主页面。
　　window-all-closed: 当所有浏览器窗口被关闭后触发，一般此时就退出应用了。
　　activate: 当app激活时触发，一般针对macOS要需要处理。

　　src/index.html：这是主页面，除了显示Well hey there!!!的信息外，没什么具体内容。

9，编译打包

　　输入以下命令进行编译打包： npm run make

　　修改package.json，在electronPackagerConfig部分添加”asar”: true。
　　“electronPackagerConfig”: {
　　　　“asar”: true
　　}
　　重新打包后源码文件会被打包进app.asar文件中（该文件仍然在src目录下）。

　　可以直接运行打包后的myapp.exe启动程序

2.基础文件

main.js

//main.js
const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

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

  // 然后加载应用的 index.html。对应的index.html 就是初始界面。
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  //关于win 窗口的生命周期我们之后再研究……
  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null
  })
}
//关于 app 主进程的生命周期我们之后再研究……
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

index.html

package.json

{
    "name": "我的-electron-app",
    "version": "0.1.0",
    "author": "古客",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

　　“productName”: “myapp” 打包后的文件名称

　　“version”: “1.0.0” 版本号

　　若想更换打包程序的图标，可以在config->electronPackagerConfig->icon中进行设置，

　　（例如：我们把app.ico放在src目录下就可以这样配置”icon”:”src/favicon.ico”）

3.

4.

5.

参考链接：