electron基础篇(一)

全局安装

cnpm install electron -g 

检查是否安装成功

electron -v

如果失败，则全局安装(window10,64位系统)

cnpm install electron-prebuilt -g

创建项目

目录结构

index.html

随便写

main.js

var electron = require('electron')
var app = electron.app

var BrowserWindow = electron.BrowserWindow
var mainWindow = null

//监听应用准备完成
app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800
  })
  // mainWindow.loadFile('index.html')  //报错
  // 打开文件
  mainWindow.loadURL('file://' + __dirname + '/index.html')
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})

//监听所有窗口关闭事件
app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

package.json

main为主入口文件

{
  "name": "electron02",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^7.0.0"
  }
}

主进程与渲染进程

1. Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚

本通过创建 web 页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程

1. 由于 Electron 使用了 Chromium（谷歌浏览器）来展示 web 页面，所以 Chromium 的

多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。

1. 主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲

染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程: main.js
渲染进程: index.html

开启渲染进程中的调试模式

mainWindow.webContents.openDevTools()

可以使用node中的所有模块

调用fs模块，读取文件内容

var fs = require('fs')
window.onload = function() {
  var btn = this.document.querySelector('#btn')
  var textarea = this.document.querySelector('#textarea')
  //调用fs模块，读取文件内容
  btn.onclick = function() {
    fs.readFile('package.json', 'utf-8', (err, data) => {
      textarea.innerHTML = data
      console.log(data)
    })
  }
}

拖放读取文件内容

拖动记事本到页面中的窗口，并把记事本中内容赋值到窗口上

  //阻止拖放的默认行为
  content.ondragenter = content.ondragover = content.ondragleave = function() {
    return false
  }
  //实现拖放
  content.ondrop = function(e) {
    e.preventDefault()
    console.log(e.dataTransfer)
    var path = e.dataTransfer.files[0].path
    fs.readFile(path, 'utf-8', (err, data) => {
      content.innerHTML = data
    })
  }

渲染进程与主进程的关系

electron在渲染进程中通过remote模块调用主进程中的BrowserWindow打开新窗口

  // electron在渲染进程中通过remote模块调用主进程中的BrowserWindow打开新窗口
  var win = null
  open.onclick = function() {
    win = new BrowserWindow({
      width: 400,
      height: 300,
      frame: false, //不显示菜单栏
      fullscreen: true //全屏
    })

    win.loadURL(path.join('file:', __dirname, 'news.html'))
    win.on('closed', () => {
      win = null
    })
  }

顶部菜单

在对应的渲染进程中引入

//index.html

<script src="main/menu.js"></script>

定义菜单

//menu.js

var remote = require('electron').remote

const Menu = remote.Menu

//定义菜单
var template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建文件',

        accelerator: 'ctrl+n', //快捷键

        click: function() {
          console.log('ctrl+n')
        }
      },
      {
        label: '新建窗口',
        click: function() {
          console.log('new window')
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '复制11',
        role: 'copy'
      },
      {
        label: '截切',
        role: 'cut'
      },
      {
        label: '粘贴',
        role: 'paste'
      }
    ]
  }
]

var m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)

右键菜单

在对应的渲染进程中引入

//index.html

<script src="main/menu.js"></script>

定义菜单

window.addEventListener(
  'contextmenu',
  function(e) {
    // alert('1212')

    //阻止当前窗口默认事件
    e.preventDefault()

    //在当前窗口点击右键的时候弹出  定义的菜单模板
    m.popup({ window: remote.getCurrentWindow() })
  },
  false
)