安装Electron

使用全局安装electron

采用全局安装可以有效避免报错

  1. cnpm install -g electron

听课笔记 - 图1

查看electron版本

  1. npx electron -v

听课笔记 - 图2

查看自带窗口程序

  1. npx electron

image.png
image.png

第一个Electron程序

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <button id="btn">Test</button>
  10.     <div id="context"></div>
  11.     <script src="render/index.js"></script>
  12. </body>
  13. </html>

main.js代码

  1. var electron = require('electron') // 引入electron
  3. var app = electron.app // 引用app
  4. var BrowserWindow = electron.BrowserWindow // 控制窗口引用
  6. var mainWindow = null // 声明要打开的主窗口
  8. app.on('ready', () => { // 监听窗口准备就绪的时间
  9.     mainWindow = new BrowserWindow({  // 窗体属性
  10.         width: 1400, 
  11.         height: 900,
  12.         webPreferences:{ nodeIntegration: true}
  13.     }) 
  14.     mainWindow.loadFile('index.html') // 需要渲染的页面
  15.     mainWindow.on('closed',()=>{ // 监听窗口关闭事件
  16.         mainWindow = null // 窗口置null防止内存溢出
  17.     })
  18. })

index.js代码

  1. var fs = require('fs') //fs = file system 读取计算机磁盘的能力
  2. window.onload = function () {
  3.     var btn = this.document.querySelector('#btn')
  4.     var context = this.document.querySelector('#context')
  5.     btn.onclick = function () {
  6.         fs.readFile('config.txt', (err, data) => { // 读取同级目录下的config.txt
  7.             context.innerHTML = data
  8.         })
  9.     }
  11. }

fs

remote

菜单栏