electron 快速入门

作者: Kelly_zj | 来源:发表于2019-02-12 19:16 被阅读0次

Electron
Electron学习笔记（一）
Electron学习笔记（一）
Electron快速入门
Electron 快速入门
electron 快速入门
electron 编写 hello world
electron快速入门笔记
Electron 快速入门及打包
Electron学习（1）快速入门

从hello world开始入手，我的环境是macOs Mojave 请确保已安装nodejs

electron 简介

electron 是一款可以使用js,html,css来构建跨平台app的开源库，Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用。

electron 项目与web项目的区别

electron核心我们可以分成2个部分，主进程和渲染进程。主进程控制着应用的生命周期。可以打开对话框，创建渲染进程，还可以处理其它与操作系统的交互操作，包括启动和退出应用。简单理解就是连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window（窗口）。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。

相比web项目，桌面项目多了一个进程
简单理解：给web项目套上一个node环境的壳。😆

打造你的第一个Electron应用

咱们常用的编辑器 VSCode，也是基于 Electron 构建的哦~

一个最基本的 Electron 应用一般来说会有如下的目录结构：

your-app/
├── package.json
├── main.js
└── index.html

执行命令初始化文件夹

npm init

初始化之后的package.json

{
  "name": "electron_demo",
  "version": "0.0.1",
  "description": "electron_demo",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "zj",
  "license": "ISC"
}

4.安装Electron 推荐使用node安装

sudo cnpm install --save-dev electron //网速不好的情况下npm安装时间较长，建议使用淘宝镜像，执行npm install -g cnpm --registry=https://registry.npm.taobao.org ,安装cnpm工具

main.js内容

const { app, BrowserWindow } = require("electron"); //electron.app负责electron应用程序的声明周期，electron.BrowserWindow 类负责创建窗口
//保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被垃圾回收的时候，window对象将会自动的关闭
let win;
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。例如（closed）
app.on("ready", () => {
  //创建浏览器窗口
  win = new BrowserWindow({ width: 800, height: 600 });
  //加载app的index.html
  win.loadFile("index.html");
  //打开开发者工具
  win.webContents.openDevTools();
  //当window被关闭是触发
  win.on("closed", () => {
    //取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null;
  });
});

// 当全部窗口关闭时退出。
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内容

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>

<body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js
    <script>document.write(process.versions.node)</script>,
    Chromium
    <script>document.write(process.versions.chrome)</script>,
    and Electron
    <script>document.write(process.versions.electron)</script>.

    <script>
        console.log(process)
        // You can also require other files to run in this process
        // require('./renderer.js')
    </script>
</body>

</html>

至此就可以启动啦~~

npm start

启动之后会在菜单栏生成一个electron app

electron app图标+打开app之后的内容

项目打包

安装electron-package

  cnpm install --save-dev electron-package

添加script命令，用于打包electron app

"scripts": {
    "start": "electron .",
    "build": "electron-packager .  electron_demo --platform=darwin --arch=x64 --ignore=node_modules/electron-*" //electron-packager 项目目录 app名称 --platform=平台 --arch=架构 --ignore=要忽略的目录或文件
  },

执行命令打包

cnpm run build

生成文件夹

electron_demo-darwin-x64/
├── electron_demo //打包出来的项目，使用这个就可以了
├── LICENSE
├── LICENSE.chromium.html
└── version

项目压缩

安装asar

sudo cnpm install --save-dev asar

添加script命令

"scripts": {
    "start": "electron .",
    "build": "electron-packager .  electron_demo --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
    "package": "asar pack electron_demo.app/Contents/Resources/app electron_demo.app/Contents/Resources/app.asar" //新增 
// asar 命令格式 asar pack <dir> <output>
  },

执行压缩命令

sudo cnpm run package

生成.asar文件

asar文件
来个题外话，解压文件
1.asar e app.asar <解压后的目录>
2.asar extract app.asar <解压后的目录>

icon更改

png图片（1024*1024）
新建一个暂定的目录放各种大小的图片（目录后缀必须为.iconset）

electron_demo/
├── pic.png
├── icons.iconset
└── ...

执行命令在icons.iconset中生成不同大小的图片（sips -z 裁剪图片）

sips -z 16 16     pic.png --out icons.iconset/icon_16x16.png
sips -z 32 32     pic.png --out icons.iconset/icon_16x16@2x.png
sips -z 32 32     pic.png --out icons.iconset/icon_32x32.png
sips -z 64 64     pic.png --out icons.iconset/icon_32x32@2x.png
sips -z 128 128   pic.png --out icons.iconset/icon_128x128.png
sips -z 256 256   pic.png --out icons.iconset/icon_128x128@2x.png
sips -z 256 256   pic.png --out icons.iconset/icon_256x256.png
sips -z 512 512   pic.png --out icons.iconset/icon_256x256@2x.png
sips -z 512 512   pic.png --out icons.iconset/icon_512x512.png
sips -z 1024 1024   pic.png --out icons.iconset/icon_512x512@2x.png

4.package.json中增加打包icon及系统icon

"scripts": {
    "start": "electron .",
    "build": "electron-packager .  electron_demo --icon=Icon.icns --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
    "package": "asar pack electron_demo.app/Contents/Resources/app electron_demo.app/Contents/Resources/app.asar"
  },
"mac":{
      "icon":"Icon.icns"
  }

5.执行打包命令就可以看到最新图标了