Electron学习一

1. 什么是Electron:
Electron是使用HTML、JavaScript和CSS构建的跨平台桌面应用程序。

2. 特点及优势:

web技术：基于Chromium、Node.js
跨平台：Electron兼容Mac、Windows和Linux
开源：众多贡献者组成活跃社区共同维护的开源项目

3. 需要掌握的知识

HTML、JavaScript、CSS的基础知识
nodejs的基础知识

4. 环境要求

node版本 > 8.0
git

快速启动：

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start

效果如下：

主进程-Main Process

可以使用和系统对接的ElectronAPI-创建菜单，上传文件等等
创建渲染进程-RendererProcess
全面支持Nodejs
只有一个，作为整个程序的入口点

渲染进程-RendererProcess

可以有多个，每个对应一个窗口
每个都是一个单独的进程
全面支持Nodejs和DOMAPI
可以使用一部分Electron提供的API

第一个程序

点击查看代码

const {app,browserWindow}=require("electron")
//ready：当electron完全加载，准备好创建browserWindow的时候
app.on('ready',()=>{
  const win=new browserWindow({
    width:800,
    height:600,
    webPreferences:{
      //意思是在man.js中可以使用nodejs的api
      nodeIntegration:true
    }
  })
  win.loadFile("index.html")
  const secondWin=new browserWindow({
    width:400,
    height:300,
    webPreferences:{
      //意思是在man.js中可以使用nodejs的api
      nodeIntegration:true
    },
    //加入该属性后，只要关闭win，即主窗口，子窗口也会关闭
    parent:win
  })
  secondWin.loadFile("second.html")
})

index.html内容如下：

点击查看代码

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <Meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

second.html内容如下：

点击查看代码

<!DOCTYPE html>
<html>
  <head>
    <Meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <Meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>second html</h1>
  </body>
</html>

Electron学习一

主进程-Main Process

渲染进程-RendererProcess

第一个程序

index.html内容如下：

second.html内容如下：

运行效果：

相关文章