快速上手Electron

一、Electron 是什么?

用白话说就是用html+css+js+nodejs+（Native Api）做兼容多个系统（Windows、Linux、Mac）的软件。

一款应用广泛的跨平台的桌面应用开发框架。
Electron的本质是结合了 Chromium 和 Node.js。
使用HTML、CSS、JS等 Web技术构建桌面应用程序。

二、Elemtron流程模型

三、搭建Electron

3.1 安装node和npm

依赖node和npm，检测是否安装：

复制代码

node -v
npm -v

我已经安装过了：

安装Node.js 安装配置 | 菜鸟教程

3.2 项目初始化

QQ202617-101431-HD

3.3 安装 Electron

复制代码

npm install --save-dev electron
// 或
npm install electron -D

3.4 配置

在 package.json配置文件中的scripts字段中增加一条命令：

javascript 复制代码

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
  }
}

完整的package.json：

创建main.js 并打印hello electron：

3.5 启动

输入命令：

javascript 复制代码

npm start

结果：

四、demo

4.1 案例1：加载一个远程页面

在main.js里写入：

javascript 复制代码

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

app.on('ready', () => {
    // 当app完成初始化时，执行createWindow创建窗口
    const win = new BrowserWindow({
        width: 800, //窗口宽度
        height: 600, //窗口高度
        autoHideMenuBar: true, //自动隐藏菜单档
        alwaysOnTop: true, //置顶
        x: 0, //窗口位置x坐标
        y: 0 //窗口位置y坐标
    })
    //加载一个远程页面
   win.loadURL('https://www.baidu.com')
})

运行：

javascript 复制代码

npm start

成功打开窗口：

总结：

4.2 案例2：加载一个本地程序

新建pages目录，写页面：

就跟前端一样，随便写个页面， onepiece.html：

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/style.css" />
    <title>onepiece</title>
  </head>

  <body>
    <div class="w">
      <div class="nav"></div>
      <div class="header">
        <img src="images/topimg.jpg" alt="" />
        <img src="images/opweb_sp.png" alt="" />
        <img src="images/story_bar.jpg" alt="" />
      </div>
      <div class="banner clearfix">
        <ul>
          <li>
            <a href="#"><img src="images/stmn1.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/stmn2.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/stmn3.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/stmn4.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/stmn5.jpg" alt="" /></a>
          </li>
          <li>
            <a href="#"><img src="images/stmn6.jpg" alt="" /></a>
          </li>
        </ul>
      </div>
      <div class="banner2">
        <img src="images/chara_bar.jpg" alt="" />
        <a href="#"><img src="images/char2_off.jpg" alt="" /></a>
        <a href="#"><img src="images/opcom.jpg" alt="" /></a>
      </div>
      <div class="footer">
        <img src="images/under.gif" alt="" />
        <img src="images/cr.gif" alt="" />
      </div>
    </div>
  </body>
</html>

main.js里引入页面：

javascript 复制代码

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

app.on('ready', () => {
  // 当app完成初始化时，执行createWindow创建窗口
  const win = new BrowserWindow({
    width: 1200, //窗口宽度
    height: 800, //窗口高度
    autoHideMenuBar: true, //自动隐藏菜单档
    alwaysOnTop: true, //置顶
    x: 0 ,//窗口位置x坐标
    y: 0 //窗口位置y坐标
  })
  // 引入本地页面
  win.loadFile('./pages/index/onepiece.html')
})

运行：

javascript 复制代码

npm start

起来了：

五、打包

5.1.安装electron-builder：

javascript 复制代码

npm install electron-builder -D

5.2.在package.json中进行相关配置：

javascript 复制代码

// 注意：json文件是不能有注释的
{
  "name": "electron_test",
  "version": "1.0.0",
  "main": "main.js",
  "author": "The Great Song",
  "license": "ISC",
  "description": "I am very handsome",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "electron-builder"  // 打包命令
  },
  "devDependencies": { // 开发依赖
    "electron": "^39.2.7",
    "electron-builder": "^26.4.0"
  },
  "build": {
    "directories": {
      "output": "build_output" // 输出目录
    },
    "appId": "com.song.onepiece", // 应用标识
    "win": {
      "icon": "./logo.ico", // 应用图标
      "target": [
        {
          "target": "nsis", // 安装格式
          "arch": ["x64"] // 生成 64 未安装包
        }
      ]
    },
    "nsis": {
      "oneClick": false, // 是否一键安装 false 否 显示安装界面
      "perMachine": true, // 根据机器安装， fasle 是根据用户安装
      "allowToChangeInstallationDirectory": true // 允许用户自定义目录
    }
  }
}

5.3.运行：

javascript 复制代码

npm run build

看效果：

QQ202617-12019-HD