electron入门 1（环境搭建）[ Windows环境 ]

1、安装nodejs

2、安装yarn（替代nodejs自带的npm）

node install -g yarn

3、新建一个文件夹，命名为test

4、在上一步创建的文件夹目录下打开终端，创建nodejs项目，并且根据提示输入项目信息：

{
    name:test
    version:1.0.0
    entry point:index.js
    license:MIT
}

5、将安装源切换为国内资源，安装electron依赖包：选择版本7.2.4

yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron
yarn add [email protected] --platform=win64

6、如果上一步安装失败，也可以手动修改package.json文件

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "electron": "^7.2.4",
    "electron-log": "^2.2.14",
    "electron-settings": "^3.0.7",
    "electron-shortcut-normalizer": "^1.0.0",
    "glob": "^7.1.0",
    "highlight.js": "^10.4.1",
    "update-electron-app": "^1.1.1"
  }
}

然后执行命令

npm install

至此，在文件夹test下即可看到依赖包文件夹node_modules

7、在package中增加启动入口：

"scripts": {"start":"electron ./index.js"}

8、在test文件夹目录下创建文件index.js，并输入如下代码：

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

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

function createWindow() {
  // 创建浏览器窗口。
  win = new BrowserWindow({
    width: 1200,
    height: 600,
    webPreferences: {
      nodeIntegration: true,   // 集成node环境
      enableRemoteModule: true
    },
  });

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

  win.on('closed', () => {
    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 导入。
// 

9、在test文件夹目录下创建文件index.html，并输入如下代码：

  
    
    
  
  
    
Hello World!
    We are using node Chrome and Electron
  

10、执行命令

yarn start

11、如下是运行成功的界面