electron快速入门

electron 简介

electron是一款可以使用JavaScript,HTML,CSS来构建跨平台app的开源框架

electron 官方入门demo

如果你想尝试electron,那么官方domo( electron-quick-start)是一个不错的选择

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

运行成功之后会出现如下界面

当然我们也可以自己创建electron项目

一、.新建项目

1.新建文件夹 如electron-demo

2.npm init //项目初始化

二、安裝electron

npm install electron --save 或cnpm install electron --save

三、在項目的跟目录新建index.html和index.js

index.js文件下写入如下内容

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

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win;

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

  // 加载index.html文件
  win.loadFile('./index.html');

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

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null;
  });
}

// 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 导入。

四、配置package.json

//用于指定electron app的入口文件
"main": "index.js", 
//添加script命令 ,用于启动electron app
 "scripts": {
    "start": "electron ./index.js"
  },

好了此时npm start 项目就可以成功运行了

打包

一、安装 electron-packager

npm install electron-packager --save-dev

二、添加scrip命令 ,用于打包electron app

"build": "electron-packager .  hello_electron --platform=win32 --arch=x64 --ignore=node_modules/electron-*"

electron-packager命令格式

electron-packager 项目目录 app名称 --platform=平台 --arch=架构 --ignore=要忽略的目录或文件

• arch

ia32 ， x64 ， armv7l ， all

• plateform

linux ， win32 ， darwin ， mas ， all

OS X (also known as darwin)

Mac App Store (also known as mas)

执行npm run build命令 打包成功后会出现一个文件夹 在文件夹里有一个hello_electron.exe的应用出现，这样打包就成功了，

对大家有起到帮助的话可以点个赞