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.

参考链接:

文章作者: 古客
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 古客 !
评论
  目录