electron

参考链接

常用api

常用组件

其他

demo

文件目录

sections electron 嵌入页面
renderer-process 页面绑定事件
main-process electron 主进程
assets electron 嵌入静态资源

页面导入机制

定义模版

<link rel="import" href="sections/about.html">

导入页面

document.importNode

demo

 <link rel="import" href="sections/about.html">

 require('./assets/imports')

 //  ./assets/imports
 const links = document.querySelectorAll('link[rel="import"]')

 // Import and add each page to the DOM
 Array.prototype.forEach.call(links, function (link) {
   let template = link.import.querySelector('.task-template')
   let clone = document.importNode(template.content, true)
   if (link.href.match('about.html')) {
     document.querySelector('body').appendChild(clone)
   } else {
     document.querySelector('.content').appendChild(clone)
   }
 })

页面事件绑定

Element.addEventListener

事件传递

ipcRenderer.on


const ipc = require('electron').ipcRenderer

const informationBtn = document.getElementById('information-dialog')

informationBtn.addEventListener('click', function (event) {
  ipc.send('open-information-dialog')
})

ipc.on('information-dialog-selection', function (event, index) {
  let message = 'You selected '
  if (index === 0) message += 'yes.'
  else message += 'no.'
  document.getElementById('info-selection').innerHTML = message
})

事件接收,回调

ipcMain.on

demo

const app = require('electron').app
const ipc = require('electron').ipcMain

ipc.on('get-app-path', function (event) {
  event.sender.send('got-app-path', app.getAppPath())
})